@wistia/ui 0.8.12 → 0.8.13-beta.098b59ab.c299c8a

package/dist/index.d.mts

@@ -86,6 +86,14 @@ type UseBooleanReturn = [
 ];
 declare const useBoolean: (initialValue?: boolean) => UseBooleanReturn;
 
+declare const useClipboard: (textToCopy: string, timeout?: number) => [() => Promise<void>, boolean, boolean];
+
+type UseFocusTrapOptions = {
+    disableAriaHider?: boolean;
+    focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
+};
+declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
+
 type AddEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 type RemoveEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 declare const useEvent: <T extends Event>(eventName: Parameters<AddEventListenerType>[0], eventHandler: (event: T) => unknown, eventTarget?: unknown, eventOptions?: Parameters<RemoveEventListenerType>[2]) => void;
@@ -105,9 +113,6 @@ declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialVa
 
 declare const useLockBodyScroll: (locked: boolean) => void;
 
-type EventType = 'focusin' | 'focusout' | 'mousedown' | 'mouseup' | 'touchend' | 'touchstart';
-declare const useOnClickOutside: (ref: RefObject<HTMLElement | null | undefined>, handler: (event: Event) => unknown, eventTypes?: EventType | EventType[]) => void;
-
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -124,6 +129,9 @@ declare const useMq: () => MediaQueryBooleans;
 type MediaQueryLabels = keyof MediaQueryBooleans;
 declare const useActiveMq: () => MediaQueryLabels[];
 
+type EventType = 'focusin' | 'focusout' | 'mousedown' | 'mouseup' | 'touchend' | 'touchstart';
+declare const useOnClickOutside: (ref: RefObject<HTMLElement | null | undefined>, handler: (event: Event) => unknown, eventTypes?: EventType | EventType[]) => void;
+
 declare const colorSchemeOptions: readonly ["default", "inherit", "error", "info", "success", "warning", "blue", "green", "orange", "pink", "purple", "yellow", "vendor-hubspot", "vendor-marketo", "vendor-pardot"];
 type ColorSchemeTypes = (typeof colorSchemeOptions)[number];
 type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
@@ -395,12 +403,6 @@ declare const useWindowSize: (interval?: number) => {
     height: number;
 };
 
-type UseFocusTrapOptions = {
-    disableAriaHider?: boolean;
-    focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
-};
-declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
-
 type ActionButtonProps = {
     /**
      * @override
@@ -800,6 +802,8 @@ declare const ButtonGroup: {
     displayName: string;
 };
 
+type BorderRadius = 'border-radius-00' | 'border-radius-01' | 'border-radius-02' | 'border-radius-03' | 'border-radius-04' | 'border-radius-05' | 'border-radius-rounded';
+
 type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
     /**
      * Content to be rendered inside the Card component
@@ -822,9 +826,9 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      */
     border?: boolean;
     /**
-     * Sets the flex direction of the card's contents.
+     * Border radius to apply to the Card
      */
-    direction?: BoxProps['direction'];
+    borderRadius?: BorderRadius;
     /**
      * Specifies the gaps (gutters) between rows and columns
      */
@@ -853,6 +857,10 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      * @ignore
      */
     basis?: BoxProps['basis'];
+    /**
+     * @ignore
+     */
+    direction?: BoxProps['direction'];
     /**
      * @ignore
      */
@@ -861,6 +869,10 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      * @ignore
      */
     fillViewport?: BoxProps['fillViewport'];
+    /**
+     * @ignore
+     */
+    flexMode?: BoxProps['flexMode'];
     /**
      * @ignore
      */
@@ -891,7 +903,7 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
  * Cards can be used to visually distinguish content sections. Extends the [Box component.](https://wistia.github.io/vhs/storybook-ui/?path=/docs/components-box--docs)
  */
 declare const Card: {
-    ({ children, paddingSize, gap, direction, colorScheme, prominence, border, height, width, ...props }: CardProps): JSX.Element;
+    ({ children, border, borderRadius, colorScheme, direction, gap, height, paddingSize, prominence, width, ...props }: CardProps): JSX.Element;
     displayName: string;
 };
 
@@ -1665,8 +1677,6 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
-type BorderRadius = 'border-radius-01' | 'border-radius-02' | 'border-radius-03' | 'border-radius-04' | 'border-radius-05' | 'border-radius-rounded';
-
 type ImageProps = ComponentPropsWithoutRef<'img'> & {
     /**
      * Accessible text to apply to the image
@@ -3187,4 +3197,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, 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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };

package/dist/index.d.ts

@@ -86,6 +86,14 @@ type UseBooleanReturn = [
 ];
 declare const useBoolean: (initialValue?: boolean) => UseBooleanReturn;
 
+declare const useClipboard: (textToCopy: string, timeout?: number) => [() => Promise<void>, boolean, boolean];
+
+type UseFocusTrapOptions = {
+    disableAriaHider?: boolean;
+    focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
+};
+declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
+
 type AddEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 type RemoveEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 declare const useEvent: <T extends Event>(eventName: Parameters<AddEventListenerType>[0], eventHandler: (event: T) => unknown, eventTarget?: unknown, eventOptions?: Parameters<RemoveEventListenerType>[2]) => void;
@@ -105,9 +113,6 @@ declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialVa
 
 declare const useLockBodyScroll: (locked: boolean) => void;
 
-type EventType = 'focusin' | 'focusout' | 'mousedown' | 'mouseup' | 'touchend' | 'touchstart';
-declare const useOnClickOutside: (ref: RefObject<HTMLElement | null | undefined>, handler: (event: Event) => unknown, eventTypes?: EventType | EventType[]) => void;
-
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -124,6 +129,9 @@ declare const useMq: () => MediaQueryBooleans;
 type MediaQueryLabels = keyof MediaQueryBooleans;
 declare const useActiveMq: () => MediaQueryLabels[];
 
+type EventType = 'focusin' | 'focusout' | 'mousedown' | 'mouseup' | 'touchend' | 'touchstart';
+declare const useOnClickOutside: (ref: RefObject<HTMLElement | null | undefined>, handler: (event: Event) => unknown, eventTypes?: EventType | EventType[]) => void;
+
 declare const colorSchemeOptions: readonly ["default", "inherit", "error", "info", "success", "warning", "blue", "green", "orange", "pink", "purple", "yellow", "vendor-hubspot", "vendor-marketo", "vendor-pardot"];
 type ColorSchemeTypes = (typeof colorSchemeOptions)[number];
 type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
@@ -395,12 +403,6 @@ declare const useWindowSize: (interval?: number) => {
     height: number;
 };
 
-type UseFocusTrapOptions = {
-    disableAriaHider?: boolean;
-    focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
-};
-declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
-
 type ActionButtonProps = {
     /**
      * @override
@@ -800,6 +802,8 @@ declare const ButtonGroup: {
     displayName: string;
 };
 
+type BorderRadius = 'border-radius-00' | 'border-radius-01' | 'border-radius-02' | 'border-radius-03' | 'border-radius-04' | 'border-radius-05' | 'border-radius-rounded';
+
 type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
     /**
      * Content to be rendered inside the Card component
@@ -822,9 +826,9 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      */
     border?: boolean;
     /**
-     * Sets the flex direction of the card's contents.
+     * Border radius to apply to the Card
      */
-    direction?: BoxProps['direction'];
+    borderRadius?: BorderRadius;
     /**
      * Specifies the gaps (gutters) between rows and columns
      */
@@ -853,6 +857,10 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      * @ignore
      */
     basis?: BoxProps['basis'];
+    /**
+     * @ignore
+     */
+    direction?: BoxProps['direction'];
     /**
      * @ignore
      */
@@ -861,6 +869,10 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      * @ignore
      */
     fillViewport?: BoxProps['fillViewport'];
+    /**
+     * @ignore
+     */
+    flexMode?: BoxProps['flexMode'];
     /**
      * @ignore
      */
@@ -891,7 +903,7 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
  * Cards can be used to visually distinguish content sections. Extends the [Box component.](https://wistia.github.io/vhs/storybook-ui/?path=/docs/components-box--docs)
  */
 declare const Card: {
-    ({ children, paddingSize, gap, direction, colorScheme, prominence, border, height, width, ...props }: CardProps): JSX.Element;
+    ({ children, border, borderRadius, colorScheme, direction, gap, height, paddingSize, prominence, width, ...props }: CardProps): JSX.Element;
     displayName: string;
 };
 
@@ -1665,8 +1677,6 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
-type BorderRadius = 'border-radius-01' | 'border-radius-02' | 'border-radius-03' | 'border-radius-04' | 'border-radius-05' | 'border-radius-rounded';
-
 type ImageProps = ComponentPropsWithoutRef<'img'> & {
     /**
      * Accessible text to apply to the image
@@ -3187,4 +3197,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, 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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };