@vector-im/compound-web 7.6.3 → 7.6.4

package/dist/components/ChatFilter/ChatFilter.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const UnstyledButton = require("../Button/UnstyledButton.cjs");
+const ChatFilter_module = require("./ChatFilter.module.css.cjs");
+const ChatFilter = React.forwardRef(function ChatFilter2({ children, selected, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UnstyledButton.UnstyledButton,
+    {
+      ...props,
+      className: ChatFilter_module.default["chat-filter"],
+      "aria-selected": selected,
+      as: "button",
+      ref,
+      tabIndex: 0,
+      children
+    }
+  );
+});
+exports.ChatFilter = ChatFilter;
+//# sourceMappingURL=ChatFilter.cjs.map

package/dist/components/ChatFilter/ChatFilter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFilter.cjs","sources":["../../../src/components/ChatFilter/ChatFilter.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, { ForwardedRef, forwardRef } from \"react\";\nimport {\n  UnstyledButton,\n  UnstyledButtonPropsFor,\n} from \"../Button/UnstyledButton\";\nimport styles from \"./ChatFilter.module.css\";\n\ntype ChatFilterProps = Omit<UnstyledButtonPropsFor<\"button\">, \"disabled\"> & {\n  /**\n   * Whether the filter is selected.\n   */\n  selected?: boolean;\n};\n\n/**\n * A chat filter button.\n */\nexport const ChatFilter = forwardRef(function ChatFilter(\n  { children, selected, ...props }: ChatFilterProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  return (\n    <UnstyledButton\n      {...props}\n      className={styles[\"chat-filter\"]}\n      aria-selected={selected}\n      as=\"button\"\n      ref={ref}\n      tabIndex={0}\n    >\n      {children}\n    </UnstyledButton>\n  );\n});\n"],"names":["forwardRef","ChatFilter","jsx","UnstyledButton","styles"],"mappings":";;;;;;AAwBa,MAAA,aAAaA,MAAAA,WAAW,SAASC,YAC5C,EAAE,UAAU,UAAU,GAAG,MAAM,GAC/B,KACoB;AAElB,SAAAC,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAWC,0BAAO,aAAa;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAG;AAAA,MACH;AAAA,MACA,UAAU;AAAA,MAET;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;;"}

package/dist/components/ChatFilter/ChatFilter.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { UnstyledButtonPropsFor } from '../Button/UnstyledButton';
+type ChatFilterProps = Omit<UnstyledButtonPropsFor<"button">, "disabled"> & {
+    /**
+     * Whether the filter is selected.
+     */
+    selected?: boolean;
+};
+/**
+ * A chat filter button.
+ */
+export declare const ChatFilter: React.ForwardRefExoticComponent<Omit<ChatFilterProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=ChatFilter.d.ts.map

package/dist/components/ChatFilter/ChatFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFilter.d.ts","sourceRoot":"","sources":["../../../src/components/ChatFilter/ChatFilter.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAEL,sBAAsB,EACvB,MAAM,0BAA0B,CAAC;AAGlC,KAAK,eAAe,GAAG,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1E;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,wGAgBrB,CAAC"}

package/dist/components/ChatFilter/ChatFilter.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { UnstyledButton } from "../Button/UnstyledButton.js";
+import styles from "./ChatFilter.module.css.js";
+const ChatFilter = forwardRef(function ChatFilter2({ children, selected, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      ...props,
+      className: styles["chat-filter"],
+      "aria-selected": selected,
+      as: "button",
+      ref,
+      tabIndex: 0,
+      children
+    }
+  );
+});
+export {
+  ChatFilter
+};
+//# sourceMappingURL=ChatFilter.js.map

package/dist/components/ChatFilter/ChatFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFilter.js","sources":["../../../src/components/ChatFilter/ChatFilter.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, { ForwardedRef, forwardRef } from \"react\";\nimport {\n  UnstyledButton,\n  UnstyledButtonPropsFor,\n} from \"../Button/UnstyledButton\";\nimport styles from \"./ChatFilter.module.css\";\n\ntype ChatFilterProps = Omit<UnstyledButtonPropsFor<\"button\">, \"disabled\"> & {\n  /**\n   * Whether the filter is selected.\n   */\n  selected?: boolean;\n};\n\n/**\n * A chat filter button.\n */\nexport const ChatFilter = forwardRef(function ChatFilter(\n  { children, selected, ...props }: ChatFilterProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  return (\n    <UnstyledButton\n      {...props}\n      className={styles[\"chat-filter\"]}\n      aria-selected={selected}\n      as=\"button\"\n      ref={ref}\n      tabIndex={0}\n    >\n      {children}\n    </UnstyledButton>\n  );\n});\n"],"names":["ChatFilter"],"mappings":";;;;AAwBa,MAAA,aAAa,WAAW,SAASA,YAC5C,EAAE,UAAU,UAAU,GAAG,MAAM,GAC/B,KACoB;AAElB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,OAAO,aAAa;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAG;AAAA,MACH;AAAA,MACA,UAAU;AAAA,MAET;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;"}

package/dist/components/ChatFilter/ChatFilter.module.css.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const styles = {
+  "chat-filter": "_chat-filter_5qdp0_8"
+};
+exports.default = styles;
+//# sourceMappingURL=ChatFilter.module.css.cjs.map

package/dist/components/ChatFilter/ChatFilter.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFilter.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/ChatFilter/ChatFilter.module.css.js

@@ -0,0 +1,7 @@
+const styles = {
+  "chat-filter": "_chat-filter_5qdp0_8"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=ChatFilter.module.css.js.map

package/dist/components/ChatFilter/ChatFilter.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFilter.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/ChatFilter/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatFilter } from './ChatFilter';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ChatFilter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ChatFilter/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/Menu/FloatingMenu.cjs

@@ -4,8 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const classNames = require("classnames");
 const React = require("react");
 const FloatingMenu_module = require("./FloatingMenu.module.css.cjs");
-const Text = require("../Typography/Text.cjs");
-const MenuTitle = ({ title, id }) => /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { as: "h3", id, className: FloatingMenu_module.default.title, size: "sm", weight: "semibold", children: title });
+const MenuTitle = require("./MenuTitle.cjs");
 const FloatingMenu = React.forwardRef(
   ({ title, showTitle = true, className, children, ...props }, ref) => {
     const titleId = React.useId();
@@ -19,7 +18,7 @@ const FloatingMenu = React.forwardRef(
         className: classNames(className, FloatingMenu_module.default.menu),
         ...props,
         children: [
-          showTitle && /* @__PURE__ */ jsxRuntime.jsx(MenuTitle, { title, id: titleId }),
+          showTitle && /* @__PURE__ */ jsxRuntime.jsx(MenuTitle.MenuTitle, { className: FloatingMenu_module.default.title, title, id: titleId }),
           children
         ]
       }

package/dist/components/Menu/FloatingMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingMenu.cjs","sources":["../../../src/components/Menu/FloatingMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { Text } from \"../Typography/Text\";\n\ninterface TitleProps {\n  title: string;\n  id: string;\n}\n\nconst MenuTitle: React.FC<TitleProps> = ({ title, id }) => (\n  <Text as=\"h3\" id={id} className={styles.title} size=\"sm\" weight=\"semibold\">\n    {title}\n  </Text>\n);\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && <MenuTitle title={title} id={titleId} />}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"names":["Text","styles","forwardRef","useId","jsxs","classnames","jsx"],"mappings":";;;;;;;AAsBA,MAAM,YAAkC,CAAC,EAAE,OAAO,GAAG,qCAClDA,KAAK,MAAA,EAAA,IAAG,MAAK,IAAQ,WAAWC,oBAAO,QAAA,OAAO,MAAK,MAAK,QAAO,YAC7D,UACH,OAAA;AA2BK,MAAM,eAAeC,MAAA;AAAA,EAC1B,CAAC,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnE,UAAM,UAAUC,MAAAA,MAAM;AAEpB,WAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,cAAY,YAAY,SAAY;AAAA,QACpC,mBAAiB,YAAY,UAAU;AAAA,QACvC,WAAWC,WAAW,WAAWJ,oBAAAA,QAAO,IAAI;AAAA,QAC3C,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aAAcK,2BAAA,IAAA,WAAA,EAAU,OAAc,IAAI,SAAS;AAAA,UACnD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"FloatingMenu.cjs","sources":["../../../src/components/Menu/FloatingMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { MenuTitle } from \"./MenuTitle.tsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && (\n          <MenuTitle className={styles.title} title={title} id={titleId} />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"names":["forwardRef","useId","jsxs","classnames","styles","MenuTitle"],"mappings":";;;;;;;AAyCO,MAAM,eAAeA,MAAA;AAAA,EAC1B,CAAC,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnE,UAAM,UAAUC,MAAAA,MAAM;AAEpB,WAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,cAAY,YAAY,SAAY;AAAA,QACpC,mBAAiB,YAAY,UAAU;AAAA,QACvC,WAAWC,WAAW,WAAWC,oBAAAA,QAAO,IAAI;AAAA,QAC3C,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,4CACEC,UAAU,WAAA,EAAA,WAAWD,4BAAO,OAAO,OAAc,IAAI,SAAS;AAAA,UAEhE;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;;"}

package/dist/components/Menu/FloatingMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/FloatingMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EACxB,SAAS,EAGV,MAAM,OAAO,CAAC;AAef,UAAU,KAAM,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AAGH,eAAO,MAAM,YAAY,8EAiBxB,CAAC"}
+{"version":3,"file":"FloatingMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/FloatingMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EACxB,SAAS,EAGV,MAAM,OAAO,CAAC;AAIf,UAAU,KAAM,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AAGH,eAAO,MAAM,YAAY,8EAmBxB,CAAC"}

package/dist/components/Menu/FloatingMenu.js

@@ -2,8 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import { forwardRef, useId } from "react";
 import styles from "./FloatingMenu.module.css.js";
-import { Text } from "../Typography/Text.js";
-const MenuTitle = ({ title, id }) => /* @__PURE__ */ jsx(Text, { as: "h3", id, className: styles.title, size: "sm", weight: "semibold", children: title });
+import { MenuTitle } from "./MenuTitle.js";
 const FloatingMenu = forwardRef(
   ({ title, showTitle = true, className, children, ...props }, ref) => {
     const titleId = useId();
@@ -17,7 +16,7 @@ const FloatingMenu = forwardRef(
         className: classNames(className, styles.menu),
         ...props,
         children: [
-          showTitle && /* @__PURE__ */ jsx(MenuTitle, { title, id: titleId }),
+          showTitle && /* @__PURE__ */ jsx(MenuTitle, { className: styles.title, title, id: titleId }),
           children
         ]
       }

package/dist/components/Menu/FloatingMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingMenu.js","sources":["../../../src/components/Menu/FloatingMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { Text } from \"../Typography/Text\";\n\ninterface TitleProps {\n  title: string;\n  id: string;\n}\n\nconst MenuTitle: React.FC<TitleProps> = ({ title, id }) => (\n  <Text as=\"h3\" id={id} className={styles.title} size=\"sm\" weight=\"semibold\">\n    {title}\n  </Text>\n);\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && <MenuTitle title={title} id={titleId} />}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"names":["classnames"],"mappings":";;;;;AAsBA,MAAM,YAAkC,CAAC,EAAE,OAAO,GAAG,0BAClD,MAAK,EAAA,IAAG,MAAK,IAAQ,WAAW,OAAO,OAAO,MAAK,MAAK,QAAO,YAC7D,UACH,OAAA;AA2BK,MAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnE,UAAM,UAAU,MAAM;AAEpB,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,cAAY,YAAY,SAAY;AAAA,QACpC,mBAAiB,YAAY,UAAU;AAAA,QACvC,WAAWA,WAAW,WAAW,OAAO,IAAI;AAAA,QAC3C,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aAAc,oBAAA,WAAA,EAAU,OAAc,IAAI,SAAS;AAAA,UACnD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"FloatingMenu.js","sources":["../../../src/components/Menu/FloatingMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { MenuTitle } from \"./MenuTitle.tsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && (\n          <MenuTitle className={styles.title} title={title} id={titleId} />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"names":["classnames"],"mappings":";;;;;AAyCO,MAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnE,UAAM,UAAU,MAAM;AAEpB,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,cAAY,YAAY,SAAY;AAAA,QACpC,mBAAiB,YAAY,UAAU;AAAA,QACvC,WAAWA,WAAW,WAAW,OAAO,IAAI;AAAA,QAC3C,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,iCACE,WAAU,EAAA,WAAW,OAAO,OAAO,OAAc,IAAI,SAAS;AAAA,UAEhE;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;"}

package/dist/components/Menu/FloatingMenu.module.css.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const menu = "_menu_eeuw6_8";
-const title = "_title_eeuw6_74";
+const menu = "_menu_19sse_8";
+const title = "_title_19sse_74";
 const styles = {
   menu,
   title

package/dist/components/Menu/FloatingMenu.module.css.js

@@ -1,5 +1,5 @@
-const menu = "_menu_eeuw6_8";
-const title = "_title_eeuw6_74";
+const menu = "_menu_19sse_8";
+const title = "_title_19sse_74";
 const styles = {
   menu,
   title

package/dist/components/Menu/MenuTitle.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Text = require("../Typography/Text.cjs");
+const MenuTitle_module = require("./MenuTitle.module.css.cjs");
+const classNames = require("classnames");
+const MenuTitle = ({
+  title,
+  id,
+  className
+}) => {
+  const classes = classNames(MenuTitle_module.default["menu-title"], className);
+  return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { as: "h3", id, className: classes, size: "sm", weight: "semibold", children: title });
+};
+exports.MenuTitle = MenuTitle;
+//# sourceMappingURL=MenuTitle.cjs.map

package/dist/components/Menu/MenuTitle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.cjs","sources":["../../../src/components/Menu/MenuTitle.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React from \"react\";\nimport { Text } from \"../Typography/Text.tsx\";\nimport styles from \"./MenuTitle.module.css\";\nimport classnames from \"classnames\";\n\ninterface MenuTitleProps {\n  /**\n   * The title of the menu.\n   */\n  title: string;\n  /**\n   * The id of the menu title.\n   */\n  id?: string;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n}\n\nexport const MenuTitle: React.FC<MenuTitleProps> = ({\n  title,\n  id,\n  className,\n}) => {\n  const classes = classnames(styles[\"menu-title\"], className);\n\n  return (\n    <Text as=\"h3\" id={id} className={classes} size=\"sm\" weight=\"semibold\">\n      {title}\n    </Text>\n  );\n};\n"],"names":["classnames","styles","jsx","Text"],"mappings":";;;;;;AA2BO,MAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,UAAUA,WAAWC,iBAAO,QAAA,YAAY,GAAG,SAAS;AAGxD,SAAAC,2BAAAA,IAACC,KAAAA,MAAK,EAAA,IAAG,MAAK,IAAQ,WAAW,SAAS,MAAK,MAAK,QAAO,YACxD,UACH,MAAA,CAAA;AAEJ;;"}

package/dist/components/Menu/MenuTitle.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+interface MenuTitleProps {
+    /**
+     * The title of the menu.
+     */
+    title: string;
+    /**
+     * The id of the menu title.
+     */
+    id?: string;
+    /**
+     * The CSS class.
+     */
+    className?: string;
+}
+export declare const MenuTitle: React.FC<MenuTitleProps>;
+export {};
+//# sourceMappingURL=MenuTitle.d.ts.map

package/dist/components/Menu/MenuTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuTitle.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,cAAc;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAY9C,CAAC"}

package/dist/components/Menu/MenuTitle.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Text } from "../Typography/Text.js";
+import styles from "./MenuTitle.module.css.js";
+import classNames from "classnames";
+const MenuTitle = ({
+  title,
+  id,
+  className
+}) => {
+  const classes = classNames(styles["menu-title"], className);
+  return /* @__PURE__ */ jsx(Text, { as: "h3", id, className: classes, size: "sm", weight: "semibold", children: title });
+};
+export {
+  MenuTitle
+};
+//# sourceMappingURL=MenuTitle.js.map

package/dist/components/Menu/MenuTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.js","sources":["../../../src/components/Menu/MenuTitle.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React from \"react\";\nimport { Text } from \"../Typography/Text.tsx\";\nimport styles from \"./MenuTitle.module.css\";\nimport classnames from \"classnames\";\n\ninterface MenuTitleProps {\n  /**\n   * The title of the menu.\n   */\n  title: string;\n  /**\n   * The id of the menu title.\n   */\n  id?: string;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n}\n\nexport const MenuTitle: React.FC<MenuTitleProps> = ({\n  title,\n  id,\n  className,\n}) => {\n  const classes = classnames(styles[\"menu-title\"], className);\n\n  return (\n    <Text as=\"h3\" id={id} className={classes} size=\"sm\" weight=\"semibold\">\n      {title}\n    </Text>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;AA2BO,MAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,UAAUA,WAAW,OAAO,YAAY,GAAG,SAAS;AAGxD,SAAA,oBAAC,MAAK,EAAA,IAAG,MAAK,IAAQ,WAAW,SAAS,MAAK,MAAK,QAAO,YACxD,UACH,MAAA,CAAA;AAEJ;"}

package/dist/components/Menu/MenuTitle.module.css.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const styles = {
+  "menu-title": "_menu-title_1sgvx_8"
+};
+exports.default = styles;
+//# sourceMappingURL=MenuTitle.module.css.cjs.map

package/dist/components/Menu/MenuTitle.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/Menu/MenuTitle.module.css.js

@@ -0,0 +1,7 @@
+const styles = {
+  "menu-title": "_menu-title_1sgvx_8"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=MenuTitle.module.css.js.map

package/dist/components/Menu/MenuTitle.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/Tooltip/Tooltip.cjs

@@ -92,7 +92,12 @@ const TooltipAnchor = ({
   const element = React.useMemo(() => {
     if (!React.isValidElement(children)) return;
     if (isTriggerInteractive) {
-      const props = context.getReferenceProps({ ref });
+      const props = context.getReferenceProps({
+        // To support React 18, we need to explicitly pass the children's props. See  https://github.com/element-hq/compound/issues/333
+        // In React 19, this is not necessary. `getReferenceProps` is able to get the props directly from the ref.
+        ...typeof children.props === "object" ? children.props : {},
+        ref
+      });
       return React.cloneElement(children, props);
     } else {
       const props = context.getReferenceProps({

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport { TooltipContext, useTooltipContext } from \"./TooltipContext\";\nimport {\n  FloatingArrow,\n  FloatingPortal,\n  useMergeRefs,\n} from \"@floating-ui/react\";\nimport React, {\n  PropsWithChildren,\n  Ref,\n  JSX,\n  isValidElement,\n  cloneElement,\n  useMemo,\n  ReactNode,\n  FC,\n  ReactElement,\n} from \"react\";\n\nimport classNames from \"classnames\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  CommonUseTooltipProps,\n  TooltipDescription,\n  TooltipLabel,\n  useTooltip,\n} from \"./useTooltip\";\n\n// Unfortunately Omit doesn't distribute nicely over sum types, so we have to\n// piece together the useTooltip options type by hand\ntype TooltipProps = Omit<CommonUseTooltipProps, \"isTriggerInteractive\"> &\n  (TooltipLabel | TooltipDescription) & {\n    /**\n     * Whether the trigger element is interactive.\n     * When trigger is interactive:\n     *      - tooltip will be shown after a 300ms delay.\n     * When trigger is not interactive:\n     *      - tooltip will be shown instantly when pointer enters trigger.\n     *      - trigger will be wrapped in a span with a tab index from prop nonInteractiveTriggerTabIndex\n     * @default true\n     */\n    isTriggerInteractive?: boolean;\n    /**\n     * The tab index for the non interactive trigger.\n     * @default 0\n     */\n    nonInteractiveTriggerTabIndex?: number;\n  };\n\nconst hasLabel = (\n  props: TooltipLabel | TooltipDescription,\n): props is TooltipLabel => \"label\" in props && !!props.label;\n\n/**\n * A tooltip component\n */\nexport function Tooltip({\n  children,\n  isTriggerInteractive = true,\n  nonInteractiveTriggerTabIndex = 0,\n  ...props\n}: PropsWithChildren<TooltipProps>): JSX.Element {\n  const context = useTooltip({ isTriggerInteractive, ...props });\n\n  return (\n    <TooltipContext.Provider value={context}>\n      <TooltipAnchor\n        isTriggerInteractive={isTriggerInteractive}\n        nonInteractiveTriggerTabIndex={nonInteractiveTriggerTabIndex}\n      >\n        {children}\n      </TooltipAnchor>\n      <TooltipContent>\n        <span id={context.labelId}>\n          {hasLabel(props) ? props.label : props.description}\n        </span>\n        <Caption />\n      </TooltipContent>\n    </TooltipContext.Provider>\n  );\n}\n\nfunction Caption() {\n  const { caption, captionId } = useTooltipContext();\n  if (!caption) return null;\n\n  const isCaptionString = typeof caption === \"string\";\n  const Container = isCaptionString ? \"span\" : \"div\";\n\n  /**\n   * Forcing dark theme, so that we have the correct contrast when\n   * using the text color secondary on a solid dark background.\n   * This is temporary and should only remain until we figure out\n   * the approach to on-solid tokens\n   **/\n  return (\n    <Container\n      id={captionId}\n      className={classNames(styles.caption, \"cpd-theme-dark\")}\n    >\n      {caption}\n    </Container>\n  );\n}\n\n/**\n * The content of the tooltip\n * @param children\n */\nfunction TooltipContent({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element | null {\n  const {\n    context: floatingContext,\n    open,\n    arrowRef,\n    purpose,\n    ...rest\n  } = useTooltipContext();\n\n  // Label tooltips are kept in the DOM even when not visually open\n  if (!open && purpose !== \"label\") return null;\n\n  return (\n    <FloatingPortal>\n      <div\n        ref={rest.refs.setFloating}\n        style={rest.floatingStyles}\n        {...rest.tooltipProps}\n        {...rest.getFloatingProps()}\n        className={classNames(styles.tooltip, {\n          [styles.invisible]: purpose === \"label\" && !open,\n        })}\n      >\n        <FloatingArrow\n          ref={arrowRef}\n          context={floatingContext}\n          // design absolute value\n          width={10}\n          height={6}\n          className={styles.arrow}\n        />\n        {children}\n      </div>\n    </FloatingPortal>\n  );\n}\n\ninterface TooltipAnchorProps {\n  children: ReactNode;\n  isTriggerInteractive: boolean;\n  nonInteractiveTriggerTabIndex?: number;\n}\n\n/**\n * The anchor of the tooltip\n * @param children\n */\nconst TooltipAnchor: FC<TooltipAnchorProps> = ({\n  children,\n  isTriggerInteractive,\n  nonInteractiveTriggerTabIndex,\n}) => {\n  const context = useTooltipContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  const element = useMemo(() => {\n    if (!isValidElement(children)) return;\n\n    if (isTriggerInteractive) {\n      const props = context.getReferenceProps({ ref });\n      return cloneElement(children, props);\n    } else {\n      // For a non-interactive trigger, we want most of the props to go on the\n      // span element that we provide, since that's what receives focus, but it\n      // should still be the trigger that receives the label/description. It\n      // would be wrong to label the span element, as it lacks a role.\n      const props = context.getReferenceProps({\n        ref,\n        tabIndex: nonInteractiveTriggerTabIndex,\n      });\n      const {\n        \"aria-labelledby\": labelId,\n        \"aria-describedby\": descriptionId,\n        ...spanProps\n      } = props;\n      return (\n        <span tabIndex={nonInteractiveTriggerTabIndex} {...spanProps}>\n          {cloneElement(children as ReactElement<Record<string, unknown>>, {\n            \"aria-labelledby\": labelId,\n            \"aria-describedby\": descriptionId,\n          })}\n        </span>\n      );\n    }\n  }, [context, ref, children]);\n\n  if (!element) {\n    throw new Error(\"Tooltip anchor must be a single valid React element\");\n  }\n\n  return element;\n};\n"],"names":["useTooltip","jsxs","TooltipContext","jsx","useTooltipContext","styles","FloatingPortal","FloatingArrow","useMergeRefs","useMemo","isValidElement","cloneElement"],"mappings":"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"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport { TooltipContext, useTooltipContext } from \"./TooltipContext\";\nimport {\n  FloatingArrow,\n  FloatingPortal,\n  useMergeRefs,\n} from \"@floating-ui/react\";\nimport React, {\n  PropsWithChildren,\n  Ref,\n  JSX,\n  isValidElement,\n  cloneElement,\n  useMemo,\n  ReactNode,\n  FC,\n  ReactElement,\n} from \"react\";\n\nimport classNames from \"classnames\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  CommonUseTooltipProps,\n  TooltipDescription,\n  TooltipLabel,\n  useTooltip,\n} from \"./useTooltip\";\n\n// Unfortunately Omit doesn't distribute nicely over sum types, so we have to\n// piece together the useTooltip options type by hand\ntype TooltipProps = Omit<CommonUseTooltipProps, \"isTriggerInteractive\"> &\n  (TooltipLabel | TooltipDescription) & {\n    /**\n     * Whether the trigger element is interactive.\n     * When trigger is interactive:\n     *      - tooltip will be shown after a 300ms delay.\n     * When trigger is not interactive:\n     *      - tooltip will be shown instantly when pointer enters trigger.\n     *      - trigger will be wrapped in a span with a tab index from prop nonInteractiveTriggerTabIndex\n     * @default true\n     */\n    isTriggerInteractive?: boolean;\n    /**\n     * The tab index for the non interactive trigger.\n     * @default 0\n     */\n    nonInteractiveTriggerTabIndex?: number;\n  };\n\nconst hasLabel = (\n  props: TooltipLabel | TooltipDescription,\n): props is TooltipLabel => \"label\" in props && !!props.label;\n\n/**\n * A tooltip component\n */\nexport function Tooltip({\n  children,\n  isTriggerInteractive = true,\n  nonInteractiveTriggerTabIndex = 0,\n  ...props\n}: PropsWithChildren<TooltipProps>): JSX.Element {\n  const context = useTooltip({ isTriggerInteractive, ...props });\n\n  return (\n    <TooltipContext.Provider value={context}>\n      <TooltipAnchor\n        isTriggerInteractive={isTriggerInteractive}\n        nonInteractiveTriggerTabIndex={nonInteractiveTriggerTabIndex}\n      >\n        {children}\n      </TooltipAnchor>\n      <TooltipContent>\n        <span id={context.labelId}>\n          {hasLabel(props) ? props.label : props.description}\n        </span>\n        <Caption />\n      </TooltipContent>\n    </TooltipContext.Provider>\n  );\n}\n\nfunction Caption() {\n  const { caption, captionId } = useTooltipContext();\n  if (!caption) return null;\n\n  const isCaptionString = typeof caption === \"string\";\n  const Container = isCaptionString ? \"span\" : \"div\";\n\n  /**\n   * Forcing dark theme, so that we have the correct contrast when\n   * using the text color secondary on a solid dark background.\n   * This is temporary and should only remain until we figure out\n   * the approach to on-solid tokens\n   **/\n  return (\n    <Container\n      id={captionId}\n      className={classNames(styles.caption, \"cpd-theme-dark\")}\n    >\n      {caption}\n    </Container>\n  );\n}\n\n/**\n * The content of the tooltip\n * @param children\n */\nfunction TooltipContent({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element | null {\n  const {\n    context: floatingContext,\n    open,\n    arrowRef,\n    purpose,\n    ...rest\n  } = useTooltipContext();\n\n  // Label tooltips are kept in the DOM even when not visually open\n  if (!open && purpose !== \"label\") return null;\n\n  return (\n    <FloatingPortal>\n      <div\n        ref={rest.refs.setFloating}\n        style={rest.floatingStyles}\n        {...rest.tooltipProps}\n        {...rest.getFloatingProps()}\n        className={classNames(styles.tooltip, {\n          [styles.invisible]: purpose === \"label\" && !open,\n        })}\n      >\n        <FloatingArrow\n          ref={arrowRef}\n          context={floatingContext}\n          // design absolute value\n          width={10}\n          height={6}\n          className={styles.arrow}\n        />\n        {children}\n      </div>\n    </FloatingPortal>\n  );\n}\n\ninterface TooltipAnchorProps {\n  children: ReactNode;\n  isTriggerInteractive: boolean;\n  nonInteractiveTriggerTabIndex?: number;\n}\n\n/**\n * The anchor of the tooltip\n * @param children\n */\nconst TooltipAnchor: FC<TooltipAnchorProps> = ({\n  children,\n  isTriggerInteractive,\n  nonInteractiveTriggerTabIndex,\n}) => {\n  const context = useTooltipContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  const element = useMemo(() => {\n    if (!isValidElement(children)) return;\n\n    if (isTriggerInteractive) {\n      const props = context.getReferenceProps({\n        // To support React 18, we need to explicitly pass the children's props. See  https://github.com/element-hq/compound/issues/333\n        // In React 19, this is not necessary. `getReferenceProps` is able to get the props directly from the ref.\n        ...(typeof children.props === \"object\" ? children.props : {}),\n        ref,\n      });\n      return cloneElement(children, props);\n    } else {\n      // For a non-interactive trigger, we want most of the props to go on the\n      // span element that we provide, since that's what receives focus, but it\n      // should still be the trigger that receives the label/description. It\n      // would be wrong to label the span element, as it lacks a role.\n      const props = context.getReferenceProps({\n        ref,\n        tabIndex: nonInteractiveTriggerTabIndex,\n      });\n      const {\n        \"aria-labelledby\": labelId,\n        \"aria-describedby\": descriptionId,\n        ...spanProps\n      } = props;\n      return (\n        <span tabIndex={nonInteractiveTriggerTabIndex} {...spanProps}>\n          {cloneElement(children as ReactElement<Record<string, unknown>>, {\n            \"aria-labelledby\": labelId,\n            \"aria-describedby\": descriptionId,\n          })}\n        </span>\n      );\n    }\n  }, [context, ref, children]);\n\n  if (!element) {\n    throw new Error(\"Tooltip anchor must be a single valid React element\");\n  }\n\n  return element;\n};\n"],"names":["useTooltip","jsxs","TooltipContext","jsx","useTooltipContext","styles","FloatingPortal","FloatingArrow","useMergeRefs","useMemo","isValidElement","cloneElement"],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.js

@@ -90,7 +90,12 @@ const TooltipAnchor = ({
   const element = useMemo(() => {
     if (!isValidElement(children)) return;
     if (isTriggerInteractive) {
-      const props = context.getReferenceProps({ ref });
+      const props = context.getReferenceProps({
+        // To support React 18, we need to explicitly pass the children's props. See  https://github.com/element-hq/compound/issues/333
+        // In React 19, this is not necessary. `getReferenceProps` is able to get the props directly from the ref.
+        ...typeof children.props === "object" ? children.props : {},
+        ref
+      });
       return cloneElement(children, props);
     } else {
       const props = context.getReferenceProps({

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport { TooltipContext, useTooltipContext } from \"./TooltipContext\";\nimport {\n  FloatingArrow,\n  FloatingPortal,\n  useMergeRefs,\n} from \"@floating-ui/react\";\nimport React, {\n  PropsWithChildren,\n  Ref,\n  JSX,\n  isValidElement,\n  cloneElement,\n  useMemo,\n  ReactNode,\n  FC,\n  ReactElement,\n} from \"react\";\n\nimport classNames from \"classnames\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  CommonUseTooltipProps,\n  TooltipDescription,\n  TooltipLabel,\n  useTooltip,\n} from \"./useTooltip\";\n\n// Unfortunately Omit doesn't distribute nicely over sum types, so we have to\n// piece together the useTooltip options type by hand\ntype TooltipProps = Omit<CommonUseTooltipProps, \"isTriggerInteractive\"> &\n  (TooltipLabel | TooltipDescription) & {\n    /**\n     * Whether the trigger element is interactive.\n     * When trigger is interactive:\n     *      - tooltip will be shown after a 300ms delay.\n     * When trigger is not interactive:\n     *      - tooltip will be shown instantly when pointer enters trigger.\n     *      - trigger will be wrapped in a span with a tab index from prop nonInteractiveTriggerTabIndex\n     * @default true\n     */\n    isTriggerInteractive?: boolean;\n    /**\n     * The tab index for the non interactive trigger.\n     * @default 0\n     */\n    nonInteractiveTriggerTabIndex?: number;\n  };\n\nconst hasLabel = (\n  props: TooltipLabel | TooltipDescription,\n): props is TooltipLabel => \"label\" in props && !!props.label;\n\n/**\n * A tooltip component\n */\nexport function Tooltip({\n  children,\n  isTriggerInteractive = true,\n  nonInteractiveTriggerTabIndex = 0,\n  ...props\n}: PropsWithChildren<TooltipProps>): JSX.Element {\n  const context = useTooltip({ isTriggerInteractive, ...props });\n\n  return (\n    <TooltipContext.Provider value={context}>\n      <TooltipAnchor\n        isTriggerInteractive={isTriggerInteractive}\n        nonInteractiveTriggerTabIndex={nonInteractiveTriggerTabIndex}\n      >\n        {children}\n      </TooltipAnchor>\n      <TooltipContent>\n        <span id={context.labelId}>\n          {hasLabel(props) ? props.label : props.description}\n        </span>\n        <Caption />\n      </TooltipContent>\n    </TooltipContext.Provider>\n  );\n}\n\nfunction Caption() {\n  const { caption, captionId } = useTooltipContext();\n  if (!caption) return null;\n\n  const isCaptionString = typeof caption === \"string\";\n  const Container = isCaptionString ? \"span\" : \"div\";\n\n  /**\n   * Forcing dark theme, so that we have the correct contrast when\n   * using the text color secondary on a solid dark background.\n   * This is temporary and should only remain until we figure out\n   * the approach to on-solid tokens\n   **/\n  return (\n    <Container\n      id={captionId}\n      className={classNames(styles.caption, \"cpd-theme-dark\")}\n    >\n      {caption}\n    </Container>\n  );\n}\n\n/**\n * The content of the tooltip\n * @param children\n */\nfunction TooltipContent({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element | null {\n  const {\n    context: floatingContext,\n    open,\n    arrowRef,\n    purpose,\n    ...rest\n  } = useTooltipContext();\n\n  // Label tooltips are kept in the DOM even when not visually open\n  if (!open && purpose !== \"label\") return null;\n\n  return (\n    <FloatingPortal>\n      <div\n        ref={rest.refs.setFloating}\n        style={rest.floatingStyles}\n        {...rest.tooltipProps}\n        {...rest.getFloatingProps()}\n        className={classNames(styles.tooltip, {\n          [styles.invisible]: purpose === \"label\" && !open,\n        })}\n      >\n        <FloatingArrow\n          ref={arrowRef}\n          context={floatingContext}\n          // design absolute value\n          width={10}\n          height={6}\n          className={styles.arrow}\n        />\n        {children}\n      </div>\n    </FloatingPortal>\n  );\n}\n\ninterface TooltipAnchorProps {\n  children: ReactNode;\n  isTriggerInteractive: boolean;\n  nonInteractiveTriggerTabIndex?: number;\n}\n\n/**\n * The anchor of the tooltip\n * @param children\n */\nconst TooltipAnchor: FC<TooltipAnchorProps> = ({\n  children,\n  isTriggerInteractive,\n  nonInteractiveTriggerTabIndex,\n}) => {\n  const context = useTooltipContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  const element = useMemo(() => {\n    if (!isValidElement(children)) return;\n\n    if (isTriggerInteractive) {\n      const props = context.getReferenceProps({ ref });\n      return cloneElement(children, props);\n    } else {\n      // For a non-interactive trigger, we want most of the props to go on the\n      // span element that we provide, since that's what receives focus, but it\n      // should still be the trigger that receives the label/description. It\n      // would be wrong to label the span element, as it lacks a role.\n      const props = context.getReferenceProps({\n        ref,\n        tabIndex: nonInteractiveTriggerTabIndex,\n      });\n      const {\n        \"aria-labelledby\": labelId,\n        \"aria-describedby\": descriptionId,\n        ...spanProps\n      } = props;\n      return (\n        <span tabIndex={nonInteractiveTriggerTabIndex} {...spanProps}>\n          {cloneElement(children as ReactElement<Record<string, unknown>>, {\n            \"aria-labelledby\": labelId,\n            \"aria-describedby\": descriptionId,\n          })}\n        </span>\n      );\n    }\n  }, [context, ref, children]);\n\n  if (!element) {\n    throw new Error(\"Tooltip anchor must be a single valid React element\");\n  }\n\n  return element;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport { TooltipContext, useTooltipContext } from \"./TooltipContext\";\nimport {\n  FloatingArrow,\n  FloatingPortal,\n  useMergeRefs,\n} from \"@floating-ui/react\";\nimport React, {\n  PropsWithChildren,\n  Ref,\n  JSX,\n  isValidElement,\n  cloneElement,\n  useMemo,\n  ReactNode,\n  FC,\n  ReactElement,\n} from \"react\";\n\nimport classNames from \"classnames\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  CommonUseTooltipProps,\n  TooltipDescription,\n  TooltipLabel,\n  useTooltip,\n} from \"./useTooltip\";\n\n// Unfortunately Omit doesn't distribute nicely over sum types, so we have to\n// piece together the useTooltip options type by hand\ntype TooltipProps = Omit<CommonUseTooltipProps, \"isTriggerInteractive\"> &\n  (TooltipLabel | TooltipDescription) & {\n    /**\n     * Whether the trigger element is interactive.\n     * When trigger is interactive:\n     *      - tooltip will be shown after a 300ms delay.\n     * When trigger is not interactive:\n     *      - tooltip will be shown instantly when pointer enters trigger.\n     *      - trigger will be wrapped in a span with a tab index from prop nonInteractiveTriggerTabIndex\n     * @default true\n     */\n    isTriggerInteractive?: boolean;\n    /**\n     * The tab index for the non interactive trigger.\n     * @default 0\n     */\n    nonInteractiveTriggerTabIndex?: number;\n  };\n\nconst hasLabel = (\n  props: TooltipLabel | TooltipDescription,\n): props is TooltipLabel => \"label\" in props && !!props.label;\n\n/**\n * A tooltip component\n */\nexport function Tooltip({\n  children,\n  isTriggerInteractive = true,\n  nonInteractiveTriggerTabIndex = 0,\n  ...props\n}: PropsWithChildren<TooltipProps>): JSX.Element {\n  const context = useTooltip({ isTriggerInteractive, ...props });\n\n  return (\n    <TooltipContext.Provider value={context}>\n      <TooltipAnchor\n        isTriggerInteractive={isTriggerInteractive}\n        nonInteractiveTriggerTabIndex={nonInteractiveTriggerTabIndex}\n      >\n        {children}\n      </TooltipAnchor>\n      <TooltipContent>\n        <span id={context.labelId}>\n          {hasLabel(props) ? props.label : props.description}\n        </span>\n        <Caption />\n      </TooltipContent>\n    </TooltipContext.Provider>\n  );\n}\n\nfunction Caption() {\n  const { caption, captionId } = useTooltipContext();\n  if (!caption) return null;\n\n  const isCaptionString = typeof caption === \"string\";\n  const Container = isCaptionString ? \"span\" : \"div\";\n\n  /**\n   * Forcing dark theme, so that we have the correct contrast when\n   * using the text color secondary on a solid dark background.\n   * This is temporary and should only remain until we figure out\n   * the approach to on-solid tokens\n   **/\n  return (\n    <Container\n      id={captionId}\n      className={classNames(styles.caption, \"cpd-theme-dark\")}\n    >\n      {caption}\n    </Container>\n  );\n}\n\n/**\n * The content of the tooltip\n * @param children\n */\nfunction TooltipContent({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element | null {\n  const {\n    context: floatingContext,\n    open,\n    arrowRef,\n    purpose,\n    ...rest\n  } = useTooltipContext();\n\n  // Label tooltips are kept in the DOM even when not visually open\n  if (!open && purpose !== \"label\") return null;\n\n  return (\n    <FloatingPortal>\n      <div\n        ref={rest.refs.setFloating}\n        style={rest.floatingStyles}\n        {...rest.tooltipProps}\n        {...rest.getFloatingProps()}\n        className={classNames(styles.tooltip, {\n          [styles.invisible]: purpose === \"label\" && !open,\n        })}\n      >\n        <FloatingArrow\n          ref={arrowRef}\n          context={floatingContext}\n          // design absolute value\n          width={10}\n          height={6}\n          className={styles.arrow}\n        />\n        {children}\n      </div>\n    </FloatingPortal>\n  );\n}\n\ninterface TooltipAnchorProps {\n  children: ReactNode;\n  isTriggerInteractive: boolean;\n  nonInteractiveTriggerTabIndex?: number;\n}\n\n/**\n * The anchor of the tooltip\n * @param children\n */\nconst TooltipAnchor: FC<TooltipAnchorProps> = ({\n  children,\n  isTriggerInteractive,\n  nonInteractiveTriggerTabIndex,\n}) => {\n  const context = useTooltipContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  const element = useMemo(() => {\n    if (!isValidElement(children)) return;\n\n    if (isTriggerInteractive) {\n      const props = context.getReferenceProps({\n        // To support React 18, we need to explicitly pass the children's props. See  https://github.com/element-hq/compound/issues/333\n        // In React 19, this is not necessary. `getReferenceProps` is able to get the props directly from the ref.\n        ...(typeof children.props === \"object\" ? children.props : {}),\n        ref,\n      });\n      return cloneElement(children, props);\n    } else {\n      // For a non-interactive trigger, we want most of the props to go on the\n      // span element that we provide, since that's what receives focus, but it\n      // should still be the trigger that receives the label/description. It\n      // would be wrong to label the span element, as it lacks a role.\n      const props = context.getReferenceProps({\n        ref,\n        tabIndex: nonInteractiveTriggerTabIndex,\n      });\n      const {\n        \"aria-labelledby\": labelId,\n        \"aria-describedby\": descriptionId,\n        ...spanProps\n      } = props;\n      return (\n        <span tabIndex={nonInteractiveTriggerTabIndex} {...spanProps}>\n          {cloneElement(children as ReactElement<Record<string, unknown>>, {\n            \"aria-labelledby\": labelId,\n            \"aria-describedby\": descriptionId,\n          })}\n        </span>\n      );\n    }\n  }, [context, ref, children]);\n\n  if (!element) {\n    throw new Error(\"Tooltip anchor must be a single valid React element\");\n  }\n\n  return element;\n};\n"],"names":[],"mappings":"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"}

package/dist/index.cjs

@@ -35,6 +35,7 @@ const InlineSpinner = require("./components/InlineSpinner/InlineSpinner.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const VisualList = require("./components/VisualList/VisualList.cjs");
 const VisualListItem = require("./components/VisualList/VisualListItem.cjs");
+const ChatFilter = require("./components/ChatFilter/ChatFilter.cjs");
 const Text$1 = require("./components/Form/Controls/Text/Text.cjs");
 const Action = require("./components/Form/Controls/Action/Action.cjs");
 const Password = require("./components/Form/Controls/Password/Password.cjs");
@@ -90,6 +91,7 @@ exports.InlineSpinner = InlineSpinner.InlineSpinner;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
 exports.VisualList = VisualList.VisualList;
 exports.VisualListItem = VisualListItem.VisualListItem;
+exports.ChatFilter = ChatFilter.ChatFilter;
 exports.Control = Text$1.TextControl;
 exports.TextControl = Text$1.TextControl;
 exports.TextInput = Text$1.TextInput;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export { Dropdown } from './components/Dropdown';
 export { InlineSpinner } from './components/InlineSpinner';
 export { Breadcrumb } from './components/Breadcrumb';
 export { VisualList, VisualListItem } from './components/VisualList';
+export { ChatFilter } from './components/ChatFilter';
 export { TextControl, TextControl as Control, TextInput, ActionControl, ActionInput, PasswordControl, PasswordInput, MFAControl, MFAInput, CheckboxControl, CheckboxInput, CheckboxInput as Checkbox, RadioControl, RadioInput, RadioInput as Radio, ToggleControl, ToggleInput, ToggleInput as Toggle, Root, Submit, Message, ErrorMessage, HelpMessage, ValidityState, Field, InlineField, Label, EditInPlace, } from './components/Form';
 export * as Form from './components/Form';
 /**

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA;;GAEG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EACL,OAAO,EACP,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,GACH,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EACL,WAAW,EAEX,WAAW,IAAI,OAAO,EACtB,SAAS,EACT,aAAa,EACb,WAAW,EACX,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EAEb,aAAa,IAAI,QAAQ,EACzB,YAAY,EACZ,UAAU,EAEV,UAAU,IAAI,KAAK,EACnB,aAAa,EACb,WAAW,EAEX,WAAW,IAAI,MAAM,EACrB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,YAAY,EACZ,WAAW,EACX,aAAa,EACb,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,IAAI,MAAM,mBAAmB,CAAC;AAE1C;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA;;GAEG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EACL,OAAO,EACP,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,GACH,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EACL,WAAW,EAEX,WAAW,IAAI,OAAO,EACtB,SAAS,EACT,aAAa,EACb,WAAW,EACX,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EAEb,aAAa,IAAI,QAAQ,EACzB,YAAY,EACZ,UAAU,EAEV,UAAU,IAAI,KAAK,EACnB,aAAa,EACb,WAAW,EAEX,WAAW,IAAI,MAAM,EACrB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,YAAY,EACZ,WAAW,EACX,aAAa,EACb,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,IAAI,MAAM,mBAAmB,CAAC;AAE1C;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,qBAAqB,CAAC"}

package/dist/index.js

@@ -33,6 +33,7 @@ import { InlineSpinner } from "./components/InlineSpinner/InlineSpinner.js";
 import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
 import { VisualList } from "./components/VisualList/VisualList.js";
 import { VisualListItem } from "./components/VisualList/VisualListItem.js";
+import { ChatFilter } from "./components/ChatFilter/ChatFilter.js";
 import { TextControl, TextControl as TextControl2, TextInput } from "./components/Form/Controls/Text/Text.js";
 import { ActionControl, ActionInput } from "./components/Form/Controls/Action/Action.js";
 import { PasswordControl, PasswordInput } from "./components/Form/Controls/Password/Password.js";
@@ -59,6 +60,7 @@ export {
   Body,
   Breadcrumb,
   Button,
+  ChatFilter,
   CheckboxInput as Checkbox,
   CheckboxControl,
   CheckboxInput2 as CheckboxInput,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/style.css

@@ -594,7 +594,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._menu_eeuw6_8 {
+._menu_19sse_8 {
   border-radius: var(--cpd-space-3x);
   background: var(--cpd-color-bg-canvas-default);
 
@@ -616,56 +616,67 @@ Please see LICENSE files in the repository root for full details.
   --cpd-separator-inset: var(--cpd-space-4x);
 }
 
-@keyframes _slide-in_eeuw6_1 {
+@keyframes _slide-in_19sse_1 {
   from {
     opacity: 0;
     transform: translate(0, var(--cpd-space-3x));
   }
 }
 
-@keyframes _slide-out_eeuw6_1 {
+@keyframes _slide-out_19sse_1 {
   to {
     opacity: 0;
     transform: translate(0, var(--cpd-space-2x));
   }
 }
 
-._menu_eeuw6_8[data-state="open"] {
-  animation: _slide-in_eeuw6_1 180ms;
+._menu_19sse_8[data-state="open"] {
+  animation: _slide-in_19sse_1 180ms;
 }
 
-._menu_eeuw6_8[data-state="closed"] {
-  animation: _slide-out_eeuw6_1 110ms;
+._menu_19sse_8[data-state="closed"] {
+  animation: _slide-out_19sse_1 110ms;
 }
 
-@keyframes _fade-in_eeuw6_1 {
+@keyframes _fade-in_19sse_1 {
   from {
     opacity: 0;
   }
 }
 
-@keyframes _fade-out_eeuw6_1 {
+@keyframes _fade-out_19sse_1 {
   to {
     opacity: 0;
   }
 }
 
 @media (prefers-reduced-motion) {
-  ._menu_eeuw6_8[data-state="open"] {
-    animation-name: _fade-in_eeuw6_1;
+  ._menu_19sse_8[data-state="open"] {
+    animation-name: _fade-in_19sse_1;
   }
 
-  ._menu_eeuw6_8[data-state="closed"] {
-    animation-name: _fade-out_eeuw6_1;
+  ._menu_19sse_8[data-state="closed"] {
+    animation-name: _fade-out_19sse_1;
   }
 }
 
-._title_eeuw6_74 {
+._title_19sse_74 {
+  /** Override MenuTitle margin top **/
+  margin-block-start: 0 !important;
+}
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+._menu-title_1sgvx_8 {
   color: var(--cpd-color-text-secondary);
   padding-inline: var(--cpd-space-4x);
   padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));
   border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
-  margin-block: 0 var(--cpd-space-2x);
+  margin-block: var(--cpd-space-2x);
 }
 /*
 Copyright 2023 New Vector Ltd.
@@ -2582,3 +2593,36 @@ Please see LICENSE files in the repository root for full details.
 ._visual-list-item-icon-destructive_1ma3e_26 {
   color: var(--cpd-color-icon-critical-primary);
 }
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+._chat-filter_5qdp0_8 {
+  font: var(--cpd-font-body-sm-medium);
+  color: var(--cpd-color-text-primary);
+  background-color: transparent;
+  border: var(--cpd-border-width-1) solid
+    var(--cpd-color-border-interactive-secondary);
+  border-radius: 99px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cpd-space-1x) var(--cpd-space-2x);
+}
+
+@media (hover) {
+  ._chat-filter_5qdp0_8:hover {
+    border-color: var(--cpd-color-border-interactive-primary);
+    background: var(--cpd-color-bg-subtle-primary);
+  }
+}
+
+._chat-filter_5qdp0_8[aria-selected="true"] {
+  border-color: var(--cpd-color-bg-action-primary-rest);
+  background: var(--cpd-color-bg-action-primary-rest);
+  color: var(--cpd-color-text-on-solid-primary);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "7.6.3",
+  "version": "7.6.4",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/ChatFilter/ChatFilter.module.css

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.chat-filter {
+  font: var(--cpd-font-body-sm-medium);
+  color: var(--cpd-color-text-primary);
+  background-color: transparent;
+  border: var(--cpd-border-width-1) solid
+    var(--cpd-color-border-interactive-secondary);
+  border-radius: 99px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cpd-space-1x) var(--cpd-space-2x);
+}
+
+@media (hover) {
+  .chat-filter:hover {
+    border-color: var(--cpd-color-border-interactive-primary);
+    background: var(--cpd-color-bg-subtle-primary);
+  }
+}
+
+.chat-filter[aria-selected="true"] {
+  border-color: var(--cpd-color-bg-action-primary-rest);
+  background: var(--cpd-color-bg-action-primary-rest);
+  color: var(--cpd-color-text-on-solid-primary);
+}

package/src/components/ChatFilter/ChatFilter.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { ForwardedRef, forwardRef } from "react";
+import {
+  UnstyledButton,
+  UnstyledButtonPropsFor,
+} from "../Button/UnstyledButton";
+import styles from "./ChatFilter.module.css";
+
+type ChatFilterProps = Omit<UnstyledButtonPropsFor<"button">, "disabled"> & {
+  /**
+   * Whether the filter is selected.
+   */
+  selected?: boolean;
+};
+
+/**
+ * A chat filter button.
+ */
+export const ChatFilter = forwardRef(function ChatFilter(
+  { children, selected, ...props }: ChatFilterProps,
+  ref: ForwardedRef<HTMLButtonElement>,
+): React.ReactElement {
+  return (
+    <UnstyledButton
+      {...props}
+      className={styles["chat-filter"]}
+      aria-selected={selected}
+      as="button"
+      ref={ref}
+      tabIndex={0}
+    >
+      {children}
+    </UnstyledButton>
+  );
+});

package/src/components/ChatFilter/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export { ChatFilter } from "./ChatFilter";

package/src/components/Menu/FloatingMenu.module.css

@@ -72,9 +72,6 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .title {
-  color: var(--cpd-color-text-secondary);
-  padding-inline: var(--cpd-space-4x);
-  padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));
-  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
-  margin-block: 0 var(--cpd-space-2x);
+  /** Override MenuTitle margin top **/
+  margin-block-start: 0 !important;
 }

package/src/components/Menu/FloatingMenu.tsx

@@ -13,18 +13,7 @@ import React, {
   useId,
 } from "react";
 import styles from "./FloatingMenu.module.css";
-import { Text } from "../Typography/Text";
-
-interface TitleProps {
-  title: string;
-  id: string;
-}
-
-const MenuTitle: React.FC<TitleProps> = ({ title, id }) => (
-  <Text as="h3" id={id} className={styles.title} size="sm" weight="semibold">
-    {title}
-  </Text>
-);
+import { MenuTitle } from "./MenuTitle.tsx";
 
 interface Props extends ComponentPropsWithoutRef<"div"> {
   /**
@@ -62,7 +51,9 @@ export const FloatingMenu = forwardRef<HTMLDivElement, Props>(
         className={classnames(className, styles.menu)}
         {...props}
       >
-        {showTitle && <MenuTitle title={title} id={titleId} />}
+        {showTitle && (
+          <MenuTitle className={styles.title} title={title} id={titleId} />
+        )}
         {children}
       </div>
     );

package/src/components/Menu/MenuTitle.module.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.menu-title {
+  color: var(--cpd-color-text-secondary);
+  padding-inline: var(--cpd-space-4x);
+  padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));
+  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+  margin-block: var(--cpd-space-2x);
+}

package/src/components/Menu/MenuTitle.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { Text } from "../Typography/Text.tsx";
+import styles from "./MenuTitle.module.css";
+import classnames from "classnames";
+
+interface MenuTitleProps {
+  /**
+   * The title of the menu.
+   */
+  title: string;
+  /**
+   * The id of the menu title.
+   */
+  id?: string;
+  /**
+   * The CSS class.
+   */
+  className?: string;
+}
+
+export const MenuTitle: React.FC<MenuTitleProps> = ({
+  title,
+  id,
+  className,
+}) => {
+  const classes = classnames(styles["menu-title"], className);
+
+  return (
+    <Text as="h3" id={id} className={classes} size="sm" weight="semibold">
+      {title}
+    </Text>
+  );
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -178,7 +178,12 @@ const TooltipAnchor: FC<TooltipAnchorProps> = ({
     if (!isValidElement(children)) return;
 
     if (isTriggerInteractive) {
-      const props = context.getReferenceProps({ ref });
+      const props = context.getReferenceProps({
+        // To support React 18, we need to explicitly pass the children's props. See  https://github.com/element-hq/compound/issues/333
+        // In React 19, this is not necessary. `getReferenceProps` is able to get the props directly from the ref.
+        ...(typeof children.props === "object" ? children.props : {}),
+        ref,
+      });
       return cloneElement(children, props);
     } else {
       // For a non-interactive trigger, we want most of the props to go on the

package/src/index.ts

@@ -46,6 +46,7 @@ export { Dropdown } from "./components/Dropdown";
 export { InlineSpinner } from "./components/InlineSpinner";
 export { Breadcrumb } from "./components/Breadcrumb";
 export { VisualList, VisualListItem } from "./components/VisualList";
+export { ChatFilter } from "./components/ChatFilter";
 
 export {
   TextControl,