Sidebar

1"use client";
2 
3import {
4  createContext,
5  useCallback,
6  useContext,
7  useEffect,
8  useMemo,
9  useState,
10} from "react";
11import { mergeProps } from "@base-ui/react/merge-props";
12import { useRender } from "@base-ui/react/use-render";
13import type * as React from "react";
14import { cn } from "@/lib/utils";
15import { selectionFocus } from "@/lib/recipes";
16import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
17 
18/* --------------------------- Context / hook --------------------------- */
19 
20interface SidebarContextValue {
21  /** Desktop (lg+) open/closed. */
22  open: boolean;
23  setOpen: (open: boolean) => void;
24  /** Mobile drawer open/closed. Tracked separately from desktop. */
25  openMobile: boolean;
26  setOpenMobile: (open: boolean) => void;
27  /** Toggles the appropriate state based on current viewport. */
28  toggle: () => void;
29  /** `left` (default) or `right`. */
30  side: "left" | "right";
31}
32 
33const SidebarContext = createContext<SidebarContextValue | null>(null);
34 
35function isEditableShortcutTarget(target: EventTarget | null): boolean {
36  if (!(target instanceof Element)) return false;
37  if (target.closest("input, textarea, select")) return true;
38  const contentEditable = target.closest("[contenteditable]");
39  return (
40    contentEditable !== null &&
41    contentEditable.getAttribute("contenteditable") !== "false"
42  );
43}
44 
45export function useSidebar(): SidebarContextValue {
46  const ctx = useContext(SidebarContext);
47  if (!ctx) {
48    throw new Error("useSidebar must be used within a SidebarProvider");
49  }
50  return ctx;
51}
52 
53export interface SidebarProviderProps {
54  /** Initial open state. Default true (visible on desktop). */
55  defaultOpen?: boolean;
56  /** Controlled open state (desktop). */
57  open?: boolean;
58  /** Called when the desktop open state changes. */
59  onOpenChange?: (open: boolean) => void;
60  side?: "left" | "right";
61  /** Optional toggle shortcut, e.g. `mod+b`. Default null. */
62  shortcut?: string | null;
63  /** Return false to preserve a matching shortcut event for another feature. */
64  shouldHandleShortcut?: (event: KeyboardEvent) => boolean;
65  children: React.ReactNode;
66}
67 
68/** Provides sidebar open state and toggle shortcut. */
69export function SidebarProvider({
70  defaultOpen = true,
71  open: openProp,
72  onOpenChange,
73  side = "left",
74  shortcut = null,
75  shouldHandleShortcut,
76  children,
77}: SidebarProviderProps): React.ReactElement {
78  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
79// … truncated