47dac2e8b5
Upgrade React 18.3.1 → 19.2.4 with full type compatibility. Changes: - react, react-dom → ^19.0.0 - @types/react, @types/react-dom → ^19.0.0 - lucide-react → ^0.577.0 (React 19 type fixes) - @tiptap/* → ^3.20.4 (React 19 support) - useRef calls now require explicit initial value (undefined) - RefObject types updated for React 19 (includes null) - MutableRefObject → RefObject (deprecated in 19) - act() import moved from react-dom/test-utils to react - Scoped JSX namespace imports added where needed
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
/**
|
|
* TabUIContext - Provides the current tab's ID to all descendant components.
|
|
*
|
|
* This context enables per-tab UI state isolation. Components use the tabId
|
|
* from this context to access their tab-specific state from the store.
|
|
*
|
|
* Usage:
|
|
* ```tsx
|
|
* // In TabbedLayout (provider):
|
|
* <TabUIProvider tabId={tab.id}>
|
|
* <SessionTabContent />
|
|
* </TabUIProvider>
|
|
*
|
|
* // In any descendant component (consumer):
|
|
* const tabId = useTabId();
|
|
* const { expandedIds, toggleExpansion } = useTabUI();
|
|
* ```
|
|
*/
|
|
|
|
import { createContext, type JSX, type ReactNode } from 'react';
|
|
|
|
// =============================================================================
|
|
// Context Definition
|
|
// =============================================================================
|
|
|
|
interface TabUIContextValue {
|
|
/** The unique ID of the current tab */
|
|
tabId: string;
|
|
}
|
|
|
|
const TabUIContext = createContext<TabUIContextValue | null>(null);
|
|
|
|
export { TabUIContext };
|
|
|
|
// =============================================================================
|
|
// Provider Component
|
|
// =============================================================================
|
|
|
|
interface TabUIProviderProps {
|
|
/** The tab ID to provide to descendants */
|
|
tabId: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Provides the tab ID to all descendant components.
|
|
* Wrap each tab's content with this provider.
|
|
*/
|
|
export const TabUIProvider = ({ tabId, children }: TabUIProviderProps): JSX.Element => {
|
|
return <TabUIContext.Provider value={{ tabId }}>{children}</TabUIContext.Provider>;
|
|
};
|