@wistia/ui 0.21.7 → 0.21.8-beta.7d0080e7.cf35bb3

package/dist/index.d.ts

@@ -3,17 +3,11 @@ 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 = {
@@ -1146,7 +1140,7 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.Detailed
     /**
      * Callback function invoked when the value changes
      */
-    onChange?: (event: ChangeEvent) => unknown;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Indicates if the input is required
      */
@@ -1217,7 +1211,7 @@ type CollapsibleTriggerProps = {
      * A trigger element that will toggle the collapsible content.
      * Usually a [Button](?path=/docs/components-button--docs).
      */
-    children: ReactNode;
+    children: ReactElement;
 };
 declare const CollapsibleTrigger: ({ children }: CollapsibleTriggerProps) => react_jsx_runtime.JSX.Element;
 
@@ -1505,7 +1499,7 @@ type CollapsibleContentProps = {
     /**
      * The content that will be hidden when `Collapsible` is closed.
      */
-    children: CollapsibleContentProps$1['children'];
+    children: ReactNode;
 };
 declare const CollapsibleContent: ({ clamp, children }: CollapsibleContentProps) => react_jsx_runtime.JSX.Element;
 
@@ -2712,8 +2706,7 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
 };
 declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
 
-type ContentProps$1 = Omit<HoverCardContentProps, 'alignOffset' | 'arrowPadding' | 'asChild' | 'collisionPadding' | 'hideWhenDetached' | 'sideOffset'>;
-type PreviewCardProps = ContentProps$1 & {
+type PreviewCardProps = {
     /**
      * The content of the preview card
      */
@@ -2730,7 +2723,7 @@ type PreviewCardProps = ContentProps$1 & {
      * 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: JSX.Element;
+    trigger: ReactElement;
     /**
      * If true, the preview card will use the unstyled Content component instead of StyledContent
      */
@@ -2753,12 +2746,20 @@ type PreviewCardProps = ContentProps$1 & {
      * 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, ...props }: PreviewCardProps): JSX.Element;
+    ({ children, trigger, maxWidth, maxHeight, unstyled, paddingSize, openDelay, closeDelay, colorScheme, forceOpen, side, align, ...props }: PreviewCardProps): JSX.Element;
     displayName: string;
 };
 
@@ -3031,10 +3032,6 @@ 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
      */
@@ -3143,7 +3140,7 @@ type MenuItemButtonProps = ButtonProps & {
     unstyled?: never;
 };
 
-declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+declare const MenuItem: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -3185,7 +3182,16 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
      * Treats the menu item as a link when provided
      */
     href?: MenuItemButtonProps["href"];
-}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /**
+     * 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> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -3221,7 +3227,16 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
      * Treats the menu item as a link when provided
      */
     href?: MenuItemButtonProps["href"];
-}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * 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> & {
     href?: never;
     type?: "button" | "reset" | "submit";
     children: react.ReactNode;
@@ -3243,6 +3258,15 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
      * 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 = {
@@ -3261,22 +3285,26 @@ type MenuItemDescriptionProps = {
 };
 declare const MenuItemDescription: ({ children }: MenuItemDescriptionProps) => react_jsx_runtime.JSX.Element;
 
-type MenuRadioGroupProps = DropdownMenuRadioGroupProps & {
+type MenuRadioGroupProps = {
     /**
      * The radio items
      */
     children: ReactNode | ReactNode[];
     /**
-     * @ignore
+     * The value of the selected radio item
      */
-    asChild?: never;
+    value?: string;
+    /**
+     * Callback when the value changes
+     */
+    onValueChange?: (value: string) => void;
 };
 declare const MenuRadioGroup: {
     ({ children, ...props }: MenuRadioGroupProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
+type RadioMenuItemProps = 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)
      */
@@ -3284,7 +3312,7 @@ type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
     /**
      * The value of the item
      */
-    value: DropdownMenuRadioItemProps['value'];
+    value: string;
     /**
      * @ignore
      */
@@ -3297,13 +3325,17 @@ type RadioMenuItemProps = DropdownMenuRadioItemProps & 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 = DropdownMenuCheckboxItemProps & MenuItemButtonProps & {
+type CheckboxMenuItemProps = MenuItemButtonProps & {
     /** Callback to fire when the checked status changes */
     onCheckedChange: (checked: boolean) => void;
     /**
@@ -3326,6 +3358,10 @@ type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & 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;
@@ -3540,8 +3576,7 @@ type UncontrolledPopoverProps = {
     onOpenChange?: never;
 };
 type PopoverControlProps = ControlledPopoverProps | UncontrolledPopoverProps;
-type ContentProps = Omit<PopoverContentProps, 'alignOffset' | 'arrowPadding' | 'asChild' | 'collisionPadding' | 'hideWhenDetached' | 'sideOffset' | 'updatePositionStrategy'>;
-type PopoverProps = ContentProps & PopoverControlProps & {
+type PopoverProps = PopoverControlProps & {
     /**
      * The content of the popover
      */
@@ -3565,13 +3600,13 @@ type PopoverProps = ContentProps & PopoverControlProps & {
     /**
      * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
      */
-    trigger: JSX.Element;
+    trigger: ReactElement;
     /**
      * If true, the popover will use the unstyled Content component instead of StyledContent
      */
     unstyled?: boolean;
     /**
-     * If true, the popover will use a custom radix arrow to trigger
+     * If true, the popover will use a custom arrow on the trigger
      */
     withArrow?: boolean;
     /**
@@ -3583,12 +3618,20 @@ type PopoverProps = ContentProps & 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, ...props }: PopoverProps): JSX.Element;
+    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, withArrow, isAnimated, colorScheme, style, side, align, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 
@@ -3656,7 +3699,7 @@ type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label'
     /**
      * Callback function invoked when the value changes
      */
-    onChange?: (event: ChangeEvent) => unknown;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Indicates if the input is required
      */
@@ -3707,7 +3750,7 @@ declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTM
     /**
      * Callback function invoked when the value changes
      */
-    onChange?: (event: ChangeEvent) => unknown;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Indicates if the input is required
      */
@@ -3925,7 +3968,7 @@ declare const ScrollArea: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDiv
     locked?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
 
-type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
+type SegmentedControlProps = {
     /**
      * `SegmentedControlItem`s that will be rendered in grouping
      */
@@ -3954,7 +3997,7 @@ type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
 /**
  * Provides a horizontal set of segments for switching between different values
  */
-declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps>;
+declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps & HTMLAttributes<HTMLDivElement>>;
 
 type BaseProps$1 = {
     /**
@@ -4132,7 +4175,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.
      */
-    onValueCommit?: (value: number[]) => void;
+    onValueCommitted?: (value: number[]) => void;
     /**
      * Value to be added or subtracted on each step
      */
@@ -4144,7 +4187,7 @@ type SliderProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {
     value?: number[];
 };
 declare const Slider: {
-    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, initialValue, max, min, onChange, onValueCommit, step, value, "data-testid": dataTestId, ...otherProps }: SliderProps): JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, initialValue, max, min, onChange, onValueCommitted, step, value, "data-testid": dataTestId, ...otherProps }: SliderProps): JSX.Element;
     displayName: string;
 };
 
@@ -4262,7 +4305,7 @@ type SwitchProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label'
     /**
      * Callback function invoked when the value changes
      */
-    onChange?: (event: ChangeEvent) => unknown;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Indicates if the input is required
      */
@@ -4312,7 +4355,7 @@ declare const Switch: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHT
     /**
      * Callback function invoked when the value changes
      */
-    onChange?: (event: ChangeEvent) => unknown;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Indicates if the input is required
      */
@@ -4382,19 +4425,29 @@ type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
 };
 declare const TableRow: ({ children, ...props }: TableRowProps) => JSX.Element;
 
-type TabsProps = Pick<TabsProps$1, 'children' | 'defaultValue' | 'onValueChange' | 'value'>;
+type TabsProps = {
+    children?: React.ReactNode;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    value?: string;
+};
 declare const Tabs: {
     ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }: TabsProps): JSX.Element;
     displayName: string;
 };
 
-type TabsContentProps = Pick<TabsContentProps$1, 'children' | 'value'>;
+type TabsContentProps = {
+    children?: ReactNode;
+    value: string;
+};
 declare const TabsContent: {
     ({ children, value }: TabsContentProps): JSX.Element;
     displayName: string;
 };
 
-type TabsListProps = Pick<TabsListProps$1, 'aria-label'> & PropsWithChildren<{
+type TabsListProps = {
+    'aria-label'?: string;
+} & PropsWithChildren<{
     fullWidth?: boolean;
 }>;
 declare const TabsList: {
@@ -4402,7 +4455,10 @@ declare const TabsList: {
     displayName: string;
 };
 
-type BaseProps = Pick<TabsTriggerProps$1, 'disabled' | 'value'>;
+type BaseProps = {
+    disabled?: boolean;
+    value: string;
+};
 type IconWithLabel = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`