@mui/internal-docs-infra/useCode/useUIState.mjs

MUI Infra - internal documentation creation tools.

import * as React from 'react';
import { useUrlHashState } from "../useUrlHashState/index.mjs";
import { isHashRelevantToDemo } from "./useFileNavigation.mjs";
/**
 * Hook for managing UI state like expansion and focus
 * Auto-expands if there's a relevant hash for this demo
 */
export function useUIState({
  initialExpanded = false,
  mainSlug
}) {
  const [hash] = useUrlHashState();
  const hasRelevantHash = isHashRelevantToDemo(hash, mainSlug);
  const [expanded, setExpanded] = React.useState(initialExpanded || hasRelevantHash);
  const expand = React.useCallback(() => setExpanded(true), []);

  // Auto-expand if hash becomes relevant. This is a one-way OR-latch: it ratchets
  // `expanded` to true but never collapses, so adjusting state during render is safe
  // (the branch is skipped once `expanded` is true, avoiding an extra render).
  if (hasRelevantHash && !expanded) {
    setExpanded(true);
  }
  return {
    expanded,
    expand,
    setExpanded
  };
}