@storybook/components 7.0.0-alpha.5 → 7.0.0-alpha.8

package/dist/html.mjs

@@ -1,4 +1,4 @@
-import{Ha as e,Ia as r,a as p}from"./chunk-XFBIFQ3K.mjs";import"./chunk-EBKGXALM.mjs";import{a as t}from"./chunk-DF422II4.mjs";import"./chunk-WYLOY4EF.mjs";import"./chunk-7IK3EOFL.mjs";import"./chunk-AZCVBZVA.mjs";import"./chunk-XZM6YCLI.mjs";import{h as o}from"./chunk-PJYBQ6PQ.mjs";o();import n from"util-deprecate";var s=n(()=>{},t`
+import{a as p,da as e,ea as r}from"./chunk-37LBAZBN.mjs";import"./chunk-NS5PSNOW.mjs";import{a as t}from"./chunk-DF422II4.mjs";import"./chunk-IONIU25V.mjs";import"./chunk-7IK3EOFL.mjs";import{h as o}from"./chunk-PJYBQ6PQ.mjs";o();import n from"util-deprecate";var s=n(()=>{},t`
     The entry point '@storybook/components/html' is deprecated. Please use '@storybook/components' directly instead.
 
     See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-storybook-components-html-entry-point

package/dist/index.d.ts

@@ -1,10 +1,9 @@
 import * as react from 'react';
-import react__default, { ComponentProps, FunctionComponent, AnchorHTMLAttributes, MouseEvent, ReactNode, ReactElement, Component, RefObject, SyntheticEvent, FC, ElementType } from 'react';
+import react__default, { ComponentProps, FunctionComponent, AnchorHTMLAttributes, MouseEvent, ReactNode, ReactElement, Component, RefObject, SyntheticEvent, ElementType } from 'react';
 import * as _storybook_theming from '@storybook/theming';
-import { Theme } from '@storybook/theming';
+import { Theme, CSSObject } from '@storybook/theming';
 import { BuiltInParserName } from 'prettier';
 import * as react_textarea_autosize from 'react-textarea-autosize';
-import { Conditional, Parameters } from '@storybook/csf';
 
 declare const A: _storybook_theming.StyledComponent<any, {
     theme: _storybook_theming.Theme;
@@ -174,6 +173,8 @@ declare type SyntaxHighlighterProps = SyntaxHighlighterBaseProps & SyntaxHighlig
 declare const LazySyntaxHighlighter: react__default.LazyExoticComponent<react__default.FunctionComponent<SyntaxHighlighterProps>>;
 declare const SyntaxHighlighter: (props: ComponentProps<typeof LazySyntaxHighlighter>) => JSX.Element;
 
+declare function createCopyToClipboardFunction(): (text: string) => any;
+
 interface ActionItem {
     title: string | JSX.Element;
     className?: string;
@@ -251,24 +252,24 @@ declare const Form: _storybook_theming.StyledComponent<react.DetailedHTMLProps<r
     Field: react.FunctionComponent<FieldProps>;
     Input: _storybook_theming.StyledComponent<any, {
         size?: "flex" | "auto" | "100%";
-        align?: "start" | "center" | "end";
-        valid?: "error" | "valid" | "warn";
+        align?: "center" | "end" | "start";
+        valid?: "valid" | "error" | "warn";
         height?: number;
     }, _storybook_theming.Theme> & {
         displayName: string;
     };
     Select: _storybook_theming.StyledComponent<any, Omit<react.SelectHTMLAttributes<HTMLSelectElement>, "height" | "size" | "valid" | "align"> & {
         size?: "flex" | "auto" | "100%";
-        align?: "start" | "center" | "end";
-        valid?: "error" | "valid" | "warn";
+        align?: "center" | "end" | "start";
+        valid?: "valid" | "error" | "warn";
         height?: number;
     }, _storybook_theming.Theme> & {
         displayName: string;
     };
     Textarea: _storybook_theming.StyledComponent<any, Omit<react_textarea_autosize.TextareaAutosizeProps, "height" | "size" | "valid" | "align"> & {
         size?: "flex" | "auto" | "100%";
-        align?: "start" | "center" | "end";
-        valid?: "error" | "valid" | "warn";
+        align?: "center" | "end" | "start";
+        valid?: "valid" | "error" | "warn";
         height?: number;
     }, _storybook_theming.Theme> & {
         displayName: string;
@@ -542,6 +543,7 @@ interface IconButtonProps {
     disabled?: boolean;
 }
 declare const IconButton: _storybook_theming.StyledComponent<any, IconButtonProps, _storybook_theming.Theme>;
+declare const IconButtonSkeleton: () => JSX.Element;
 
 declare const Separator: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, SeparatorProps, _storybook_theming.Theme>;
 declare const interleaveSeparators: (list: any[]) => any;
@@ -759,337 +761,6 @@ declare const StorybookLogo: FunctionComponent<{
 
 declare const StorybookIcon: FunctionComponent<{}>;
 
-interface DescriptionProps {
-    markdown: string;
-}
-/**
- * A markdown description for a component, typically used to show the
- * components docgen docs.
- */
-declare const Description: FunctionComponent<DescriptionProps>;
-
-interface DocsPageProps {
-    title: string;
-    subtitle?: string;
-}
-declare const Title: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}, Theme>;
-declare const Subtitle: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}, Theme>;
-declare const DocsContent: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<react__default.ClassAttributes<HTMLDivElement> & react__default.HTMLAttributes<HTMLDivElement>, keyof react__default.HTMLAttributes<HTMLDivElement>>, Theme>;
-declare const DocsWrapper: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}, Theme>;
-declare const DocsPageWrapper: FC;
-
-declare const StyledSyntaxHighlighter: _storybook_theming.StyledComponent<any, {}, _storybook_theming.Theme>;
-declare enum SourceError {
-    NO_STORY = "There\u2019s no story here.",
-    SOURCE_UNAVAILABLE = "Oh no! The source is not available."
-}
-interface SourceErrorProps {
-    isLoading?: boolean;
-    error?: SourceError;
-}
-interface SourceCodeProps {
-    language?: string;
-    code?: string;
-    format?: ComponentProps<typeof SyntaxHighlighter>['format'];
-    dark?: boolean;
-}
-declare type SourceProps = SourceErrorProps & SourceCodeProps;
-/**
- * Syntax-highlighted source code for a component (or anything!)
- */
-declare const Source: FunctionComponent<SourceProps>;
-
-interface PreviewProps {
-    isLoading?: true;
-    isColumn?: boolean;
-    columns?: number;
-    withSource?: SourceProps;
-    isExpanded?: boolean;
-    withToolbar?: boolean;
-    className?: string;
-    additionalActions?: ActionItem[];
-}
-/**
- * A preview component for showing one or more component `Story`
- * items. The preview also shows the source for the component
- * as a drop-down.
- */
-declare const Preview: FunctionComponent<PreviewProps>;
-declare const PreviewSkeleton: () => JSX.Element;
-
-interface JsDocParam {
-    name: string;
-    description?: string;
-}
-interface JsDocReturns {
-    description?: string;
-}
-interface JsDocTags {
-    params?: JsDocParam[];
-    returns?: JsDocReturns;
-}
-interface PropSummaryValue {
-    summary: string;
-    detail?: string;
-    required?: boolean;
-}
-declare type PropType = PropSummaryValue;
-declare type PropDefaultValue = PropSummaryValue;
-interface TableAnnotation {
-    type: PropType;
-    jsDocTags?: JsDocTags;
-    defaultValue?: PropDefaultValue;
-    category?: string;
-}
-interface ArgType {
-    name?: string;
-    description?: string;
-    defaultValue?: any;
-    if?: Conditional;
-    [key: string]: any;
-}
-interface ArgTypes {
-    [key: string]: ArgType;
-}
-interface Args {
-    [key: string]: any;
-}
-declare type Globals = {
-    [name: string]: any;
-};
-
-declare const TableWrapper: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {
-    compact?: boolean;
-    inAddonPanel?: boolean;
-    isLoading?: boolean;
-}, _storybook_theming.Theme>;
-declare enum ArgsTableError {
-    NO_COMPONENT = "No component found.",
-    ARGS_UNSUPPORTED = "Args unsupported. See Args documentation for your framework."
-}
-declare type SortType = 'alpha' | 'requiredFirst' | 'none';
-interface ArgsTableOptionProps {
-    updateArgs?: (args: Args) => void;
-    resetArgs?: (argNames?: string[]) => void;
-    compact?: boolean;
-    inAddonPanel?: boolean;
-    initialExpandedArgs?: boolean;
-    isLoading?: boolean;
-    sort?: SortType;
-}
-interface ArgsTableDataProps {
-    rows: ArgTypes;
-    args?: Args;
-    globals?: Globals;
-}
-interface ArgsTableErrorProps {
-    error: ArgsTableError;
-}
-interface ArgsTableLoadingProps {
-    isLoading: true;
-}
-declare const argsTableLoadingData: ArgsTableDataProps;
-declare type ArgsTableProps = ArgsTableOptionProps & (ArgsTableDataProps | ArgsTableErrorProps | ArgsTableLoadingProps);
-/**
- * Display the props for a component as a props table. Each row is a collection of
- * ArgDefs, usually derived from docgen info for the component.
- */
-declare const ArgsTable: FC<ArgsTableProps>;
-
-interface TabbedArgsTableProps {
-    tabs: Record<string, ArgsTableProps>;
-    sort?: SortType;
-}
-declare const TabbedArgsTable: FC<TabbedArgsTableProps>;
-
-declare const NoControlsWarning: () => JSX.Element;
-
-declare enum StoryError {
-    NO_STORY = "No component or story to display"
-}
-interface CommonProps {
-    title?: string;
-    height?: string;
-    id: string;
-}
-interface InlineStoryProps extends CommonProps {
-    parameters: Parameters;
-    storyFn: ElementType;
-}
-declare type IFrameStoryProps = CommonProps;
-declare type StoryProps = InlineStoryProps | IFrameStoryProps;
-/**
- * A story element, either rendered inline or in an iframe,
- * with configurable height.
- */
-declare const Story: FunctionComponent<StoryProps & {
-    inline?: boolean;
-    error?: StoryError;
-}>;
-declare const StorySkeleton: () => JSX.Element;
-
-interface IFrameProps {
-    id: string;
-    key?: string;
-    title: string;
-    src: string;
-    allowFullScreen: boolean;
-    scale: number;
-    style?: any;
-}
-interface BodyStyle {
-    width: string;
-    height: string;
-    transform: string;
-    transformOrigin: string;
-}
-declare class IFrame extends Component<IFrameProps> {
-    iframe: any;
-    componentDidMount(): void;
-    shouldComponentUpdate(nextProps: IFrameProps): boolean;
-    setIframeBodyStyle(style: BodyStyle): any;
-    render(): JSX.Element;
-}
-
-interface TypesetProps {
-    fontFamily?: string;
-    fontSizes: string[];
-    fontWeight?: number;
-    sampleText?: string;
-}
-/**
- * Convenient styleguide documentation showing examples of type
- * with different sizes and weights and configurable sample text.
- */
-declare const Typeset: FunctionComponent<TypesetProps>;
-
-declare type Colors = string[] | {
-    [key: string]: string;
-};
-interface ColorItemProps {
-    title: string;
-    subtitle: string;
-    colors: Colors;
-}
-/**
- * A single color row your styleguide showing title, subtitle and one or more colors, used
- * as a child of `ColorPalette`.
- */
-declare const ColorItem: FunctionComponent<ColorItemProps>;
-/**
- * Styleguide documentation for colors, including names, captions, and color swatches,
- * all specified as `ColorItem` children of this wrapper component.
- */
-declare const ColorPalette: FunctionComponent;
-
-interface IconItemProps {
-    name: string;
-}
-/**
- * An individual icon with a caption and an example (passed as `children`).
- */
-declare const IconItem: FunctionComponent<IconItemProps>;
-/**
- * Show a grid of icons, as specified by `IconItem`.
- */
-declare const IconGallery: FunctionComponent;
-
-interface ControlProps<T> {
-    name: string;
-    value?: T;
-    defaultValue?: T;
-    argType?: ArgType;
-    onChange: (value: T) => T | void;
-    onFocus?: (evt: any) => void;
-    onBlur?: (evt: any) => void;
-}
-declare type BooleanValue = boolean;
-interface BooleanConfig {
-}
-declare type ColorValue = string;
-declare type PresetColor = ColorValue | {
-    color: ColorValue;
-    title?: string;
-};
-interface ColorConfig {
-    presetColors?: PresetColor[];
-    startOpen?: boolean;
-}
-declare type DateValue = Date | number;
-interface DateConfig {
-}
-declare type NumberValue = number;
-interface NumberConfig {
-    min?: number;
-    max?: number;
-    step?: number;
-}
-declare type RangeConfig = NumberConfig;
-declare type ObjectValue = any;
-interface ObjectConfig {
-}
-declare type OptionsSingleSelection = any;
-declare type OptionsMultiSelection = any[];
-declare type OptionsSelection = OptionsSingleSelection | OptionsMultiSelection;
-declare type OptionsArray = any[];
-declare type OptionsObject = Record<string, any>;
-declare type Options = OptionsArray | OptionsObject;
-declare type OptionsControlType = 'radio' | 'inline-radio' | 'check' | 'inline-check' | 'select' | 'multi-select';
-interface OptionsConfig {
-    labels: Record<any, string>;
-    options: Options;
-    type: OptionsControlType;
-}
-interface NormalizedOptionsConfig {
-    options: OptionsObject;
-}
-declare type TextValue = string;
-interface TextConfig {
-}
-declare type ControlType = 'array' | 'boolean' | 'color' | 'date' | 'number' | 'range' | 'object' | OptionsControlType | 'text';
-declare type Control = BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
-declare type Controls = Record<string, Control>;
-
-declare type ColorControlProps = ControlProps<ColorValue> & ColorConfig;
-
-declare type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
-declare const BooleanControl: FC<BooleanProps>;
-
-declare const parseDate: (value: string) => Date;
-declare const parseTime: (value: string) => Date;
-declare const formatDate: (value: Date | number) => string;
-declare const formatTime: (value: Date | number) => string;
-declare type DateProps = ControlProps<DateValue> & DateConfig;
-declare const DateControl: FC<DateProps>;
-
-declare type NumberProps = ControlProps<NumberValue | null> & NumberConfig;
-declare const parse: (value: string) => number;
-declare const format: (value: NumberValue) => string;
-declare const NumberControl: FC<NumberProps>;
-
-declare type OptionsProps = ControlProps<OptionsSelection> & OptionsConfig;
-declare const OptionsControl: FC<OptionsProps>;
-
-declare type ObjectProps = ControlProps<ObjectValue> & ObjectConfig & {
-    theme: any;
-};
-declare const ObjectControl: FC<ObjectProps>;
-
-declare type RangeProps = ControlProps<NumberValue | null> & RangeConfig;
-declare const RangeControl: FC<RangeProps>;
-
-declare type TextProps = ControlProps<TextValue | undefined> & TextConfig;
-declare const TextControl: FC<TextProps>;
-
-interface FilesControlProps extends ControlProps<string[]> {
-    accept?: string;
-}
-declare const FilesControl: FunctionComponent<FilesControlProps>;
-
-declare type ColorProps = ColorControlProps;
-declare const LazyColorControl: react__default.LazyExoticComponent<react__default.FC<ColorControlProps>>;
-declare const ColorControl: (props: ComponentProps<typeof LazyColorControl>) => JSX.Element;
-
 declare const ProgressWrapper: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<react__default.ClassAttributes<HTMLDivElement> & react__default.HTMLAttributes<HTMLDivElement>, keyof react__default.HTMLAttributes<HTMLDivElement>>, _storybook_theming.Theme>;
 interface Progress {
     value: number;
@@ -1115,6 +786,22 @@ declare const nameSpaceClassNames: ({ ...props }: {
     [x: string]: any;
 };
 
+/**
+ * This is a "local" reset to style subtrees with Storybook styles
+ *
+ * We can't style individual elements (e.g. h1, h2, etc.) in here
+ * because the CSS specificity is too high, so those styles can too
+ * easily override child elements that are not expecting it.
+ */
+declare const ResetWrapper: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}, _storybook_theming.Theme>;
+
+declare const codeCommon: ({ theme }: {
+    theme: Theme;
+}) => CSSObject;
+declare const withReset: ({ theme }: {
+    theme: Theme;
+}) => CSSObject;
+
 declare const components: {
     h1: (props: react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) => JSX.Element;
     h2: (props: react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) => JSX.Element;
@@ -1141,4 +828,4 @@ declare const components: {
 };
 declare const resetComponents: Record<string, ElementType>;
 
-export { A, ActionBar, AddonPanel, ArgType, ArgTypes, Args, ArgsTable, ArgsTableDataProps, ArgsTableError, ArgsTableErrorProps, ArgsTableLoadingProps, ArgsTableOptionProps, ArgsTableProps, Badge, Bar, Blockquote, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Button, Code, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Control, ControlProps, ControlType, Controls, DL, DateConfig, DateControl, DateProps, DateValue, Description, DescriptionProps, Div, DocsContent, DocsPageProps, DocsPageWrapper, DocsWrapper, DocumentWrapper, FilesControl, FilesControlProps, FlexBar, Form, Globals, H1, H2, H3, H4, H5, H6, HR, IFrame, IconButton, IconGallery, IconItem, Icons, IconsProps, Img, JsDocParam, JsDocReturns, JsDocTags, LI, Link$1 as Link, Loader, NoControlsWarning, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, OL, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, P, Placeholder, Pre, PresetColor, Preview, PreviewProps, PreviewSkeleton, PropDefaultValue, PropSummaryValue, PropType, RangeConfig, RangeControl, ScrollArea, Separator, SortType, Source, SourceError, SourceProps, Spaced, Span, Story, StoryError, StorySkeleton, StorybookIcon, StorybookLogo, StyledSyntaxHighlighter, Subtitle, Symbols, SyntaxHighlighter, SyntaxHighlighterFormatTypes, SyntaxHighlighterProps, SyntaxHighlighterRendererProps, TT, TabBar, TabButton, TabWrapper, TabbedArgsTable, TabbedArgsTableProps, Table, TableAnnotation, TableWrapper, Tabs, TabsState, TextConfig, TextControl, TextProps, TextValue, Title, TooltipLinkList, TooltipMessage, TooltipNote, Typeset, TypesetProps, UL, WithTooltip, WithTooltipPure, Zoom, argsTableLoadingData, components, format, formatDate, formatTime, getStoryHref, interleaveSeparators, nameSpaceClassNames, parse, parseDate, parseTime, resetComponents };
+export { A, ActionBar, ActionItem, AddonPanel, Badge, Bar, Blockquote, Button, Code, DL, Div, DocumentWrapper, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, IconButtonSkeleton, Icons, IconsProps, Img, LI, Link$1 as Link, Loader, OL, P, Placeholder, Pre, ResetWrapper, ScrollArea, Separator, Spaced, Span, StorybookIcon, StorybookLogo, Symbols, SyntaxHighlighter, SyntaxHighlighterFormatTypes, SyntaxHighlighterProps, SyntaxHighlighterRendererProps, TT, TabBar, TabButton, TabWrapper, Table, Tabs, TabsState, TooltipLinkList, TooltipMessage, TooltipNote, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, createCopyToClipboardFunction, getStoryHref, interleaveSeparators, nameSpaceClassNames, resetComponents, withReset };