Context and Hooks

/**
 * Root context provider that configures Blueprint behavior and theming
 * @param props - Provider configuration and children
 */
function BlueprintProvider(props: BlueprintProviderProps): JSX.Element;

interface BlueprintProviderProps {
  children?: React.ReactNode;
}

/**
 * Context provider for hotkey functionality
 * @param props - Hotkeys provider configuration
 */
function HotkeysProvider(props: HotkeysProviderProps): JSX.Element;

/**
 * React context for accessing hotkey functionality
 */
const HotkeysContext: React.Context<HotkeysContextInstance>;

/**
 * Hook for registering and managing keyboard shortcuts
 * @param keys - Key combination string (e.g., "cmd+s", "ctrl+shift+d")
 * @param callback - Function to execute when hotkey is pressed
 * @param options - Configuration options for hotkey behavior
 * @returns Hotkey registration control object
 */
function useHotkeys(
  keys: string,
  callback: () => void,
  options?: UseHotkeysOptions
): UseHotkeysReturnValue;

interface HotkeysProviderProps {
  children?: React.ReactNode;
}

interface HotkeysContextInstance {
  handleKeyDown: (event: KeyboardEvent) => void;
  handleKeyUp: (event: KeyboardEvent) => void;
  hotkeys: HotkeyConfig[];
  isDialogOpen: boolean;
}

interface UseHotkeysOptions {
  allowInInput?: boolean;
  disabled?: boolean;
  document?: Document;
  preventDefault?: boolean;
  stopPropagation?: boolean;
}

interface UseHotkeysReturnValue {
  handleKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
  handleKeyUp: (event: React.KeyboardEvent<HTMLElement>) => void;
}

interface HotkeyConfig {
  combo: string;
  description?: string;
  global?: boolean;
  group?: string;
  label?: string;
  onKeyDown?: (event: KeyboardEvent) => any;
  onKeyUp?: (event: KeyboardEvent) => any;
  allowInInput?: boolean;
  disabled?: boolean;
  preventDefault?: boolean;
  stopPropagation?: boolean;
}

import { HotkeysProvider, useHotkeys } from "@blueprintjs/core";

// Provider setup
function App() {
  return (
    <HotkeysProvider>
      <MyComponent />
    </HotkeysProvider>
  );
}

// Using hotkeys hook
function MyComponent() {
  const { handleKeyDown, handleKeyUp } = useHotkeys(
    "cmd+s", 
    () => console.log("Save shortcut pressed"),
    {
      preventDefault: true,
      allowInInput: false
    }
  );

  useHotkeys("cmd+n", () => createNewDocument());
  useHotkeys("esc", () => closeModal(), { disabled: !isModalOpen });

  return <div onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>Content</div>;
}

/**
 * Context provider for overlay management and z-index coordination
 * @param props - Overlays provider configuration
 */
function OverlaysProvider(props: OverlaysProviderProps): JSX.Element;

/**
 * React context for overlay state management
 */
const OverlaysContext: React.Context<OverlaysContextState>;

/**
 * Hook for managing overlay stack state and z-index coordination
 * @returns Overlay stack management functions
 */
function useOverlayStack(): {
  getLastOpened: () => string | undefined;
  isOpen: (id: string) => boolean;
  open: (id: string) => void;
  close: (id: string) => void;
};

interface OverlaysProviderProps {
  children?: React.ReactNode;
}

interface OverlaysContextState {
  getLastOpened: () => string | undefined;
  isOpen: (id: string) => boolean;
  open: (id: string) => void;
  close: (id: string) => void;
}

/**
 * Context provider for portal rendering configuration
 * @param props - Portal provider configuration
 */
function PortalProvider(props: PortalProviderProps): JSX.Element;

/**
 * React context for portal configuration
 */
const PortalContext: React.Context<PortalContextOptions>;

interface PortalProviderProps {
  portalClassName?: string;
  portalContainer?: HTMLElement;
  children?: React.ReactNode;
}

interface PortalContextOptions {
  portalClassName?: string;
  portalContainer?: HTMLElement;
}

/**
 * Hook for managing async controllable values with loading states
 * @param props - Controllable value configuration
 * @returns Current value and setter function
 */
function useAsyncControllableValue<T>(props: {
  value?: T;
  defaultValue?: T;
  onChange?: (value: T) => void | Promise<void>;
}): [T | undefined, (value: T) => void];

/**
 * Cross-platform layout effect hook that uses useLayoutEffect on client and useEffect on server
 * @param effect - Effect function to run
 * @param deps - Dependency array for effect
 */
function useIsomorphicLayoutEffect(
  effect: React.EffectCallback,
  deps?: React.DependencyList
): void;

/**
 * Hook for accessing the previous value of a state or prop
 * @param value - Current value to track
 * @returns Previous value or undefined if no previous value
 */
function usePrevious<T>(value: T): T | undefined;

import { useAsyncControllableValue, usePrevious, useIsomorphicLayoutEffect } from "@blueprintjs/core";

// Async controllable value
function AsyncInput({ value, onChange, ...props }) {
  const [currentValue, setValue] = useAsyncControllableValue({
    value,
    onChange: async (newValue) => {
      await saveToServer(newValue);
      onChange?.(newValue);
    }
  });

  return (
    <input 
      value={currentValue || ""} 
      onChange={(e) => setValue(e.target.value)}
      {...props}
    />
  );
}

// Previous value tracking
function CounterWithPrevious() {
  const [count, setCount] = useState(0);
  const previousCount = usePrevious(count);

  return (
    <div>
      <p>Current: {count}</p>
      <p>Previous: {previousCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Isomorphic layout effect
function ResponsiveComponent() {
  const [width, setWidth] = useState(0);

  useIsomorphicLayoutEffect(() => {
    const updateWidth = () => setWidth(window.innerWidth);
    updateWidth();
    window.addEventListener('resize', updateWidth);
    return () => window.removeEventListener('resize', updateWidth);
  }, []);

  return <div>Window width: {width}px</div>;
}

/**
 * Legacy HOC for adding hotkey functionality to components
 * @deprecated Use useHotkeys hook instead
 */
const HotkeysTarget: React.ComponentType<any>;

/**
 * Legacy component type for hotkey targets
 * @deprecated Use useHotkeys hook instead
 */
type IHotkeysTargetComponent = React.ComponentType<any>;

/**
 * Shows the hotkeys help dialog
 * @deprecated Use HotkeysDialog2 component instead
 */
function showHotkeysDialog(): void;

/**
 * Hides the hotkeys help dialog
 * @deprecated Use HotkeysDialog2 component instead
 */
function hideHotkeysDialog(): void;

/**
 * Hides the hotkeys dialog after a delay
 * @deprecated Use HotkeysDialog2 component instead
 */
function hideHotkeysDialogAfterDelay(): void;

/**
 * Checks if the hotkeys dialog is currently showing
 * @deprecated Use HotkeysDialog2 component instead
 */
function isHotkeysDialogShowing(): boolean;

/**
 * Sets props for the hotkeys dialog
 * @deprecated Use HotkeysDialog2 component instead
 */
function setHotkeysDialogProps(props: any): void;

import { 
  BlueprintProvider,
  HotkeysProvider, 
  OverlaysProvider,
  PortalProvider 
} from "@blueprintjs/core";

function AppProviders({ children }) {
  return (
    <BlueprintProvider>
      <HotkeysProvider>
        <OverlaysProvider>
          <PortalProvider portalContainer={document.body}>
            {children}
          </PortalProvider>
        </OverlaysProvider>
      </HotkeysProvider>
    </BlueprintProvider>
  );
}

// Usage in root component
function App() {
  return (
    <AppProviders>
      <MainContent />
    </AppProviders>
  );
}

import { useHotkeys, HotkeysProvider } from "@blueprintjs/core";

// Component with multiple hotkeys
function Editor() {
  // Save document
  useHotkeys("cmd+s", handleSave, {
    preventDefault: true,
    allowInInput: true
  });

  // Create new document  
  useHotkeys("cmd+n", handleNew);

  // Conditional hotkey
  useHotkeys("delete", handleDelete, {
    disabled: !hasSelection,
    preventDefault: true
  });

  // Global hotkey that works even when component is unmounted
  useHotkeys("cmd+shift+p", openCommandPalette, {
    global: true
  });

  return <div>Editor content</div>;
}

// Custom hook for common hotkey patterns
function useEditorHotkeys(actions) {
  useHotkeys("cmd+s", actions.save);
  useHotkeys("cmd+z", actions.undo);
  useHotkeys("cmd+shift+z", actions.redo);
  useHotkeys("cmd+a", actions.selectAll);
}

import { OverlaysContext, HotkeysContext } from "@blueprintjs/core";

// Using context directly
function MyComponent() {
  const overlayStack = useContext(OverlaysContext);
  const hotkeysInstance = useContext(HotkeysContext);

  const handleOpenModal = () => {
    const modalId = "my-modal";
    overlayStack.open(modalId);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>Open Modal</button>
      <p>Active hotkeys: {hotkeysInstance.hotkeys.length}</p>
    </div>
  );
}