storybook 10.1.0-beta.4 → 10.1.0-beta.6

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 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 { color, CSSObject, FunctionInterpolation } from 'storybook/theming';
 import { DecoratorFunction } from 'storybook/internal/csf';
 import { Addon_RenderOptions } from 'storybook/internal/types';
 
@@ -284,6 +284,129 @@ interface ActionBarProps {
 }
 declare const ActionBar: ({ actionItems, ...props }: ActionBarProps) => React__default.JSX.Element;
 
+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 Omit<ComponentProps<typeof StyledButton>, 'as'> {
+    as?: ComponentProps<typeof StyledButton>['as'] | typeof Slot;
+    asChild?: boolean;
+    /**
+     * 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
+     * Button's content is already accessible to all. When a string is passed, it is also used as the
+     * default tooltip text.
+     */
+    ariaLabel?: string | false;
+    /**
+     * An optional tooltip to display when the Button is hovered. If the Button has no text content,
+     * consider making this the same as the aria-label.
+     */
+    tooltip?: string;
+    /**
+     * Only use this flag when tooltips on button interfere with other keyboard interactions, like
+     * when building a custom select or menu button. Disables tooltips from the `tooltip`, `shortcut`
+     * and `ariaLabel` props.
+     */
+    disableAllTooltips?: boolean;
+    /**
+     * A more thorough description of what the Button does, provided to non-sighted users through an
+     * aria-describedby attribute. Use sparingly for buttons that trigger complex actions.
+     */
+    ariaDescription?: string;
+    /**
+     * An optional keyboard shortcut to enable the button. Will be displayed in the tooltip and passed
+     * to aria-keyshortcuts for assistive technologies. The binding of the shortcut and action is
+     * managed globally in the manager's shortcuts module.
+     */
+    shortcut?: API_KeyCollection;
+}
+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>>;
+
+interface ToggleButtonProps extends ButtonProps {
+    /** Whether the ToggleButton is currently pressed or not. */
+    pressed: boolean;
+}
+declare const ToggleButton: React__default.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+type TransitionStatus =
+  | 'preEnter'
+  | 'entering'
+  | 'entered'
+  | 'preExit'
+  | 'exiting'
+  | 'exited'
+  | 'unmounted';
+
+declare const ActionListAction: StyledComponent<Omit<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement> & {
+    theme?: Theme;
+}, "ref"> & React__default.RefAttributes<HTMLButtonElement> & {
+    theme?: Theme;
+}, {}, {}>;
+declare const ActionList: StyledComponent<{
+    theme?: Theme;
+    as?: React__default.ElementType;
+}, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}> & {
+    Item: StyledComponent<{
+        theme?: Theme;
+        as?: React__default.ElementType;
+    } & {
+        active?: boolean;
+        transitionStatus?: TransitionStatus;
+    }, React__default.DetailedHTMLProps<React__default.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+    HoverItem: StyledComponent<{
+        theme?: Theme;
+        as?: React__default.ElementType;
+    } & {
+        active?: boolean;
+        transitionStatus?: TransitionStatus;
+    } & React__default.ClassAttributes<HTMLLIElement> & React__default.LiHTMLAttributes<HTMLLIElement> & {
+        theme?: Theme;
+    } & {
+        targetId: string;
+    }, {}, {}>;
+    Button: React__default.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement> & {
+        theme?: Theme;
+    }, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+    Toggle: React__default.ForwardRefExoticComponent<Omit<Omit<ToggleButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement> & {
+        theme?: Theme;
+    }, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+    Action: StyledComponent<Omit<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement> & {
+        theme?: Theme;
+    }, "ref"> & React__default.RefAttributes<HTMLButtonElement> & {
+        theme?: Theme;
+    }, {}, {}>;
+    Link: (props: ComponentProps<typeof ActionListAction> & React__default.AnchorHTMLAttributes<HTMLAnchorElement>) => React__default.JSX.Element;
+    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>, {}>;
+};
+
 declare const CollapsibleContent: StyledComponent<{
     theme?: Theme;
     as?: React__default.ElementType;
@@ -340,51 +463,6 @@ declare const Card: React__default.ForwardRefExoticComponent<Omit<CardProps, "re
     }, 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");
@@ -461,65 +539,6 @@ interface HeadingProps extends HTMLAttributes<HTMLElement> {
     level?: number;
 }
 
-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 Omit<ComponentProps<typeof StyledButton>, 'as'> {
-    as?: ComponentProps<typeof StyledButton>['as'] | typeof Slot;
-    asChild?: boolean;
-    /**
-     * 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
-     * Button's content is already accessible to all. When a string is passed, it is also used as the
-     * default tooltip text.
-     */
-    ariaLabel?: string | false;
-    /**
-     * An optional tooltip to display when the Button is hovered. If the Button has no text content,
-     * consider making this the same as the aria-label.
-     */
-    tooltip?: string;
-    /**
-     * Only use this flag when tooltips on button interfere with other keyboard interactions, like
-     * when building a custom select or menu button. Disables tooltips from the `tooltip`, `shortcut`
-     * and `ariaLabel` props.
-     */
-    disableAllTooltips?: boolean;
-    /**
-     * A more thorough description of what the Button does, provided to non-sighted users through an
-     * aria-describedby attribute. Use sparingly for buttons that trigger complex actions.
-     */
-    ariaDescription?: string;
-    /**
-     * An optional keyboard shortcut to enable the button. Will be displayed in the tooltip and passed
-     * to aria-keyshortcuts for assistive technologies. The binding of the shortcut and action is
-     * managed globally in the manager's shortcuts module.
-     */
-    shortcut?: API_KeyCollection;
-}
-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;
     as?: React__default.ElementType;
@@ -698,19 +717,14 @@ interface ErrorFormatterProps {
 }
 declare const ErrorFormatter: ({ error }: ErrorFormatterProps) => React__default.JSX.Element;
 
-interface ToggleButtonProps extends ButtonProps {
-    /** Whether the ToggleButton is currently pressed or not. */
-    pressed: boolean;
-}
-declare const ToggleButton: React__default.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
-
+type Value = string | number | null | boolean | undefined;
 interface Option {
     /** Optional rendering of the option. */
     children?: React__default.ReactNode;
     title: string;
     description?: string;
     icon?: React__default.ReactNode;
-    value: string;
+    value: Value;
 }
 
 interface SelectProps extends Omit<ButtonProps, 'onClick' | 'onChange' | 'onSelect' | 'variant'> {
@@ -742,16 +756,16 @@ interface SelectProps extends Omit<ButtonProps, 'onClick' | 'onChange' | 'onSele
     /** Options available in the select. */
     options: Option[];
     /** IDs of the preselected options. */
-    defaultOptions?: string | string[];
+    defaultOptions?: Value | Value[];
     /** Whether the Select should render open. */
     defaultOpen?: boolean;
     /** When set, a reset option is rendered in the Select listbox. */
     onReset?: () => void;
     /** Custom text label for the reset option when it exists. */
     resetLabel?: string;
-    onSelect?: (option: string) => void;
-    onDeselect?: (option: string) => void;
-    onChange?: (selected: string[]) => void;
+    onSelect?: (option: Value) => void;
+    onDeselect?: (option: Value) => void;
+    onChange?: (selected: Value[]) => void;
 }
 declare const Select: React__default.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 
@@ -1545,4 +1559,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, 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 };
+export { A, AbstractToolbar, ActionBar, type ActionItem, ActionList, 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, 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 };