@wistia/ui 0.21.6-beta.14029db3.c005e65 → 0.21.6

package/dist/index.d.ts

@@ -3,11 +3,17 @@ import * as react from 'react';
 import { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, RefObject, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, AnchorHTMLAttributes, MouseEvent, ReactElement, ElementType, ChangeEvent, PropsWithChildren, InputHTMLAttributes, Ref, SyntheticEvent, ComponentProps, CSSProperties, HTMLAttributes, ForwardRefExoticComponent, RefAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
 import { UseFilePickerConfig, FilePickerReturnTypes, ExtractContentTypeFromConfig, useImperativeFilePickerConfig, ImperativeFilePickerReturnTypes } from 'use-file-picker/types';
 export * from 'use-file-picker/types';
+import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
 import { Color } from 'culori/fn';
 import * as Ariakit from '@ariakit/react';
 import * as styled_components from 'styled-components';
 import { Schema } from 'yup';
+import { HoverCardContentProps } from '@radix-ui/react-hover-card';
 import ReactMarkdown from 'react-markdown';
+import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
+import { PopoverContentProps } from '@radix-ui/react-popover';
+import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
+import { TabsProps as TabsProps$1, TabsContentProps as TabsContentProps$1, TabsListProps as TabsListProps$1, TabsTriggerProps as TabsTriggerProps$1 } from '@radix-ui/react-tabs';
 export { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from 'use-file-picker/validators';
 
 type UIProviderProps = {
@@ -1211,7 +1217,7 @@ type CollapsibleTriggerProps = {
      * A trigger element that will toggle the collapsible content.
      * Usually a [Button](?path=/docs/components-button--docs).
      */
-    children: ReactElement;
+    children: ReactNode;
 };
 declare const CollapsibleTrigger: ({ children }: CollapsibleTriggerProps) => react_jsx_runtime.JSX.Element;
 
@@ -1499,7 +1505,7 @@ type CollapsibleContentProps = {
     /**
      * The content that will be hidden when `Collapsible` is closed.
      */
-    children: ReactNode;
+    children: CollapsibleContentProps$1['children'];
 };
 declare const CollapsibleContent: ({ clamp, children }: CollapsibleContentProps) => react_jsx_runtime.JSX.Element;
 
@@ -2706,7 +2712,8 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
 };
 declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
 
-type PreviewCardProps = {
+type ContentProps$1 = Omit<HoverCardContentProps, 'alignOffset' | 'arrowPadding' | 'asChild' | 'collisionPadding' | 'hideWhenDetached' | 'sideOffset'>;
+type PreviewCardProps = ContentProps$1 & {
     /**
      * The content of the preview card
      */
@@ -2723,7 +2730,7 @@ type PreviewCardProps = {
      * The [Link](?path=/docs/components-link--docs) that opens the preview card when hovered.
      * Preview cards should only be used on links—do not use on non-interactive elements (e.g. buttons or plain text).
      */
-    trigger: ReactElement;
+    trigger: JSX.Element;
     /**
      * If true, the preview card will use the unstyled Content component instead of StyledContent
      */
@@ -2746,20 +2753,12 @@ type PreviewCardProps = {
      * Force the preview card to be open without user interaction (for debugging and CI)
      */
     forceOpen?: boolean;
-    /**
-     * The preferred side of the trigger to render on
-     */
-    side?: 'bottom' | 'left' | 'right' | 'top';
-    /**
-     * The preferred alignment against the trigger
-     */
-    align?: 'center' | 'end' | 'start';
 };
 /**
  * Preview cards reveal content on hover. **Everything in the card must also exist at the destination**—never put information only in the preview. This pattern is for sighted-only, so treat the card as a preview, not a source of truth.
  */
 declare const PreviewCard: {
-    ({ children, trigger, maxWidth, maxHeight, unstyled, paddingSize, openDelay, closeDelay, colorScheme, forceOpen, side, align, ...props }: PreviewCardProps): JSX.Element;
+    ({ children, trigger, maxWidth, maxHeight, unstyled, paddingSize, openDelay, closeDelay, colorScheme, forceOpen, ...props }: PreviewCardProps): JSX.Element;
     displayName: string;
 };
 
@@ -3032,6 +3031,10 @@ type MenuProps = MenuControlProps & {
      * The label for the trigger element, this is ignored if `trigger` is defined
      */
     label?: string;
+    /**
+     * Callback for when the user clicks or focuses outside of the menu
+     */
+    onInteractOutside?: DropdownMenuContentProps['onInteractOutside'];
     /**
      * The side the menu appears on, relative to the trigger
      */
@@ -3140,7 +3143,7 @@ type MenuItemButtonProps = ButtonProps & {
     unstyled?: never;
 };
 
-declare const MenuItem: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -3182,16 +3185,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<BaseButtonProps &
      * Treats the menu item as a link when provided
      */
     href?: MenuItemButtonProps["href"];
-    /**
-     * Whether the menu should close when this item is clicked
-     * @default true
-     */
-    closeOnClick?: boolean;
-    /**
-     * Callback when the item is selected
-     */
-    onSelect?: (event: Event | SyntheticEvent) => void;
-}, "ref"> | Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -3227,16 +3221,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<BaseButtonProps &
      * Treats the menu item as a link when provided
      */
     href?: MenuItemButtonProps["href"];
-    /**
-     * Whether the menu should close when this item is clicked
-     * @default true
-     */
-    closeOnClick?: boolean;
-    /**
-     * Callback when the item is selected
-     */
-    onSelect?: (event: Event | SyntheticEvent) => void;
-}, "ref"> | Omit<BaseButtonProps & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
+}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
     type?: "button" | "reset" | "submit";
     children: react.ReactNode;
@@ -3258,15 +3243,6 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<BaseButtonProps &
      * Treats the menu item as a link when provided
      */
     href?: MenuItemButtonProps["href"];
-    /**
-     * Whether the menu should close when this item is clicked
-     * @default true
-     */
-    closeOnClick?: boolean;
-    /**
-     * Callback when the item is selected
-     */
-    onSelect?: (event: Event | SyntheticEvent) => void;
 }, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type MenuItemLabelProps = {
@@ -3285,26 +3261,22 @@ type MenuItemDescriptionProps = {
 };
 declare const MenuItemDescription: ({ children }: MenuItemDescriptionProps) => react_jsx_runtime.JSX.Element;
 
-type MenuRadioGroupProps = {
+type MenuRadioGroupProps = DropdownMenuRadioGroupProps & {
     /**
      * The radio items
      */
     children: ReactNode | ReactNode[];
     /**
-     * The value of the selected radio item
-     */
-    value?: string;
-    /**
-     * Callback when the value changes
+     * @ignore
      */
-    onValueChange?: (value: string) => void;
+    asChild?: never;
 };
 declare const MenuRadioGroup: {
     ({ children, ...props }: MenuRadioGroupProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-type RadioMenuItemProps = MenuItemButtonProps & {
+type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
     /**
      * Optional `Icon` to use as the indicator that the radio item is selected. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
      */
@@ -3312,7 +3284,7 @@ type RadioMenuItemProps = MenuItemButtonProps & {
     /**
      * The value of the item
      */
-    value: string;
+    value: DropdownMenuRadioItemProps['value'];
     /**
      * @ignore
      */
@@ -3325,17 +3297,13 @@ type RadioMenuItemProps = MenuItemButtonProps & {
      * @ignore
      */
     ref?: never;
-    /**
-     * Callback when the item is selected
-     */
-    onSelect?: (event: Event | SyntheticEvent) => void;
 };
 declare const RadioMenuItem: {
     ({ onSelect, value, indicator, ...props }: RadioMenuItemProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-type CheckboxMenuItemProps = MenuItemButtonProps & {
+type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps & {
     /** Callback to fire when the checked status changes */
     onCheckedChange: (checked: boolean) => void;
     /**
@@ -3358,10 +3326,6 @@ type CheckboxMenuItemProps = MenuItemButtonProps & {
      * @ignore
      */
     ref?: never;
-    /**
-     * Callback when the item is selected
-     */
-    onSelect?: (event: Event | SyntheticEvent) => void;
 };
 declare const CheckboxMenuItem: {
     ({ onSelect, checked, onCheckedChange, ...props }: CheckboxMenuItemProps): react_jsx_runtime.JSX.Element;
@@ -3576,7 +3540,8 @@ type UncontrolledPopoverProps = {
     onOpenChange?: never;
 };
 type PopoverControlProps = ControlledPopoverProps | UncontrolledPopoverProps;
-type PopoverProps = PopoverControlProps & {
+type ContentProps = Omit<PopoverContentProps, 'alignOffset' | 'arrowPadding' | 'asChild' | 'collisionPadding' | 'hideWhenDetached' | 'sideOffset' | 'updatePositionStrategy'>;
+type PopoverProps = ContentProps & PopoverControlProps & {
     /**
      * The content of the popover
      */
@@ -3600,13 +3565,13 @@ type PopoverProps = PopoverControlProps & {
     /**
      * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
      */
-    trigger: ReactElement;
+    trigger: JSX.Element;
     /**
      * If true, the popover will use the unstyled Content component instead of StyledContent
      */
     unstyled?: boolean;
     /**
-     * If true, the popover will use a custom arrow on the trigger
+     * If true, the popover will use a custom radix arrow to trigger
      */
     withArrow?: boolean;
     /**
@@ -3618,20 +3583,12 @@ type PopoverProps = PopoverControlProps & {
      * Inline styles applied to the popover popup
      */
     style?: CSSProperties;
-    /**
-     * The preferred side of the trigger to render on
-     */
-    side?: 'bottom' | 'left' | 'right' | 'top';
-    /**
-     * The preferred alignment against the trigger
-     */
-    align?: 'center' | 'end' | 'start';
 };
 /**
  * Displays rich content in a portal, triggered by a button.
  */
 declare const Popover: {
-    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, withArrow, isAnimated, colorScheme, style, side, align, ...props }: PopoverProps): JSX.Element;
+    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, withArrow, isAnimated, colorScheme, style, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 
@@ -3968,7 +3925,7 @@ declare const ScrollArea: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDiv
     locked?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
 
-type SegmentedControlProps = {
+type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
     /**
      * `SegmentedControlItem`s that will be rendered in grouping
      */
@@ -3997,7 +3954,7 @@ type SegmentedControlProps = {
 /**
  * Provides a horizontal set of segments for switching between different values
  */
-declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps & HTMLAttributes<HTMLDivElement>>;
+declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps>;
 
 type BaseProps$1 = {
     /**
@@ -4175,7 +4132,7 @@ type SliderProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {
      * (e.g. on mouseup, touchend, or keyup). Useful for analytics or
      * expensive operations where only the final value matters.
      */
-    onValueCommitted?: (value: number[]) => void;
+    onValueCommit?: (value: number[]) => void;
     /**
      * Value to be added or subtracted on each step
      */
@@ -4187,7 +4144,7 @@ type SliderProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {
     value?: number[];
 };
 declare const Slider: {
-    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, initialValue, max, min, onChange, onValueCommitted, step, value, "data-testid": dataTestId, ...otherProps }: SliderProps): JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, initialValue, max, min, onChange, onValueCommit, step, value, "data-testid": dataTestId, ...otherProps }: SliderProps): JSX.Element;
     displayName: string;
 };
 
@@ -4425,29 +4382,19 @@ type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
 };
 declare const TableRow: ({ children, ...props }: TableRowProps) => JSX.Element;
 
-type TabsProps = {
-    children?: React.ReactNode;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
-    value?: string;
-};
+type TabsProps = Pick<TabsProps$1, 'children' | 'defaultValue' | 'onValueChange' | 'value'>;
 declare const Tabs: {
     ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }: TabsProps): JSX.Element;
     displayName: string;
 };
 
-type TabsContentProps = {
-    children?: ReactNode;
-    value: string;
-};
+type TabsContentProps = Pick<TabsContentProps$1, 'children' | 'value'>;
 declare const TabsContent: {
     ({ children, value }: TabsContentProps): JSX.Element;
     displayName: string;
 };
 
-type TabsListProps = {
-    'aria-label'?: string;
-} & PropsWithChildren<{
+type TabsListProps = Pick<TabsListProps$1, 'aria-label'> & PropsWithChildren<{
     fullWidth?: boolean;
 }>;
 declare const TabsList: {
@@ -4455,10 +4402,7 @@ declare const TabsList: {
     displayName: string;
 };
 
-type BaseProps = {
-    disabled?: boolean;
-    value: string;
-};
+type BaseProps = Pick<TabsTriggerProps$1, 'disabled' | 'value'>;
 type IconWithLabel = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`