storybook 10.1.0-alpha.12 → 10.1.0-alpha.14

package/dist/components/index.d.ts

@@ -1,9 +1,9 @@
 import * as React$1 from 'react';
-import React__default, { ComponentProps, AnchorHTMLAttributes, MouseEvent as MouseEvent$1, ReactNode, ReactElement, HTMLAttributes, ButtonHTMLAttributes, SyntheticEvent, Component, RefObject, DOMAttributes, FC, PropsWithChildren, ForwardRefExoticComponent, RefAttributes, ElementType } from 'react';
-import { DecoratorFunction } from 'storybook/internal/csf';
+import React__default, { ComponentProps, AnchorHTMLAttributes, MouseEvent as MouseEvent$1, ReactNode, ReactElement, SyntheticEvent, HTMLAttributes, Component, RefObject, DOMAttributes, FC, PropsWithChildren, ForwardRefExoticComponent, ButtonHTMLAttributes, RefAttributes, ElementType } from 'react';
+import { color, CSSObject, FunctionInterpolation } from 'storybook/theming';
 import { API_KeyCollection } from 'storybook/manager-api';
+import { DecoratorFunction } from 'storybook/internal/csf';
 import { Addon_RenderOptions } from 'storybook/internal/types';
-import { CSSObject, FunctionInterpolation } from 'storybook/theming';
 
 interface ComponentSelector {
     __emotion_styles: any;
@@ -284,6 +284,107 @@ interface ActionBarProps {
 }
 declare const ActionBar: ({ actionItems, ...props }: ActionBarProps) => React__default.JSX.Element;
 
+declare const CollapsibleContent: StyledComponent<{
+    theme?: Theme;
+    as?: React__default.ElementType;
+} & {
+    collapsed?: boolean;
+}, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const Collapsible: (({ children, summary, collapsed, disabled, state: providedState, ...props }: {
+    children: ReactNode | ((state: ReturnType<typeof useCollapsible>) => ReactNode);
+    summary?: ReactNode | ((state: ReturnType<typeof useCollapsible>) => ReactNode);
+    collapsed?: boolean;
+    disabled?: boolean;
+    state?: ReturnType<typeof useCollapsible>;
+} & ComponentProps<typeof CollapsibleContent>) => React__default.JSX.Element) & {
+    Content: StyledComponent<{
+        theme?: Theme;
+        as?: React__default.ElementType;
+    } & {
+        collapsed?: boolean;
+    }, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+declare const useCollapsible: (collapsed?: boolean, disabled?: boolean) => {
+    contentId: string;
+    isCollapsed: boolean;
+    isDisabled: boolean;
+    setCollapsed: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    toggleCollapsed: (event?: SyntheticEvent<Element, Event>) => void;
+    toggleProps: {
+        readonly disabled: boolean | undefined;
+        readonly onClick: (event?: SyntheticEvent<Element, Event>) => void;
+        readonly 'aria-controls': string;
+        readonly 'aria-expanded': boolean;
+    };
+};
+
+declare const CardContent: StyledComponent<{
+    theme?: Theme;
+    as?: React__default.ElementType;
+}, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface CardProps extends ComponentProps<typeof CardContent> {
+    outlineAnimation?: 'none' | 'rainbow' | 'spin';
+    outlineColor?: keyof typeof color;
+}
+declare const Card: React__default.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React__default.RefAttributes<HTMLDivElement>> & {
+    Content: StyledComponent<{
+        theme?: Theme;
+        as?: React__default.ElementType;
+    }, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Outline: StyledComponent<{
+        theme?: Theme;
+        as?: React__default.ElementType;
+    } & {
+        animation?: "none" | "rainbow" | "spin";
+        color?: keyof typeof color;
+    }, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+
+type TransitionStatus =
+  | 'preEnter'
+  | 'entering'
+  | 'entered'
+  | 'preExit'
+  | 'exiting'
+  | 'exited'
+  | 'unmounted';
+
+declare const Listbox: StyledComponent<{
+    theme?: Theme;
+    as?: React__default.ElementType;
+}, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}> & {
+    Item: StyledComponent<{
+        theme?: Theme;
+        as?: React__default.ElementType;
+    } & {
+        active?: boolean;
+        transitionStatus?: TransitionStatus;
+    }, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    HoverItem: StyledComponent<{
+        theme?: Theme;
+        as?: React__default.ElementType;
+    } & {
+        active?: boolean;
+        transitionStatus?: TransitionStatus;
+    } & React__default.ClassAttributes<HTMLDivElement> & React__default.HTMLAttributes<HTMLDivElement> & {
+        theme?: Theme;
+    } & {
+        targetId: string;
+    }, {}, {}>;
+    Button: React__default.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+    Action: StyledComponent<Omit<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement> & {
+        theme?: Theme;
+    }, {}, {}>;
+    Text: StyledComponent<{
+        theme?: Theme;
+        as?: React__default.ElementType;
+    }, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Icon: StyledComponent<{
+        theme?: Theme;
+        as?: React__default.ElementType;
+    }, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -360,24 +461,19 @@ interface HeadingProps extends HTMLAttributes<HTMLElement> {
     level?: number;
 }
 
-type TransitionStatus =
-  | 'preEnter'
-  | 'entering'
-  | 'entered'
-  | 'preExit'
-  | 'exiting'
-  | 'exited'
-  | 'unmounted';
+declare module 'react' {
+    interface ReactElement {
+        $$typeof?: symbol | string;
+    }
+}
+interface SlotProps extends React$1.HTMLAttributes<HTMLElement> {
+    children?: React$1.ReactNode;
+}
+declare const Slot: React$1.ForwardRefExoticComponent<SlotProps & React$1.RefAttributes<HTMLElement>>;
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends Omit<ComponentProps<typeof StyledButton>, 'as'> {
+    as?: ComponentProps<typeof StyledButton>['as'] | typeof Slot;
     asChild?: boolean;
-    size?: 'small' | 'medium';
-    padding?: 'small' | 'medium' | 'none';
-    variant?: 'outline' | 'solid' | 'ghost';
-    onClick?: (event: SyntheticEvent) => void;
-    active?: boolean;
-    disabled?: boolean;
-    animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
     /**
      * A concise action label for the button announced by screen readers. Needed for buttons without
      * text or with text that relies on visual cues to be understood. Pass false to indicate that the
@@ -408,8 +504,21 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      */
     shortcut?: API_KeyCollection;
 }
-declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare const IconButton: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+declare const StyledButton: StyledComponent<{
+    theme?: Theme;
+    as?: React__default.ElementType;
+} & {
+    size?: "small" | "medium";
+    padding?: "small" | "medium" | "none";
+    variant?: "outline" | "solid" | "ghost";
+    active?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    animating?: boolean;
+    animation?: "none" | "rotate360" | "glow" | "jiggle";
+}, React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const IconButton: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 
 declare const Overlay: StyledComponent<{
     theme?: Theme;
@@ -454,8 +563,9 @@ declare const Col: StyledComponent<{
     theme?: Theme;
     as?: React__default.ElementType;
 }, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const Header: ({ hasClose, ...props }: React__default.ComponentProps<typeof Col> & {
+declare const Header: ({ hasClose, onClose, ...props }: React__default.ComponentProps<typeof Col> & {
     hasClose?: boolean;
+    onClose?: () => void;
 }) => React__default.JSX.Element;
 declare const Title: StyledComponent<HeadingProps & React__default.RefAttributes<HTMLHeadingElement> & {
     theme?: Theme;
@@ -592,7 +702,7 @@ interface ToggleButtonProps extends ButtonProps {
     /** Whether the ToggleButton is currently pressed or not. */
     pressed: boolean;
 }
-declare const ToggleButton: React__default.ForwardRefExoticComponent<ToggleButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const ToggleButton: React__default.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 
 interface Option {
     /** Optional rendering of the option. */
@@ -643,7 +753,7 @@ interface SelectProps extends Omit<ButtonProps, 'onClick' | 'onChange' | 'onSele
     onDeselect?: (option: string) => void;
     onChange?: (selected: string[]) => void;
 }
-declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const Select: React__default.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 
 type Sizes = '100%' | 'flex' | 'auto';
 type Alignments = 'end' | 'center' | 'start';
@@ -715,7 +825,7 @@ declare const Form: StyledComponent<{
     } & React$1.RefAttributes<HTMLTextAreaElement>, {}, {}> & {
         displayName: string;
     };
-    Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+    Button: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
     Checkbox: (props: React.InputHTMLAttributes<HTMLInputElement>) => React$1.JSX.Element;
     Radio: (props: React.InputHTMLAttributes<HTMLInputElement>) => React$1.JSX.Element;
 };
@@ -1435,4 +1545,4 @@ declare const components: {
 };
 declare const resetComponents: Record<string, ElementType>;
 
-export { A, AbstractToolbar, ActionBar, type ActionItem, AddonPanel, Badge, Bar, type BarProps, Blockquote, Button, type ButtonProps, ClipboardCode, Code, DL, Div, DocumentWrapper, EmptyTabContent, ErrorFormatter, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, Img, LI, Link$1 as Link, ListItem, Loader, Modal, ModalDecorator, OL, P, Placeholder, Popover, type PopoverProps, PopoverProvider, type PopoverProviderProps, type PopperPlacement, Pre, ProgressSpinner, ResetWrapper, ScrollArea, Select, Separator, Spaced, Span, StatelessTab, StatelessTabList, type StatelessTabListProps, StatelessTabPanel, type StatelessTabPanelProps, type StatelessTabProps, StatelessTabsView, type StatelessTabsViewProps, StorybookIcon, StorybookLogo, type SupportedLanguage, SyntaxHighlighter, type SyntaxHighlighterFormatTypes, type SyntaxHighlighterProps, type SyntaxHighlighterRendererProps, TT, TabBar, TabButton, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, TabWrapper, Table, Tabs, TabsState, TabsView, type TabsViewProps, ToggleButton, Toolbar, Tooltip, TooltipLinkList, type Link as TooltipLinkListLink, TooltipMessage, TooltipNote, type TooltipNoteProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, convertToReactAriaPlacement, createCopyToClipboardFunction, getStoryHref, interleaveSeparators, nameSpaceClassNames, resetComponents, useTabsState, withReset };
+export { A, AbstractToolbar, ActionBar, type ActionItem, AddonPanel, Badge, Bar, type BarProps, Blockquote, Button, type ButtonProps, Card, ClipboardCode, Code, Collapsible, DL, Div, DocumentWrapper, EmptyTabContent, ErrorFormatter, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, Img, LI, Link$1 as Link, ListItem, Listbox, Loader, Modal, ModalDecorator, OL, P, Placeholder, Popover, type PopoverProps, PopoverProvider, type PopoverProviderProps, type PopperPlacement, Pre, ProgressSpinner, ResetWrapper, ScrollArea, Select, Separator, Spaced, Span, StatelessTab, StatelessTabList, type StatelessTabListProps, StatelessTabPanel, type StatelessTabPanelProps, type StatelessTabProps, StatelessTabsView, type StatelessTabsViewProps, StorybookIcon, StorybookLogo, type SupportedLanguage, SyntaxHighlighter, type SyntaxHighlighterFormatTypes, type SyntaxHighlighterProps, type SyntaxHighlighterRendererProps, TT, TabBar, TabButton, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, TabWrapper, Table, Tabs, TabsState, TabsView, type TabsViewProps, ToggleButton, Toolbar, Tooltip, TooltipLinkList, type Link as TooltipLinkListLink, TooltipMessage, TooltipNote, type TooltipNoteProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, convertToReactAriaPlacement, createCopyToClipboardFunction, getStoryHref, interleaveSeparators, nameSpaceClassNames, resetComponents, useTabsState, withReset };