@wistia/ui 0.22.3 → 0.22.4-beta.751eafb4.c632f00

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";
 
@@ -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, "fullWidth" | "isLoading" | "leftIcon" | "rightIcon" | "size" | "unstyled" | "variant">, "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, "fullWidth" | "isLoading" | "leftIcon" | "rightIcon" | "size" | "unstyled" | "variant">, "ref">) & _$react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 //#endregion
 //#region src/components/Avatar/Avatar.d.ts
 type AvatarInstanceType = 'image' | 'initials';
@@ -1230,7 +1224,7 @@ declare const Center: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTM
 //#endregion
 //#region src/components/Checkbox/Checkbox.d.ts
 type CheckboxSizeType = 'lg' | 'md' | 'sm';
-declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "onChange" | "size" | "hideLabel"> & {
+declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "size" | "onChange" | "hideLabel"> & {
   /**
    * Indicates the state of the checkbox
    */
@@ -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
@@ -1637,7 +1631,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.
    */
@@ -1645,12 +1639,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 & {
@@ -1760,6 +1754,7 @@ type ColorPickerProps = PropsWithChildren<{
    */
   value: string;
 }>;
+type ColorPickerComponentProps = ComponentPropsWithoutRef<'div'> & ColorPickerProps;
 /**
  * A composable color picker built from low-level building blocks. Choose the
  * parts you need, leave out the ones you don't, and include any custom UI
@@ -1777,7 +1772,7 @@ declare const ColorPicker: {
     opacityForContrastCalculation,
     onValueChange,
     value
-  }: ColorPickerProps): JSX.Element;
+  }: ColorPickerComponentProps): JSX.Element;
   displayName: string;
 };
 //#endregion
@@ -1808,15 +1803,13 @@ declare const ColorPickerSection: {
 };
 //#endregion
 //#region src/components/ColorPicker/ColorPickerTrigger.d.ts
-type ColorPickerTriggerProps = PropsWithChildren;
+type ColorPickerTriggerProps = ComponentPropsWithoutRef<'button'>;
 /**
  * The button that toggles the color picker popover open and closed. By default
  * it renders a swatch and hex label for the current color; pass custom children
  * to replace that content.
  */
-declare const ColorPickerTrigger: _$react.ForwardRefExoticComponent<{
-  children?: _$react.ReactNode | undefined;
-} & _$react.RefAttributes<HTMLButtonElement>>;
+declare const ColorPickerTrigger: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 //#region src/components/ColorPicker/ContrastControls.d.ts
 type ContrastControlsProps = object;
@@ -3090,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
    */
@@ -3108,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
    */
@@ -3131,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.
@@ -3147,6 +3147,8 @@ declare const PreviewCard: {
     closeDelay,
     colorScheme,
     forceOpen,
+    side,
+    align,
     ...props
   }: PreviewCardProps): JSX.Element;
   displayName: string;
@@ -3265,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" | "rightIcon" | "disabled" | "value" | "autoSelect"> & {
+declare const InputClickToCopy: _$react.ForwardRefExoticComponent<Omit<InputProps, "rightIcon" | "disabled" | "type" | "value" | "autoSelect"> & {
   /**
    * When disabled, the copy action will not be triggered
    */
@@ -3294,7 +3296,7 @@ type InputPasswordProps = Omit<InputProps, 'leftIcon' | 'monospace' | 'rightIcon
 /**
  * A password input component with a toggle button to show or hide the password text.
  */
-declare const InputPassword: _$react.ForwardRefExoticComponent<Omit<InputProps, "type" | "leftIcon" | "rightIcon" | "monospace"> & {
+declare const InputPassword: _$react.ForwardRefExoticComponent<Omit<InputProps, "leftIcon" | "rightIcon" | "type" | "monospace"> & {
   /**
    * Set the disabled state of the input
    */
@@ -3475,10 +3477,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
    */
@@ -3600,7 +3598,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;
@@ -3622,7 +3620,16 @@ declare const MenuItem: _$react.ForwardRefExoticComponent<(Omit<DropdownMenuItem
    * 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;
@@ -3658,7 +3665,16 @@ declare const MenuItem: _$react.ForwardRefExoticComponent<(Omit<DropdownMenuItem
    * 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;
@@ -3700,6 +3716,15 @@ declare const MenuItem: _$react.ForwardRefExoticComponent<(Omit<DropdownMenuItem
    * 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: SyntheticEvent) => void;
 }, "ref">) & _$react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 //#endregion
 //#region src/components/Menu/MenuItemLabel.d.ts
@@ -3725,15 +3750,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: {
   ({
@@ -3744,7 +3773,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)
    */
@@ -3752,7 +3781,7 @@ type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
   /**
    * The value of the item
    */
-  value: DropdownMenuRadioItemProps['value'];
+  value: string;
   /**
    * @ignore
    */
@@ -3765,6 +3794,10 @@ type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
    * @ignore
    */
   ref?: never;
+  /**
+   * Callback when the item is selected
+   */
+  onSelect?: (event: SyntheticEvent) => void;
 };
 declare const RadioMenuItem: {
   ({
@@ -3777,7 +3810,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)
@@ -3799,6 +3832,10 @@ type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps
    * @ignore
    */
   ref?: never;
+  /**
+   * Callback when the item is selected
+   */
+  onSelect?: (event: SyntheticEvent) => void;
 };
 declare const CheckboxMenuItem: {
   ({
@@ -4043,8 +4080,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
    */
@@ -4068,13 +4104,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;
   /**
@@ -4086,6 +4122,18 @@ 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';
+  /**
+   * Whether the trigger should be treated as a native button (default: true)
+   */
+  nativeButton?: boolean;
 };
 /**
  * Displays rich content in a portal, triggered by a button.
@@ -4104,6 +4152,9 @@ declare const Popover: {
     isAnimated,
     colorScheme,
     style,
+    side,
+    align,
+    nativeButton,
     ...props
   }: PopoverProps): JSX.Element;
   displayName: string;
@@ -4201,7 +4252,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" | "size" | "value" | "hideLabel"> & {
+declare const Radio: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "size" | "value" | "onChange" | "hideLabel"> & {
   /**
    * Indicates the state of the radio
    */
@@ -4463,7 +4514,7 @@ declare const ScrollArea: _$react.ForwardRefExoticComponent<HTMLAttributes<HTMLD
 } & _$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
    */
@@ -4492,7 +4543,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 = {
@@ -4677,7 +4728,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
    */
@@ -4697,7 +4748,7 @@ declare const Slider: {
     max,
     min,
     onChange,
-    onValueCommit,
+    onValueCommitted,
     step,
     value,
     "data-testid": dataTestId,
@@ -4984,7 +5035,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,
@@ -4992,22 +5048,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: {
@@ -5015,12 +5076,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" />`
@@ -5051,8 +5115,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'> & {