@wistia/ui 0.5.7 → 0.6.0

package/dist/index.d.mts

@@ -5,6 +5,7 @@ import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
 import * as styled_components from 'styled-components';
 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';
 
 type UIProviderProps = {
@@ -622,13 +623,18 @@ type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
      * Force ButtonGroup to fill the width of it's container
      */
     fullWidth?: boolean;
+    /**
+     * If true, the button group will collapse to a single column on small screens
+     * and the buttons will be stacked on top of each other.
+     */
+    collapseOnSmallScreens?: boolean;
 };
 /**
  * ButtonGroup is a layout component that groups buttons together,
  * with a standardized gap between them.
  */
 declare const ButtonGroup: {
-    ({ children, align, fullWidth, ...otherProps }: ButtonGroupProps): JSX.Element | null;
+    ({ children, align, fullWidth, collapseOnSmallScreens, ...otherProps }: ButtonGroupProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -1913,6 +1919,45 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     width?: string;
 } & react.RefAttributes<HTMLDivElement>>;
 
+type ControlledPopoverProps = {
+    /**
+     * Is the popover open.
+     * Must be used with `onOpenChange`.
+     * */
+    isOpen: boolean;
+    /** When an attempt to toggle the popover is triggered.
+     *  Must be used with `isOpen`.
+     */
+    onOpenChange: (isOpen: boolean) => void;
+};
+type UncontrolledPopoverProps = {
+    isOpen?: never;
+    onOpenChange?: never;
+};
+type PopoverControlProps = ControlledPopoverProps | UncontrolledPopoverProps;
+type ContentProps = Omit<PopoverContentProps, 'alignOffset' | 'arrowPadding' | 'asChild' | 'collisionPadding' | 'hideWhenDetached' | 'sideOffset' | 'updatePositionStrategy'>;
+type PopoverProps = ContentProps & PopoverControlProps & {
+    /**
+     * The content of the popover
+     */
+    children: ReactNode;
+    /**
+     * Determines if the close button is visible (if false, `esc` will still close the Modal)
+     */
+    hideCloseButton?: boolean;
+    /**
+     * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
+     * */
+    trigger: JSX.Element;
+};
+/**
+ * Displays rich content in a portal, triggered by a button.
+ */
+declare const Popover: {
+    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, ...props }: PopoverProps): JSX.Element;
+    displayName: string;
+};
+
 type RadioProps = ComponentPropsWithoutRef<'input'> & {
     /**
      * Indicates the state of the radio
@@ -2405,4 +2450,4 @@ type SelectOptionGroupProps = {
 };
 declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
 import * as styled_components from 'styled-components';
 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';
 
 type UIProviderProps = {
@@ -622,13 +623,18 @@ type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
      * Force ButtonGroup to fill the width of it's container
      */
     fullWidth?: boolean;
+    /**
+     * If true, the button group will collapse to a single column on small screens
+     * and the buttons will be stacked on top of each other.
+     */
+    collapseOnSmallScreens?: boolean;
 };
 /**
  * ButtonGroup is a layout component that groups buttons together,
  * with a standardized gap between them.
  */
 declare const ButtonGroup: {
-    ({ children, align, fullWidth, ...otherProps }: ButtonGroupProps): JSX.Element | null;
+    ({ children, align, fullWidth, collapseOnSmallScreens, ...otherProps }: ButtonGroupProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -1913,6 +1919,45 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     width?: string;
 } & react.RefAttributes<HTMLDivElement>>;
 
+type ControlledPopoverProps = {
+    /**
+     * Is the popover open.
+     * Must be used with `onOpenChange`.
+     * */
+    isOpen: boolean;
+    /** When an attempt to toggle the popover is triggered.
+     *  Must be used with `isOpen`.
+     */
+    onOpenChange: (isOpen: boolean) => void;
+};
+type UncontrolledPopoverProps = {
+    isOpen?: never;
+    onOpenChange?: never;
+};
+type PopoverControlProps = ControlledPopoverProps | UncontrolledPopoverProps;
+type ContentProps = Omit<PopoverContentProps, 'alignOffset' | 'arrowPadding' | 'asChild' | 'collisionPadding' | 'hideWhenDetached' | 'sideOffset' | 'updatePositionStrategy'>;
+type PopoverProps = ContentProps & PopoverControlProps & {
+    /**
+     * The content of the popover
+     */
+    children: ReactNode;
+    /**
+     * Determines if the close button is visible (if false, `esc` will still close the Modal)
+     */
+    hideCloseButton?: boolean;
+    /**
+     * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
+     * */
+    trigger: JSX.Element;
+};
+/**
+ * Displays rich content in a portal, triggered by a button.
+ */
+declare const Popover: {
+    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, ...props }: PopoverProps): JSX.Element;
+    displayName: string;
+};
+
 type RadioProps = ComponentPropsWithoutRef<'input'> & {
     /**
      * Indicates the state of the radio
@@ -2405,4 +2450,4 @@ type SelectOptionGroupProps = {
 };
 declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };