feat: hold alt to select texts in lists/tables

packages/components/src/components/Heading/Heading.tsx

@@ -7,6 +7,7 @@ import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
 import * as Aria from "react-aria-components";
 import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
+import { useAltKeySelectionProps } from "@/lib/hooks/useAltKeySelectionProps";
 
 export interface HeadingProps extends Aria.HeadingProps, FlowComponentProps {
   /** The font size of the heading. */
@@ -26,6 +27,8 @@ export const Heading = flowComponent("Heading", (props) => {
     ...rest
   } = props;
 
+  const altKeySelectionProps = useAltKeySelectionProps(props);
+
   const rootClassName = clsx(
     styles.heading,
     size && styles[size],
@@ -59,6 +62,7 @@ export const Heading = flowComponent("Heading", (props) => {
           level={level}
           className={rootClassName}
           {...rest}
+          {...altKeySelectionProps}
           ref={ref}
         >
           <span className={styles.headingText}>

packages/components/src/components/List/stories/Default.stories.tsx

@@ -71,7 +71,7 @@ const meta: Meta<typeof List> = {
             name="Typ"
             defaultSelected={["Domain"]}
           />
-          <DomainList.Search autoFocus autoSubmit />
+          <DomainList.Search autoSubmit />
           <DomainList.Sorting property="domain" name="A-Z" />
           <DomainList.Sorting property="domain" name="Z-A" direction="desc" />
           <DomainList.Sorting property="type" name="Typ" defaultEnabled />

packages/components/src/components/Message/Message.tsx

@@ -6,6 +6,7 @@ import type { PropsWithClassName } from "@/lib/types/props";
 import type { PropsContext } from "@/lib/propsContext";
 import { IconContextMenu } from "@/components/Icon/components/icons";
 import PropsContextProvider from "@/lib/propsContext/PropsContextProvider";
+import { useAltKeySelectionProps } from "@/lib/hooks/useAltKeySelectionProps";
 
 export interface MessageProps extends PropsWithChildren, PropsWithClassName {
   /** Determines the color of the message. @default "sender" */
@@ -24,6 +25,8 @@ export const Message: FC<MessageProps> = (props) => {
     className,
   );
 
+  const altKeySelectionProps = useAltKeySelectionProps(props);
+
   const propsContext: PropsContext = {
     Content: { className: styles.content },
     Header: {
@@ -52,7 +55,9 @@ export const Message: FC<MessageProps> = (props) => {
 
   return (
     <PropsContextProvider props={propsContext}>
-      <article className={rootClassName}>{children}</article>
+      <article className={rootClassName} {...altKeySelectionProps}>
+        {children}
+      </article>
     </PropsContextProvider>
   );
 };

packages/components/src/components/Text/Text.tsx

@@ -1,5 +1,4 @@
-import type { PropsWithChildren } from "react";
-import React from "react";
+import React, { type PropsWithChildren } from "react";
 import * as Aria from "react-aria-components";
 import type { PropsContext } from "@/lib/propsContext";
 import { ClearPropsContext, PropsContextProvider } from "@/lib/propsContext";
@@ -11,6 +10,7 @@ import { EmulatedBoldText } from "@/components/EmulatedBoldText";
 import { Wrap } from "@/components/Wrap";
 import clsx from "clsx";
 import styles from "./Text.module.scss";
+import { useAltKeySelectionProps } from "@/lib/hooks/useAltKeySelectionProps";
 
 export interface TextProps
   extends PropsWithChildren,
@@ -34,6 +34,11 @@ export const Text = flowComponent("Text", (props) => {
     ...rest
   } = props;
 
+  const commonProps = {
+    ref,
+    ...useAltKeySelectionProps(rest),
+  };
+
   const rootClassName = clsx(styles.text, color && styles[color], className);
 
   const textProps = { ...rest, className: rootClassName };
@@ -55,7 +60,7 @@ export const Text = flowComponent("Text", (props) => {
   if (!props.slot) {
     const Element = elementType;
     return (
-      <Element {...textProps} ref={ref}>
+      <Element {...commonProps} {...textProps}>
         {childrenElement}
       </Element>
     );
@@ -68,7 +73,7 @@ export const Text = flowComponent("Text", (props) => {
 
   return (
     <ClearPropsContext>
-      <Aria.Text {...textProps} elementType={elementType} ref={ref}>
+      <Aria.Text {...commonProps} {...textProps} elementType={elementType}>
         {childrenElement}
       </Aria.Text>
     </ClearPropsContext>

packages/components/src/lib/hooks/useAltKeySelectionProps.tsx

@@ -0,0 +1,68 @@
+import {
+  type CSSProperties,
+  type MouseEvent,
+  type MouseEventHandler,
+  type PointerEvent,
+  type PointerEventHandler,
+  useEffect,
+  useState,
+} from "react";
+
+export const useAltKeySelectionProps = (props: NonNullable<unknown>) => {
+  const styleFromProps =
+    typeof props === "object" &&
+    "style" in props &&
+    typeof props.style === "object"
+      ? (props.style as CSSProperties)
+      : {};
+
+  const [altKeyHolding, setAltKeyHolding] = useState(false);
+
+  const onKeyUp = (e: KeyboardEvent) => {
+    if (e.key === "Alt") {
+      setAltKeyHolding(false);
+    }
+  };
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Alt") {
+      setAltKeyHolding(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("keyup", onKeyUp);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keyup", onKeyUp);
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+
+  const handlePointerDown: PointerEventHandler = (e) => {
+    handlePointerOrMouseDown(e);
+  };
+  const handleMouseDown: MouseEventHandler = (e) => {
+    handlePointerOrMouseDown(e);
+  };
+  const handlePointerOrMouseDown = (e: MouseEvent | PointerEvent) => {
+    if (altKeyHolding) {
+      e.stopPropagation();
+    }
+  };
+  const selectionStyle = altKeyHolding
+    ? {
+        cursor: "text",
+      }
+    : {};
+
+  const style: CSSProperties = {
+    ...selectionStyle,
+    ...styleFromProps,
+  };
+
+  return {
+    style,
+    onPointerDown: handlePointerDown,
+    onMouseDown: handleMouseDown,
+  };
+};