@mui/internal-docs-infra/useDemo/useDemo.d.mts

MUI Infra - internal documentation creation tools.

import * as React from 'react';
import type { UseCodeOpts } from "../useCode/index.mjs";
import type { ContentProps } from "../CodeHighlighter/types.mjs";
import { type ExportConfig } from "./exportVariant.mjs";
/**
 * Demo templates use the exportVariant/exportVariantAsCra with flattenCodeVariant pattern:
 *
 * For StackBlitz:
 * const { exported: exportedVariant, entrypoint } = exportVariant(variantCode);
 * const flattenedFiles = flattenCodeVariant(exportedVariant);
 * createStackBlitzDemo({ title, description, flattenedFiles, useTypescript, initialFile: entrypoint })
 *
 * For CodeSandbox:
 * const { exported: craExport, entrypoint } = exportVariantAsCra(variantCode, { title, description, useTypescript });
 * const flattenedFiles = flattenCodeVariant(craExport);
 * createCodeSandboxDemo({ title, description, flattenedFiles, useTypescript, initialFile: entrypoint })
 * createCodeSandboxDemo({ title, description, flattenedFiles, useTypescript })
 */
type UseDemoOpts = UseCodeOpts & {
  codeSandboxUrlPrefix?: string;
  stackBlitzPrefix?: string;
  /** Common export configuration applied to both StackBlitz and CodeSandbox */
  export?: ExportConfig;
  /** StackBlitz-specific export configuration (merged with common export config) */
  exportStackBlitz?: ExportConfig;
  /** CodeSandbox-specific export configuration (merged with common export config) */
  exportCodeSandbox?: ExportConfig;
};
/**
 * Helper to create HTML form element with hidden inputs
 */
export declare function addHiddenInput(form: HTMLFormElement, name: string, value: string): void;
/**
 * Generic function to create and submit a form for opening online demo platforms
 * This function creates HTML elements and should be used in browser contexts
 */
export declare function openWithForm({
  url,
  formData,
  method,
  target
}: {
  url: string;
  formData: Record<string, string>;
  method?: string;
  target?: string;
}): void;
export declare function useDemo<T extends {} = {}>(contentProps: ContentProps<T>, opts?: UseDemoOpts): {
  variants: string[];
  selectedVariant: string;
  selectVariant: (variant: string | null) => void;
  files: Array<{
    name: string;
    slug?: string;
    component: React.ReactNode;
  }>;
  selectedFile: React.ReactNode;
  selectedFileLines: number;
  selectedFileName: string | undefined;
  selectedFileUrl: string | undefined;
  selectedFileSlug: string | undefined;
  selectFileName: (fileName: string) => void;
  allFilesSlugs: Array<{
    fileName: string;
    slug: string;
    variantName: string;
  }>;
  expanded: boolean;
  expand: () => void;
  setExpanded: (expanded: boolean) => void;
  copy: (event: React.MouseEvent<Element, MouseEvent>) => Promise<void>;
  copyMarkdown: (event: React.MouseEvent<Element, MouseEvent>) => Promise<void>;
  availableTransforms: string[];
  selectedTransform: string | null | undefined;
  selectTransform: (transformName: string | null) => void;
  pendingTransform: string | null | undefined;
  setSource?: (source: string, fileName?: string) => void;
  reset?: () => void;
  refresh?: () => void;
  userProps: T & {
    name?: string;
    slug?: string;
  };
  component: string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
  focusRef: React.RefObject<HTMLButtonElement | null>;
  resetFocus: () => void;
  openStackBlitz: () => void;
  openCodeSandbox: () => void;
  name: string | undefined;
  slug: string | undefined;
};
export {};