@sentry/junior-dashboard 0.260.0 → 0.262.0

package/src/client/components/BottomSheet.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+import { Sheet, SheetBody, SheetContent } from "./Sheet";
+
+/** Show details in a Base UI sheet with a swipe handle and no header controls. */
+export function BottomSheet(props: {
+  children: ReactNode;
+  label: string;
+  onClose(): void;
+}) {
+  return (
+    <Sheet onClose={props.onClose} side="bottom">
+      <SheetContent label={props.label} side="bottom">
+        <div className="rounded-t-2xl px-4 pt-1 md:px-5">
+          <div
+            aria-hidden="true"
+            data-drawer-handle=""
+            className="flex touch-none cursor-grab justify-center py-3 active:cursor-grabbing"
+          >
+            <span className="h-1 w-9 rounded-full bg-dashboard-border-interactive" />
+          </div>
+        </div>
+        <SheetBody
+          data-base-ui-swipe-ignore=""
+          className="min-h-0 overflow-y-auto overscroll-contain"
+        >
+          {props.children}
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/client/components/Button.tsx

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes } from "react";
+import type { ButtonHTMLAttributes, Ref } from "react";
 import { Link, type LinkProps } from "react-router";
 
 import { cn } from "../styles";
@@ -8,6 +8,7 @@ type ButtonTone = "default" | "danger" | "primary";
 type ToggleButtonVariant = "pill" | "segment" | "text";
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  ref?: Ref<HTMLButtonElement>;
   size?: ButtonSize;
   tone?: ButtonTone;
 };

package/src/client/components/Drawer.tsx

@@ -1,118 +1,29 @@
 import { X } from "lucide-react";
-import { useEffect, useRef, type ReactNode } from "react";
+import { useRef, type ReactNode } from "react";
 
-import {
-  acquireBodyScrollLock,
-  releaseBodyScrollLock,
-} from "../bodyScrollLock";
 import { cn } from "../styles";
 import { Button } from "./Button";
+import { Sheet, SheetBody, SheetClose, SheetContent } from "./Sheet";
 
-const focusableSelector = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled]):not([type='hidden'])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "summary",
-  "[tabindex]:not([tabindex='-1'])",
-].join(",");
-
-/** Render an accessible modal drawer and own its focus and scroll lifecycle. */
+/** Render a side drawer with shared modal focus and dismissal behavior. */
 export function Drawer(props: {
   actions?: ReactNode;
   children: ReactNode;
   closeLabel: string;
-  dismissLabel: string;
   header: ReactNode;
   onClose(): void;
   openKey: string;
   titleId: string;
   width?: "default" | "wide" | "narrow";
 }) {
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const onCloseRef = useRef(props.onClose);
-  const previousFocusRef = useRef<HTMLElement | undefined>(undefined);
-  onCloseRef.current = props.onClose;
-
-  useEffect(() => {
-    previousFocusRef.current =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : undefined;
-    acquireBodyScrollLock();
-    const focusFrame = requestAnimationFrame(() => {
-      dialogRef.current
-        ?.querySelector<HTMLElement>("[data-drawer-close]")
-        ?.focus();
-    });
-    const onKeyDown = (event: KeyboardEvent) => {
-      // An event detail drawer can open above a child conversation drawer.
-      // Only the last mounted drawer owns Escape and the focus trap.
-      const drawers = document.querySelectorAll("[data-dashboard-drawer]");
-      if (drawers[drawers.length - 1] !== dialogRef.current) return;
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onCloseRef.current();
-        return;
-      }
-      if (event.key !== "Tab") return;
-
-      const dialog = dialogRef.current;
-      const focusable = Array.from(
-        dialog?.querySelectorAll<HTMLElement>(focusableSelector) ?? [],
-      ).filter(
-        (element) =>
-          element.tabIndex >= 0 && element.getClientRects().length > 0,
-      );
-      const first = focusable.at(0);
-      const last = focusable.at(-1);
-      if (!dialog || !first || !last) {
-        event.preventDefault();
-        return;
-      }
-      const active = document.activeElement;
-      if (event.shiftKey && (active === first || !dialog.contains(active))) {
-        event.preventDefault();
-        last.focus();
-      } else if (
-        !event.shiftKey &&
-        (active === last || !dialog.contains(active))
-      ) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => {
-      cancelAnimationFrame(focusFrame);
-      window.removeEventListener("keydown", onKeyDown);
-      releaseBodyScrollLock();
-      const previousFocus = previousFocusRef.current;
-      previousFocusRef.current = undefined;
-      if (previousFocus?.isConnected) previousFocus.focus();
-    };
-  }, [props.openKey]);
-
+  const closeRef = useRef<HTMLButtonElement>(null);
   return (
-    <div
-      aria-labelledby={props.titleId}
-      aria-modal="true"
-      data-dashboard-drawer=""
-      className="fixed inset-0 z-50"
-      ref={dialogRef}
-      role="dialog"
-    >
-      <button
-        aria-label={props.dismissLabel}
-        className="absolute inset-0 cursor-default bg-dashboard-overlay"
-        onClick={props.onClose}
-        tabIndex={-1}
-        type="button"
-      />
-      <aside
+    <Sheet key={props.openKey} onClose={props.onClose} side="right">
+      <SheetContent
+        initialFocusRef={closeRef}
+        titleId={props.titleId}
+        side="right"
         className={cn(
-          "absolute top-0 right-0 grid h-full w-full grid-rows-[auto_minmax(0,1fr)] bg-dashboard-bg-elevated shadow-[-20px_0_60px_rgba(0,0,0,0.45)] md:border-l md:border-dashboard-border-strong",
           props.width === "wide"
             ? "md:w-[min(760px,94vw)]"
             : props.width === "narrow"
@@ -124,21 +35,24 @@ export function Drawer(props: {
           <div className="min-w-0">{props.header}</div>
           <div className="flex items-start gap-1.5">
             {props.actions}
-            <Button
-              aria-label={props.closeLabel}
-              data-drawer-close
-              onClick={props.onClose}
-              size="icon"
-              title="Close"
+            <SheetClose
+              render={
+                <Button
+                  ref={closeRef}
+                  aria-label={props.closeLabel}
+                  size="icon"
+                  title="Close"
+                />
+              }
             >
               <X aria-hidden="true" size={15} strokeWidth={2.25} />
-            </Button>
+            </SheetClose>
           </div>
         </header>
-        <div className="min-h-0 overflow-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-5">
+        <SheetBody className="min-h-0 overflow-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-5">
           {props.children}
-        </div>
-      </aside>
-    </div>
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
   );
 }

package/src/client/components/README.md

@@ -73,14 +73,21 @@ token so each theme can redefine it.
   and `SearchInput`. Use `TextInput size="comfortable"` for larger mobile
   controls. Use `TextArea prose` for instructions, not code. `Field error`
   renders an error at `<htmlFor>-error`. The owning control must set
-  `aria-invalid` and `aria-describedby`. `Select` matches native text controls.
+  `aria-invalid` and `aria-describedby`. `Select` owns the native control and its
+  inset arrow. Use its `filter` and `sort` variants for compact controls.
 - **Status.** Use `StatusDot` for dense table or list markers. Use `StatusChip`
   when the label must stay visible. `StatusChip` is a small dot and
   sentence-case text, with no border or fill. It is not a control.
 - **Messages.** Use `Notice` for compact transient messages and `FormNotice`
   for wrapping form recovery text.
-- **Overlays.** `Drawer` owns dismissal, focus trapping, focus return, scroll
-  locking, and panel layout. Context panels use it, not a separate modal.
+- **Overlays.** `Sheet` is a local adaptation of shadcn/ui's Base UI Sheet.
+  It uses Base UI Drawer for focus, dismissal, and native swipe support. The
+  app's shared scroll lock keeps it in sync with the mobile conversation shell.
+  `SheetContent` owns side placement, backdrop fade, and slide transitions.
+  `Drawer` adds a visible header and close control. `BottomSheet` adds a swipe
+  handle and keeps content scrolling separate from gestures. Both skip motion
+  when reduced motion is set. Docked conversation details use a non-modal aside
+  so the chat stays usable. The copied component's license is in `Sheet.LICENSE`.
   `Tooltip` and `IconButtonTooltip` own hover text.
 - **Identity.** `ActorAvatar`, `ParticipantAvatarStack`, and `ObjectIcon`.
   `ObjectIcon` owns native Ticket, Code change, Automation, Deployment, and
@@ -102,7 +109,10 @@ levels stay distinct.
   the row width while their labels fit. Rows that do not fit scroll sideways.
 - **Panel switches** use `SegmentedTabs`, which draws a pill track. Pass the
   selected value, items, change handler, and panel content. It owns tab and
-  panel labels and keyboard focus.
+  panel labels and keyboard focus. Pass `scroll` to keep the tabs fixed while
+  the panel content scrolls. That mode fills its frame and owns the content
+  padding, so its scrollbar stays at the frame edge. `BottomSheet` content owns
+  its own padding.
 
 Keep collection filters in `FilterTabList`.
 

package/src/client/components/SegmentedTabs.tsx

@@ -12,7 +12,7 @@ const segmentedTabsInsetClass = "gap-1 p-1";
 /** Style one tab or link in the segmented pill track. */
 export function segmentedTabClass(selected: boolean): string {
   return cn(
-    "min-h-9 cursor-pointer rounded-md border-0 px-3 py-2 font-sans text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+    "min-h-9 cursor-pointer rounded-md border-0 px-1.5 py-2 font-sans text-xs font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
     selected
       ? "bg-dashboard-fill-strong text-dashboard-text"
       : "bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-faint hover:text-dashboard-text",
@@ -23,6 +23,8 @@ export function segmentedTabClass(selected: boolean): string {
 export function SegmentedTabs<const Value extends string>(props: {
   children: ReactNode;
   label: string;
+  /** Fill the frame with fixed tabs and padded, scrolling content. */
+  scroll?: boolean;
   /** `count` is the number of entries in the panel. Zero and unknown counts are hidden. */
   items: readonly { count?: number; label: string; value: Value }[];
   onChange(value: NoInfer<Value>): void;
@@ -31,10 +33,22 @@ export function SegmentedTabs<const Value extends string>(props: {
   const id = useId();
 
   return (
-    <div className="grid min-w-0 gap-4">
+    <div
+      className={cn(
+        "grid min-w-0",
+        props.scroll
+          ? "h-full min-h-0 grid-rows-[auto_minmax(0,1fr)]"
+          : "gap-4",
+      )}
+    >
       <div
         aria-label={props.label}
-        className={cn("flex", segmentedTabsFrameClass, segmentedTabsInsetClass)}
+        className={cn(
+          "flex min-w-0",
+          segmentedTabsFrameClass,
+          segmentedTabsInsetClass,
+          props.scroll && "m-4",
+        )}
         role="tablist"
       >
         {props.items.map((item, index) => (
@@ -88,7 +102,12 @@ export function SegmentedTabs<const Value extends string>(props: {
       </div>
       <div
         aria-labelledby={`${id}-${props.value}`}
-        className="min-w-0 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+        className={cn(
+          "min-w-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+          props.scroll
+            ? "min-h-0 overflow-y-auto overscroll-contain px-4 pb-[max(1rem,env(safe-area-inset-bottom))] focus-visible:-outline-offset-2"
+            : "rounded-md",
+        )}
         id={`${id}-panel`}
         role="tabpanel"
         tabIndex={0}

package/src/client/components/Select.tsx

@@ -1,18 +1,52 @@
 import type { SelectHTMLAttributes } from "react";
+import { ChevronDown } from "lucide-react";
 import { cn } from "../styles";
 
-/** Match native form choices to the dashboard text controls. */
+const selectClassName = {
+  form: "min-h-11 rounded-md border border-dashboard-border-emphasis bg-dashboard-ink pl-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 sm:min-h-10 sm:text-sm",
+  filter:
+    "h-9 rounded-lg border border-dashboard-border-emphasis bg-dashboard-control pl-2 text-sm text-dashboard-text transition-colors hover:border-dashboard-border-interactive focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25",
+  sort: "h-full bg-dashboard-control pl-2 font-sans text-xs text-dashboard-text-muted outline-none",
+};
+
+/** Keep native choices and position their arrow consistently across the dashboard. */
 export function Select({
   className,
+  variant = "form",
   ...props
-}: SelectHTMLAttributes<HTMLSelectElement>) {
+}: SelectHTMLAttributes<HTMLSelectElement> & {
+  variant?: keyof typeof selectClassName;
+}) {
+  const showArrow = !props.multiple && (props.size ?? 1) <= 1;
+
   return (
-    <select
-      {...props}
+    <span
       className={cn(
-        "block min-h-11 w-full min-w-0 rounded-md border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-10 sm:text-sm",
-        className,
+        "relative block w-full min-w-0",
+        variant === "sort" && "h-full",
       )}
-    />
+    >
+      <select
+        {...props}
+        className={cn(
+          "block w-full min-w-0 disabled:cursor-not-allowed disabled:opacity-60 [color-scheme:var(--dashboard-color-scheme,dark)]",
+          selectClassName[variant],
+          showArrow
+            ? "appearance-none pr-9 forced-colors:appearance-auto"
+            : "pr-3",
+          className,
+        )}
+      />
+      {showArrow ? (
+        <ChevronDown
+          aria-hidden="true"
+          className={cn(
+            "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-dashboard-text-muted forced-colors:hidden",
+            props.disabled && "opacity-60",
+          )}
+          size={16}
+        />
+      ) : null}
+    </span>
   );
 }

package/src/client/components/Sheet.LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/client/components/Sheet.tsx

@@ -0,0 +1,141 @@
+// Adapted from shadcn/ui's Base UI Sheet. Drawer adds native swipe support.
+// https://ui.shadcn.com/docs/components/base/sheet
+import { Drawer as SheetPrimitive } from "@base-ui/react/drawer";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ReactNode,
+  type RefObject,
+} from "react";
+
+import {
+  acquireBodyScrollLock,
+  releaseBodyScrollLock,
+} from "../bodyScrollLock";
+import { cn } from "../styles";
+
+const SheetContext = createContext<{
+  closingRef: RefObject<boolean>;
+  popupRef: RefObject<HTMLDivElement | null>;
+  topmost: boolean;
+} | null>(null);
+
+// Separate roots can overlap when a resize mounts a sheet below an open drawer.
+// Only the last modal in document order may trap focus or handle dismissal.
+function subscribeToSheets(onChange: () => void) {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.body, { childList: true, subtree: true });
+  return () => observer.disconnect();
+}
+
+/** Keep modal state until Base UI finishes its close transition. */
+export function Sheet(props: {
+  children: ReactNode;
+  onClose(): void;
+  side: "right" | "bottom";
+}) {
+  const [open, setOpen] = useState(false);
+  const closingRef = useRef(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const topmost = useSyncExternalStore(
+    subscribeToSheets,
+    () => {
+      const modals = document.querySelectorAll("[data-dashboard-modal]");
+      const last = modals[modals.length - 1];
+      return popupRef.current ? last === popupRef.current : !last;
+    },
+    () => true,
+  );
+  useEffect(() => {
+    // The mobile conversation shell uses this same document scroll lock.
+    acquireBodyScrollLock();
+    setOpen(true);
+    return releaseBodyScrollLock;
+  }, []);
+
+  return (
+    <SheetContext value={{ closingRef, popupRef, topmost }}>
+      <SheetPrimitive.Root
+        open={open}
+        modal={topmost ? "trap-focus" : false}
+        disablePointerDismissal={!topmost}
+        swipeDirection={props.side === "bottom" ? "down" : "right"}
+        onOpenChange={(open, details) => {
+          if (!open && !topmost) {
+            details.cancel();
+            return;
+          }
+          closingRef.current = !open;
+          setOpen(open);
+        }}
+        onOpenChangeComplete={(open) => {
+          if (!open && closingRef.current) props.onClose();
+        }}
+      >
+        {props.children}
+      </SheetPrimitive.Root>
+    </SheetContext>
+  );
+}
+
+/** Close the enclosing sheet through its transition and focus lifecycle. */
+export const SheetClose = SheetPrimitive.Close;
+
+/** Render sheet chrome, a fading backdrop, and Base UI's focus boundary. */
+export function SheetContent(
+  props: {
+    children: ReactNode;
+    className?: string;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    side: "right" | "bottom";
+  } & ({ label: string; titleId?: never } | { label?: never; titleId: string }),
+) {
+  const sheet = useContext(SheetContext);
+  const popupRef = sheet?.popupRef;
+  const portalRef = useRef<HTMLDivElement>(null);
+  return (
+    <>
+      <div ref={portalRef} className="contents" />
+      <SheetPrimitive.Portal container={portalRef}>
+        <SheetPrimitive.Backdrop className="fixed inset-0 z-50 bg-dashboard-overlay opacity-[calc(1-var(--drawer-swipe-progress,0))] transition-opacity duration-180 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:transition-none motion-reduce:transition-none" />
+        <SheetPrimitive.Viewport className="pointer-events-none fixed inset-0 z-50">
+          <SheetPrimitive.Popup
+            ref={popupRef}
+            aria-modal={sheet?.topmost ? true : undefined}
+            aria-label={props.label}
+            aria-labelledby={props.titleId}
+            data-dashboard-modal=""
+            data-base-ui-swipe-ignore={props.side === "right" ? "" : undefined}
+            finalFocus={() =>
+              Boolean(sheet?.closingRef.current && sheet.topmost)
+            }
+            initialFocus={() => {
+              // A resize can mount a sheet beneath an existing event dialog.
+              const modals = document.querySelectorAll(
+                "[data-dashboard-modal]",
+              );
+              if (modals[modals.length - 1] !== popupRef?.current) return false;
+              return props.initialFocusRef?.current ?? true;
+            }}
+            className={cn(
+              "pointer-events-auto grid min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] bg-dashboard-bg-elevated outline-none transition-[opacity,transform] duration-180 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:transition-none motion-reduce:transition-none",
+              props.side === "bottom"
+                ? "absolute inset-x-0 bottom-0 mx-auto h-[85dvh] max-h-full w-full max-w-2xl [transform:translateY(var(--drawer-swipe-movement-y,0px))] rounded-t-2xl border border-b-0 border-dashboard-border-strong shadow-[0_-12px_40px_rgba(0,0,0,0.25)] data-[ending-style]:[transform:translateY(100%)] data-[starting-style]:[transform:translateY(2.5rem)]"
+                : "absolute right-0 top-0 h-full w-full shadow-[-12px_0_40px_rgba(0,0,0,0.25)] data-[ending-style]:[transform:translateX(2.5rem)] data-[starting-style]:[transform:translateX(2.5rem)] md:border-l md:border-dashboard-border-strong",
+              props.className,
+            )}
+          >
+            {props.children}
+          </SheetPrimitive.Popup>
+        </SheetPrimitive.Viewport>
+      </SheetPrimitive.Portal>
+    </>
+  );
+}
+
+/** Keep text selection and scrolling separate from the swipe handle. */
+export const SheetBody = SheetPrimitive.Content;

package/src/client/components/controls/DirectorySortSelect.tsx

@@ -1,9 +1,11 @@
+import { Select } from "../Select";
+
 export type DirectorySortOption = {
   label: string;
   value: string;
 };
 
-/** Render a native directory sort control with an explicit dark color scheme. */
+/** Keep directory sorting consistent with the dashboard's shared select. */
 export function DirectorySortSelect(props: {
   ariaLabel: string;
   onChange(value: string): void;
@@ -15,9 +17,9 @@ export function DirectorySortSelect(props: {
       <span className="flex h-full items-center border-r border-dashboard-border-subtle px-2 font-sans font-medium text-xs text-dashboard-text-muted">
         Sort
       </span>
-      <select
+      <Select
         aria-label={props.ariaLabel}
-        className="h-full min-w-0 bg-dashboard-control px-2 font-sans text-xs text-dashboard-text-muted outline-none [color-scheme:var(--dashboard-color-scheme,dark)]"
+        variant="sort"
         value={props.value}
         onChange={(event) => props.onChange(event.currentTarget.value)}
       >
@@ -30,7 +32,7 @@ export function DirectorySortSelect(props: {
             {option.label}
           </option>
         ))}
-      </select>
+      </Select>
     </label>
   );
 }