@mui/internal-docs-infra/esm/useDemo/useDemo.d.ts

MUI Infra - internal documentation creation tools.

import * as React from 'react';
import type { UseCodeOpts } from "../useCode/index.js";
import type { ContentProps } from "../CodeHighlighter/types.js";
import { type ExportConfig } from "./exportVariant.js";
/**
 * Demo templates use the exportVariant/exportVariantAsCra with flattenVariant pattern:
 *
 * For StackBlitz:
 * const { exported: exportedVariant, entrypoint } = exportVariant(variantCode);
 * const flattenedFiles = flattenVariant(exportedVariant);
 * createStackBlitzDemo({ title, description, flattenedFiles, useTypescript, initialFile: entrypoint })
 *
 * For CodeSandbox:
 * const { exported: craExport, entrypoint } = exportVariantAsCra(variantCode, { title, description, useTypescript });
 * const flattenedFiles = flattenVariant(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): {
  component: string | number | bigint | true | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
  ref: React.RefObject<HTMLDivElement | null>;
  resetFocus: () => void;
  openStackBlitz: () => void;
  openCodeSandbox: () => void;
  name: string | undefined;
  slug: string | undefined;
  variants: string[];
  selectedVariant: string;
  selectVariant: React.Dispatch<React.SetStateAction<string>>;
  files: Array<{
    name: string;
    slug?: string;
    component: React.ReactNode;
  }>;
  selectedFile: React.ReactNode;
  selectedFileLines: number;
  selectedFileName: string | undefined;
  selectFileName: (fileName: string) => void;
  allFilesSlugs: Array<{
    fileName: string;
    slug: string;
    variantName: string;
  }>;
  expanded: boolean;
  expand: () => void;
  setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
  copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
  availableTransforms: string[];
  selectedTransform: string | null | undefined;
  selectTransform: (transformName: string | null) => void;
  setSource?: (source: string) => void;
  userProps: T & {
    name?: string;
    slug?: string;
  };
};
export {};