@wistia/ui 0.21.4-beta.ddcb8bcf.39c1c3e → 0.21.5-beta.da246d56.ebfe72f

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, 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 = {
@@ -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;
 
@@ -1726,11 +1720,6 @@ declare const calculateContrast: ({ backgroundColor, foregroundColor, background
     backgroundOpacity?: number;
 }) => number;
 
-type ComboboxOptionProps = {
-    value: string;
-    children: ReactNode;
-};
-declare const ComboboxOption: ({ value, children }: ComboboxOptionProps) => react_jsx_runtime.JSX.Element;
 type ComboboxProps = {
     /**
      * If true, the popover will flip to stay within the viewport
@@ -1771,6 +1760,12 @@ type ComboboxProps = {
 };
 declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, displayValues, children, flipPopover, fullWidth, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
 
+type ComboboxOptionProps = {
+    value: string;
+    children: ReactNode;
+};
+declare const ComboboxOption: ({ value, children }: ComboboxOptionProps) => react_jsx_runtime.JSX.Element;
+
 type ContextMenuProps = {
     children: ReactNode;
     onRequestClose?: () => void;
@@ -2711,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
      */
@@ -2729,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
      */
@@ -2752,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;
 };
 
@@ -2960,6 +2962,7 @@ declare const ListItem: {
 type MarkProps = ComponentPropsWithoutRef<'div'> & {
     /** The content of the Mark component. */
     children: ReactNode;
+    /** Sets the [color scheme](/docs/color-schemes) */
     colorScheme?: ColorSchemeTypes;
 };
 /**
@@ -3029,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
      */
@@ -3141,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;
@@ -3183,7 +3182,11 @@ 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> & {
+    /**
+     * Callback when the item is selected
+     */
+    onSelect?: () => void;
+}, "ref"> | Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     beforeAction?: (() => Promise<void>) | (() => void);
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
@@ -3219,7 +3222,11 @@ 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> & {
+    /**
+     * Callback when the item is selected
+     */
+    onSelect?: () => void;
+}, "ref"> | Omit<BaseButtonProps & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
     type?: "button" | "reset" | "submit";
     children: react.ReactNode;
@@ -3241,6 +3248,10 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
      * Treats the menu item as a link when provided
      */
     href?: MenuItemButtonProps["href"];
+    /**
+     * Callback when the item is selected
+     */
+    onSelect?: () => void;
 }, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type MenuItemLabelProps = {
@@ -3259,22 +3270,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)
      */
@@ -3282,7 +3297,7 @@ type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
     /**
      * The value of the item
      */
-    value: DropdownMenuRadioItemProps['value'];
+    value: string;
     /**
      * @ignore
      */
@@ -3295,13 +3310,17 @@ type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
      * @ignore
      */
     ref?: never;
+    /**
+     * Callback when the item is selected
+     */
+    onSelect?: () => 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;
     /**
@@ -3324,6 +3343,10 @@ type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps
      * @ignore
      */
     ref?: never;
+    /**
+     * Callback when the item is selected
+     */
+    onSelect?: () => void;
 };
 declare const CheckboxMenuItem: {
     ({ onSelect, checked, onCheckedChange, ...props }: CheckboxMenuItemProps): react_jsx_runtime.JSX.Element;
@@ -3538,8 +3561,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
      */
@@ -3559,13 +3581,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;
     /**
@@ -3573,12 +3595,20 @@ type PopoverProps = ContentProps & PopoverControlProps & {
      */
     isAnimated?: boolean;
     colorScheme?: ColorSchemeTypes;
+    /**
+     * 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, ...props }: PopoverProps): JSX.Element;
+    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, withArrow, isAnimated, colorScheme, side, align, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 
@@ -3915,7 +3945,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
      */
@@ -4117,6 +4147,12 @@ type SliderProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {
      * Callback called on value change
      */
     onChange?: (value: number[]) => void;
+    /**
+     * Callback called when the user finishes interacting with the slider
+     * (e.g. on mouseup, touchend, or keyup). Useful for analytics or
+     * expensive operations where only the final value matters.
+     */
+    onValueCommit?: (value: number[]) => void;
     /**
      * Value to be added or subtracted on each step
      */
@@ -4128,7 +4164,7 @@ type SliderProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {
     value?: number[];
 };
 declare const Slider: {
-    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, initialValue, max, min, onChange, 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;
 };
 
@@ -4366,19 +4402,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: {
@@ -4386,7 +4432,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" />`
@@ -4626,7 +4675,7 @@ type TooltipProps = {
     /**
      * The button or other interactive element that triggers the tooltip
      */
-    children: ReactNode;
+    children: ReactElement;
     /**
      * The delay in milliseconds before the tooltip appears
      */