@vector-im/compound-web 7.6.3 → 7.7.0

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.7.0",
   "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/CheckboxMenuItem.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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, { ComponentProps, forwardRef, useCallback, useId } from "react";
+import { MenuItem } from "./MenuItem";
+import { CheckboxInput } from "../Form";
+
+type Props = Pick<
+  ComponentProps<typeof MenuItem>,
+  "className" | "label" | "onSelect" | "disabled"
+> & {
+  /**
+   * Whether the checkbox is checked.
+   */
+  checked: boolean;
+};
+
+/**
+ * A menu item with a checkbox control.
+ * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+ */
+export const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(
+  function CheckboxMenuItem(
+    { className, label, onSelect, checked, disabled },
+    ref,
+  ) {
+    const toggleId = useId();
+    // The checkbox is controlled and we intend to ignore its events. We do need
+    // to at least set onChange though to make React happy.
+    const onChange = useCallback(() => {}, []);
+
+    // <label> elements are not allowed to have a role like menuitemcheckbox, so
+    // we must instead use a plain <div> for the menu item and use aria-checked
+    // etc. to communicate its state.
+    return (
+      <MenuItem
+        as="div"
+        role="menuitemcheckbox"
+        aria-checked={checked}
+        className={className}
+        label={label}
+        onSelect={onSelect}
+        disabled={disabled}
+        Icon={
+          <CheckboxInput
+            id={toggleId}
+            ref={ref}
+            // This is purely cosmetic; really the whole MenuItem is the toggle.
+            aria-hidden
+            checked={checked}
+            disabled={disabled}
+            onChange={onChange}
+          />
+        }
+      />
+    );
+  },
+);

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/MenuItem.tsx

@@ -55,13 +55,22 @@ type Props<C extends MenuItemElement> = {
    */
   // This prop is required because it's rare to not want a selection handler
   onSelect: ((e: Event) => void) | null;
+  /**
+   * Event callback for when the item is clicked.
+   * @param e
+   */
+  onClick?: (e: Event) => void;
   /**
    * The color variant of the menu item.
    * @default primary
    */
   kind?: "primary" | "critical";
   disabled?: boolean;
-} & Omit<ComponentPropsWithoutRef<C>, "onSelect">;
+  /**
+   * Whether to hide the chevron navigation hint.
+   */
+  hideChevron?: boolean;
+} & Omit<ComponentPropsWithoutRef<C>, "onSelect" | "onClick">;
 
 /**
  * An item within a menu, acting either as a navigation button, or simply a
@@ -79,6 +88,7 @@ export const MenuItem = <C extends MenuItemElement = "button">({
   children,
   onClick: onClickProp,
   disabled,
+  hideChevron,
   ...props
 }: Props<C>): React.ReactElement => {
   const Component = as ?? ("button" as ElementType);
@@ -143,7 +153,7 @@ export const MenuItem = <C extends MenuItemElement = "button">({
       )}
       {/* We use CSS to swap between this navigation hint and the provided
       children on hover - see the styles module. */}
-      {(Component === "button" || Component === "a") && (
+      {!hideChevron && (Component === "button" || Component === "a") && (
         <ChevronRightIcon
           width={8}
           height={24}

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/Menu/ToggleMenuItem.tsx

@@ -11,7 +11,7 @@ import { ToggleInput } from "../Form/Controls/Toggle";
 
 type Props = Pick<
   ComponentProps<typeof MenuItem>,
-  "className" | "Icon" | "label" | "onSelect" | "disabled"
+  "className" | "Icon" | "label" | "onSelect" | "disabled" | "onClick"
 > & {
   /**
    * Whether the toggle is checked.
@@ -25,7 +25,7 @@ type Props = Pick<
  */
 export const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(
   function ToggleMenuItem(
-    { className, Icon, label, onSelect, checked, disabled },
+    { className, Icon, label, onSelect, checked, disabled, onClick },
     ref,
   ) {
     const toggleId = useId();
@@ -46,6 +46,7 @@ export const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(
         label={label}
         onSelect={onSelect}
         disabled={disabled}
+        onClick={onClick}
       >
         <ToggleInput
           id={toggleId}

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,