@wistia/ui 0.21.11 → 0.21.12-beta.d26fc17f.e6d98ef

package/dist/index.d.ts

@@ -5,16 +5,10 @@ import * as styled_components0 from "styled-components";
 import { css } from "styled-components";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from "use-file-picker/validators";
-import { CollapsibleContentProps } from "@radix-ui/react-collapsible";
 import { Color } from "culori/fn";
-import { ToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
-import { PopoverContentProps } from "@radix-ui/react-popover";
 import * as Ariakit from "@ariakit/react";
-import { DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps } from "@radix-ui/react-dropdown-menu";
 import { Schema } from "yup";
-import { HoverCardContentProps } from "@radix-ui/react-hover-card";
 import ReactMarkdown from "react-markdown";
-import { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from "@radix-ui/react-tabs";
 import { ExtractContentTypeFromConfig, FilePickerReturnTypes, ImperativeFilePickerReturnTypes, UseFilePickerConfig, useImperativeFilePickerConfig } from "use-file-picker/types";
 export * from "use-file-picker/types";
 
@@ -351,7 +345,7 @@ type LinkProps = LinkAsButtonProps | LinkAsLinkProps;
  * This means in addition to its own props, `Link` can use props from `react-router`'s `Link` component. View their documentation [here](https://reactrouter.com/en/main/components/link).
  * The one prop we ignore from react-router is `to`. We use `href` instead and map it under the hood.
  */
-declare const Link: react.ForwardRefExoticComponent<(Omit<LinkAsButtonProps, "ref"> | Omit<LinkAsLinkProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+declare const Link: react.ForwardRefExoticComponent<(Omit<LinkAsButtonProps, "ref"> | Omit<LinkAsLinkProps, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 //#endregion
 //#region src/private/hooks/useResponsiveProp/useResponsiveProp.d.ts
 type Breakpoints = 'isLgAndDown' | 'isLgAndUp' | 'isMdAndDown' | 'isMdAndUp' | 'isSmAndDown' | 'isSmAndUp' | 'isXlAndDown' | 'isXlAndUp' | 'isXsAndDown' | 'isXsAndUp';
@@ -508,7 +502,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<ButtonAsButtonProps,
    * @ignore
    */
   type?: LinkTypes;
-}, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+}, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 //#endregion
 //#region src/private/components/Toast/Toast.d.ts
 type ToastProps = ComponentPropsWithoutRef<'div'> & {
@@ -615,7 +609,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
    * Changes the secondary icon for different use cases
    */
   variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsButtonProps, "variant" | "fullWidth" | "isLoading" | "leftIcon" | "rightIcon" | "size" | "unstyled">, "ref"> | Omit<{
+} & Omit<ButtonAsButtonProps, "variant" | "size" | "unstyled" | "isLoading" | "leftIcon" | "fullWidth" | "rightIcon">, "ref"> | Omit<{
   /**
    * @override
    * The text to display for the ActionButton
@@ -644,7 +638,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
    * Changes the secondary icon for different use cases
    */
   variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsLinkProps, "variant" | "fullWidth" | "isLoading" | "leftIcon" | "rightIcon" | "size" | "unstyled">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<ButtonAsLinkProps, "variant" | "size" | "unstyled" | "isLoading" | "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 //#endregion
 //#region src/components/Avatar/Avatar.d.ts
 type AvatarInstanceType = 'image' | 'initials';
@@ -1339,7 +1333,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
@@ -1636,7 +1630,7 @@ declare const CollapsibleTriggerIcon: {
 };
 //#endregion
 //#region src/components/Collapsible/CollapsibleContent.d.ts
-type CollapsibleContentProps$1 = {
+type CollapsibleContentProps = {
   /**
    * The number of lines to clamp the content to when `Collapsible` is closed.
    */
@@ -1644,12 +1638,12 @@ type CollapsibleContentProps$1 = {
   /**
    * The content that will be hidden when `Collapsible` is closed.
    */
-  children: CollapsibleContentProps['children'];
+  children: ReactNode;
 };
 declare const CollapsibleContent: ({
   clamp,
   children
-}: CollapsibleContentProps$1) => react_jsx_runtime0.JSX.Element;
+}: CollapsibleContentProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/ColorPicker/ColorGrid.d.ts
 type ColorGridProps = PropsWithChildren & {
@@ -3089,8 +3083,7 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
 declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
 //#endregion
 //#region src/components/PreviewCard/PreviewCard.d.ts
-type ContentProps$1 = Omit<HoverCardContentProps, 'alignOffset' | 'arrowPadding' | 'asChild' | 'collisionPadding' | 'hideWhenDetached' | 'sideOffset'>;
-type PreviewCardProps = ContentProps$1 & {
+type PreviewCardProps = {
   /**
    * The content of the preview card
    */
@@ -3107,7 +3100,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
    */
@@ -3130,6 +3123,14 @@ 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.
@@ -3146,6 +3147,8 @@ declare const PreviewCard: {
     closeDelay,
     colorScheme,
     forceOpen,
+    side,
+    align,
     ...props
   }: PreviewCardProps): JSX.Element;
   displayName: string;
@@ -3175,7 +3178,7 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
    * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
    */
   children: JSX.Element;
-} & Omit<ButtonAsButtonProps, "fullWidth" | "leftIcon" | "rightIcon">, "ref"> | Omit<{
+} & Omit<ButtonAsButtonProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref"> | Omit<{
   /**
    * Accessible text for screen readers.
    */
@@ -3184,7 +3187,7 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
    * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
    */
   children: JSX.Element;
-} & Omit<ButtonAsLinkProps, "fullWidth" | "leftIcon" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 //#endregion
 //#region src/components/Image/Image.d.ts
 type ImageProps = ComponentPropsWithoutRef<'img'> & {
@@ -3264,7 +3267,7 @@ type InputClickToCopyProps = Omit<InputProps, 'autoSelect' | 'disabled' | 'right
 /**
  * Provides a readonly input that copies the text to the clipboard when clicked.
  */
-declare const InputClickToCopy: react.ForwardRefExoticComponent<Omit<InputProps, "type" | "disabled" | "value" | "rightIcon" | "autoSelect"> & {
+declare const InputClickToCopy: react.ForwardRefExoticComponent<Omit<InputProps, "type" | "disabled" | "rightIcon" | "value" | "autoSelect"> & {
   /**
    * When disabled, the copy action will not be triggered
    */
@@ -3461,10 +3464,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
    */
@@ -3586,7 +3585,7 @@ type MenuItemButtonProps = ButtonProps & {
 };
 //#endregion
 //#region src/components/Menu/MenuItem.d.ts
-declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
+declare const MenuItem: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
   href?: never;
   type?: "button" | "reset" | "submit";
   children: react.ReactNode;
@@ -3608,7 +3607,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: SyntheticEvent) => void;
+}, "ref"> | Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
   beforeAction?: (() => Promise<void>) | (() => void);
   children: react.ReactNode;
   colorScheme?: ColorSchemeTypes;
@@ -3644,7 +3652,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: SyntheticEvent) => void;
+}, "ref"> | Omit<BaseButtonProps & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
   beforeAction?: (() => Promise<void>) | (() => void);
   children: react.ReactNode;
   colorScheme?: ColorSchemeTypes;
@@ -3686,7 +3703,16 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
    * Treats the menu item as a link when provided
    */
   href?: MenuItemButtonProps["href"];
-}, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+  /**
+   * Whether the menu should close when this item is clicked
+   * @default true
+   */
+  closeOnClick?: boolean;
+  /**
+   * Callback when the item is selected
+   */
+  onSelect?: (event: SyntheticEvent) => void;
+}, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 //#endregion
 //#region src/components/Menu/MenuItemLabel.d.ts
 type MenuItemLabelProps = {
@@ -3711,15 +3737,19 @@ declare const MenuItemDescription: ({
 }: MenuItemDescriptionProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/Menu/MenuRadioGroup.d.ts
-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: {
   ({
@@ -3730,7 +3760,7 @@ declare const MenuRadioGroup: {
 };
 //#endregion
 //#region src/components/Menu/RadioMenuItem.d.ts
-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)
    */
@@ -3738,7 +3768,7 @@ type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
   /**
    * The value of the item
    */
-  value: DropdownMenuRadioItemProps['value'];
+  value: string;
   /**
    * @ignore
    */
@@ -3751,6 +3781,10 @@ type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
    * @ignore
    */
   ref?: never;
+  /**
+   * Callback when the item is selected
+   */
+  onSelect?: (event: SyntheticEvent) => void;
 };
 declare const RadioMenuItem: {
   ({
@@ -3763,7 +3797,7 @@ declare const RadioMenuItem: {
 };
 //#endregion
 //#region src/components/Menu/CheckboxMenuItem.d.ts
-type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps & {
+type CheckboxMenuItemProps = MenuItemButtonProps & {
   /** Callback to fire when the checked status changes */onCheckedChange: (checked: boolean) => void;
   /**
    * Optional `Icon` to use as the indicator that the checkbox item is selected. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
@@ -3785,6 +3819,10 @@ type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps
    * @ignore
    */
   ref?: never;
+  /**
+   * Callback when the item is selected
+   */
+  onSelect?: (event: SyntheticEvent) => void;
 };
 declare const CheckboxMenuItem: {
   ({
@@ -4029,8 +4067,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
    */
@@ -4054,13 +4091,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;
   /**
@@ -4072,6 +4109,14 @@ 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.
@@ -4090,6 +4135,8 @@ declare const Popover: {
     isAnimated,
     colorScheme,
     style,
+    side,
+    align,
     ...props
   }: PopoverProps): JSX.Element;
   displayName: string;
@@ -4187,7 +4234,7 @@ type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label'
    */
   hideLabel?: boolean;
 };
-declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "onChange" | "value" | "size" | "hideLabel"> & {
+declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "onChange" | "size" | "value" | "hideLabel"> & {
   /**
    * Indicates the state of the radio
    */
@@ -4449,7 +4496,7 @@ declare const ScrollArea: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDiv
 } & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 //#region src/components/SegmentedControl/SegmentedControl.d.ts
-type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
+type SegmentedControlProps = {
   /**
    * `SegmentedControlItem`s that will be rendered in grouping
    */
@@ -4478,7 +4525,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>>;
 //#endregion
 //#region src/components/SegmentedControl/SegmentedControlItem.d.ts
 type BaseProps$1 = {
@@ -4663,7 +4710,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
    */
@@ -4683,7 +4730,7 @@ declare const Slider: {
     max,
     min,
     onChange,
-    onValueCommit,
+    onValueCommitted,
     step,
     value,
     "data-testid": dataTestId,
@@ -4970,7 +5017,12 @@ declare const TableRow: ({
 }: TableRowProps) => JSX.Element;
 //#endregion
 //#region src/components/Tabs/Tabs.d.ts
-type TabsProps$1 = Pick<TabsProps, 'children' | 'defaultValue' | 'onValueChange' | 'value'>;
+type TabsProps = {
+  children?: React.ReactNode;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  value?: string;
+};
 declare const Tabs: {
   ({
     children,
@@ -4978,22 +5030,27 @@ declare const Tabs: {
     onValueChange: onValueChangeProp,
     defaultValue,
     ...props
-  }: TabsProps$1): JSX.Element;
+  }: TabsProps): JSX.Element;
   displayName: string;
 };
 //#endregion
 //#region src/components/Tabs/TabsContent.d.ts
-type TabsContentProps$1 = Pick<TabsContentProps, 'children' | 'value'>;
+type TabsContentProps = {
+  children?: ReactNode;
+  value: string;
+};
 declare const TabsContent: {
   ({
     children,
     value
-  }: TabsContentProps$1): JSX.Element;
+  }: TabsContentProps): JSX.Element;
   displayName: string;
 };
 //#endregion
 //#region src/components/Tabs/TabsList.d.ts
-type TabsListProps$1 = Pick<TabsListProps, 'aria-label'> & PropsWithChildren<{
+type TabsListProps = {
+  'aria-label'?: string;
+} & PropsWithChildren<{
   fullWidth?: boolean;
 }>;
 declare const TabsList: {
@@ -5001,12 +5058,15 @@ declare const TabsList: {
     children,
     fullWidth,
     ...props
-  }: TabsListProps$1): JSX.Element;
+  }: TabsListProps): JSX.Element;
   displayName: string;
 };
 //#endregion
 //#region src/components/Tabs/TabsTrigger.d.ts
-type BaseProps = Pick<TabsTriggerProps, '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" />`
@@ -5037,8 +5097,8 @@ type NoIcon = {
   label?: ReactNode | string;
   'aria-label'?: never;
 };
-type TabsTriggerProps$1 = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
-declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps$1 & react.RefAttributes<HTMLButtonElement>>;
+type TabsTriggerProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
+declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 //#region src/components/Tag/Tag.d.ts
 type TagProps = ComponentPropsWithoutRef<'div'> & {