@anchrd/intel-ui 0.25.0 → 0.29.0

package/src/title-row/title-row.tsx

@@ -1,7 +1,55 @@
-import type * as React from "react";
+import {
+  createContext,
+  type HTMLAttributes,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ResourceAccessSummary } from "@/access-summary/access-summary.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils";
 import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu.tsx";
 
+const TitleRowScrollContext = createContext<{
+  scrolled: boolean;
+  setScrolled(scrolled: boolean): void;
+} | null>(null);
+
+export function TitleRowFrame({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  const [scrolled, setScrolled] = useState(false);
+  const value = useMemo(() => ({ scrolled, setScrolled }), [scrolled]);
+  return (
+    <TitleRowScrollContext.Provider value={value}>
+      <div className={className} {...props} />
+    </TitleRowScrollContext.Provider>
+  );
+}
+
+export function TitleRowScrollArea({
+  className,
+  onScroll,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  const scroll = useContext(TitleRowScrollContext);
+  const setScrolled = scroll?.setScrolled;
+  useEffect(() => () => setScrolled?.(false), [setScrolled]);
+  return (
+    <div
+      className={className}
+      onScroll={(event) => {
+        scroll?.setScrolled(event.currentTarget.scrollTop > 0);
+        onScroll?.(event);
+      }}
+      {...props}
+    />
+  );
+}
+
 /**
  * The one line an open thing gets: its name on the left, everything that acts on it on the right
  * (#53).
@@ -26,10 +74,23 @@ export function TitleRow({
   title: string;
   description?: string | null;
   target: ResourceTarget;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }) {
+  const scroll = useContext(TitleRowScrollContext);
+  const setScrolled = scroll?.setScrolled;
+  const targetId = target.type === "flow" ? target.flow.id : target.node.id;
+  useEffect(() => {
+    void targetId;
+    setScrolled?.(false);
+  }, [setScrolled, targetId]);
   return (
-    <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
+    <div
+      data-scrolled={scroll?.scrolled || undefined}
+      className={cn(
+        "relative z-10 flex shrink-0 items-start justify-between gap-5 px-6 py-4 transition-shadow",
+        scroll?.scrolled && "shadow-[inset_0_-1px_0_var(--border)]",
+      )}
+    >
       <div className="flex min-w-0 items-center gap-3">
         <div className="min-w-0">
           <div className="flex min-w-0 flex-wrap items-baseline gap-x-3">
@@ -39,7 +100,7 @@ export function TitleRow({
             ) : null}
             <span data-slot="title-meta" className="text-sm text-muted-foreground" />
           </div>
-          {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+          {description ? <DescriptionDisclosure key={targetId} description={description} /> : null}
         </div>
       </div>
       {/* ⚠️ Document order is tab order here — nothing carries a `tabIndex`. The menu is therefore
@@ -53,3 +114,62 @@ export function TitleRow({
     </div>
   );
 }
+
+function DescriptionDisclosure({ description }: { description: string }) {
+  const i18n = useI18n();
+  const descriptionId = useId();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLSpanElement>(null);
+  const [clipped, setClipped] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const measure = measureRef.current;
+    if (!container || !measure) return;
+
+    const update = () => setClipped(measure.scrollWidth > container.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(container);
+    observer.observe(measure);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      data-description-container="true"
+      className={cn(
+        "relative mt-1 min-w-0 text-sm text-muted-foreground",
+        expanded && "flex flex-wrap items-baseline gap-x-1",
+      )}
+    >
+      <span
+        ref={measureRef}
+        data-description-measure="true"
+        aria-hidden="true"
+        className="pointer-events-none invisible absolute whitespace-nowrap"
+      >
+        {description}
+      </span>
+      <span id={descriptionId} className={cn(clipped && !expanded && "block truncate")}>
+        {description}
+      </span>
+      {clipped ? (
+        <button
+          type="button"
+          aria-controls={descriptionId}
+          aria-expanded={expanded}
+          onClick={() => setExpanded((current) => !current)}
+          className={cn(
+            "shrink-0 font-medium text-foreground outline-none hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-ring",
+            !expanded && "absolute bottom-0 right-0 bg-background pl-1",
+          )}
+        >
+          {i18n.t(expanded ? "title.descriptionLess" : "title.descriptionMore")}
+        </button>
+      ) : null}
+    </div>
+  );
+}