@wistia/ui 0.6.39 → 0.6.40-beta.d3a0b63e.a55d26a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +768 -279
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +88 -1
- package/dist/index.d.ts +88 -1
- package/dist/index.mjs +542 -56
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -8,6 +8,7 @@ import * as react_router from 'react-router';
|
|
|
8
8
|
import { LinkProps as LinkProps$1 } from 'react-router-dom';
|
|
9
9
|
import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
|
|
10
10
|
import * as styled_components from 'styled-components';
|
|
11
|
+
import { FlattenSimpleInterpolation } from 'styled-components';
|
|
11
12
|
import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
|
|
12
13
|
import { PopoverContentProps } from '@radix-ui/react-popover';
|
|
13
14
|
import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
|
|
@@ -393,6 +394,12 @@ declare const useWindowSize: (interval?: number) => {
|
|
|
393
394
|
height: number;
|
|
394
395
|
};
|
|
395
396
|
|
|
397
|
+
type UseFocusTrapOptions = {
|
|
398
|
+
disableAriaHider?: boolean;
|
|
399
|
+
focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
|
|
400
|
+
};
|
|
401
|
+
declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
|
|
402
|
+
|
|
396
403
|
type ActionButtonProps = {
|
|
397
404
|
/**
|
|
398
405
|
* @override
|
|
@@ -3031,4 +3038,84 @@ declare const WistiaLogo: {
|
|
|
3031
3038
|
displayName: string;
|
|
3032
3039
|
};
|
|
3033
3040
|
|
|
3034
|
-
|
|
3041
|
+
declare const gradients: {
|
|
3042
|
+
defaultDarkOne: FlattenSimpleInterpolation;
|
|
3043
|
+
defaultDarkTwo: FlattenSimpleInterpolation;
|
|
3044
|
+
defaultLightOne: FlattenSimpleInterpolation;
|
|
3045
|
+
defaultLightTwo: FlattenSimpleInterpolation;
|
|
3046
|
+
defaultMidOne: FlattenSimpleInterpolation;
|
|
3047
|
+
defaultMidTwo: FlattenSimpleInterpolation;
|
|
3048
|
+
green: FlattenSimpleInterpolation;
|
|
3049
|
+
greenWithPop: FlattenSimpleInterpolation;
|
|
3050
|
+
pink: FlattenSimpleInterpolation;
|
|
3051
|
+
pinkWithPop: FlattenSimpleInterpolation;
|
|
3052
|
+
playfulGradientOne: FlattenSimpleInterpolation;
|
|
3053
|
+
playfulGradientTwo: FlattenSimpleInterpolation;
|
|
3054
|
+
purple: FlattenSimpleInterpolation;
|
|
3055
|
+
purpleWithPop: FlattenSimpleInterpolation;
|
|
3056
|
+
yellow: FlattenSimpleInterpolation;
|
|
3057
|
+
yellowWithPop: FlattenSimpleInterpolation;
|
|
3058
|
+
};
|
|
3059
|
+
type GradientNameType = keyof typeof gradients;
|
|
3060
|
+
|
|
3061
|
+
type ThumbnailProps = ComponentPropsWithoutRef<'div'> & {
|
|
3062
|
+
/**
|
|
3063
|
+
* The type of gradient to show either behind the icon or when there is no thumbnail image
|
|
3064
|
+
*/
|
|
3065
|
+
gradientBackground?: GradientNameType;
|
|
3066
|
+
/**
|
|
3067
|
+
* Width of the thumbnail. By default, the thumbnail will grow to fit its container.
|
|
3068
|
+
*/
|
|
3069
|
+
width?: string;
|
|
3070
|
+
/**
|
|
3071
|
+
* The desired display of the thumbnail, either wide or square
|
|
3072
|
+
*/
|
|
3073
|
+
thumbnailImageType?: 'square' | 'wide' | undefined;
|
|
3074
|
+
/**
|
|
3075
|
+
* The URL of the thumbnail image to display
|
|
3076
|
+
*/
|
|
3077
|
+
thumbnailUrl: string | null;
|
|
3078
|
+
/**
|
|
3079
|
+
* Children to render inside the thumbnail; must be a `ThumbnailOverlay` component
|
|
3080
|
+
*/
|
|
3081
|
+
children?: ReactNode;
|
|
3082
|
+
};
|
|
3083
|
+
declare const Thumbnail: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
3084
|
+
/**
|
|
3085
|
+
* The type of gradient to show either behind the icon or when there is no thumbnail image
|
|
3086
|
+
*/
|
|
3087
|
+
gradientBackground?: GradientNameType;
|
|
3088
|
+
/**
|
|
3089
|
+
* Width of the thumbnail. By default, the thumbnail will grow to fit its container.
|
|
3090
|
+
*/
|
|
3091
|
+
width?: string;
|
|
3092
|
+
/**
|
|
3093
|
+
* The desired display of the thumbnail, either wide or square
|
|
3094
|
+
*/
|
|
3095
|
+
thumbnailImageType?: "square" | "wide" | undefined;
|
|
3096
|
+
/**
|
|
3097
|
+
* The URL of the thumbnail image to display
|
|
3098
|
+
*/
|
|
3099
|
+
thumbnailUrl: string | null;
|
|
3100
|
+
/**
|
|
3101
|
+
* Children to render inside the thumbnail; must be a `ThumbnailOverlay` component
|
|
3102
|
+
*/
|
|
3103
|
+
children?: ReactNode;
|
|
3104
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
3105
|
+
|
|
3106
|
+
type ThumbnailOverlayProps = {
|
|
3107
|
+
/**
|
|
3108
|
+
* Icon to display on the left side of the overlay
|
|
3109
|
+
*/
|
|
3110
|
+
icon?: JSX.Element | undefined;
|
|
3111
|
+
/**
|
|
3112
|
+
* Text content to display in the overlay
|
|
3113
|
+
*/
|
|
3114
|
+
label: string;
|
|
3115
|
+
};
|
|
3116
|
+
declare const ThumbnailOverlay: {
|
|
3117
|
+
({ icon, label, ...otherProps }: ThumbnailOverlayProps): JSX.Element;
|
|
3118
|
+
displayName: string;
|
|
3119
|
+
};
|
|
3120
|
+
|
|
3121
|
+
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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, ThumbnailOverlay, type ThumbnailOverlayProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ import * as react_router from 'react-router';
|
|
|
8
8
|
import { LinkProps as LinkProps$1 } from 'react-router-dom';
|
|
9
9
|
import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
|
|
10
10
|
import * as styled_components from 'styled-components';
|
|
11
|
+
import { FlattenSimpleInterpolation } from 'styled-components';
|
|
11
12
|
import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
|
|
12
13
|
import { PopoverContentProps } from '@radix-ui/react-popover';
|
|
13
14
|
import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
|
|
@@ -393,6 +394,12 @@ declare const useWindowSize: (interval?: number) => {
|
|
|
393
394
|
height: number;
|
|
394
395
|
};
|
|
395
396
|
|
|
397
|
+
type UseFocusTrapOptions = {
|
|
398
|
+
disableAriaHider?: boolean;
|
|
399
|
+
focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
|
|
400
|
+
};
|
|
401
|
+
declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
|
|
402
|
+
|
|
396
403
|
type ActionButtonProps = {
|
|
397
404
|
/**
|
|
398
405
|
* @override
|
|
@@ -3031,4 +3038,84 @@ declare const WistiaLogo: {
|
|
|
3031
3038
|
displayName: string;
|
|
3032
3039
|
};
|
|
3033
3040
|
|
|
3034
|
-
|
|
3041
|
+
declare const gradients: {
|
|
3042
|
+
defaultDarkOne: FlattenSimpleInterpolation;
|
|
3043
|
+
defaultDarkTwo: FlattenSimpleInterpolation;
|
|
3044
|
+
defaultLightOne: FlattenSimpleInterpolation;
|
|
3045
|
+
defaultLightTwo: FlattenSimpleInterpolation;
|
|
3046
|
+
defaultMidOne: FlattenSimpleInterpolation;
|
|
3047
|
+
defaultMidTwo: FlattenSimpleInterpolation;
|
|
3048
|
+
green: FlattenSimpleInterpolation;
|
|
3049
|
+
greenWithPop: FlattenSimpleInterpolation;
|
|
3050
|
+
pink: FlattenSimpleInterpolation;
|
|
3051
|
+
pinkWithPop: FlattenSimpleInterpolation;
|
|
3052
|
+
playfulGradientOne: FlattenSimpleInterpolation;
|
|
3053
|
+
playfulGradientTwo: FlattenSimpleInterpolation;
|
|
3054
|
+
purple: FlattenSimpleInterpolation;
|
|
3055
|
+
purpleWithPop: FlattenSimpleInterpolation;
|
|
3056
|
+
yellow: FlattenSimpleInterpolation;
|
|
3057
|
+
yellowWithPop: FlattenSimpleInterpolation;
|
|
3058
|
+
};
|
|
3059
|
+
type GradientNameType = keyof typeof gradients;
|
|
3060
|
+
|
|
3061
|
+
type ThumbnailProps = ComponentPropsWithoutRef<'div'> & {
|
|
3062
|
+
/**
|
|
3063
|
+
* The type of gradient to show either behind the icon or when there is no thumbnail image
|
|
3064
|
+
*/
|
|
3065
|
+
gradientBackground?: GradientNameType;
|
|
3066
|
+
/**
|
|
3067
|
+
* Width of the thumbnail. By default, the thumbnail will grow to fit its container.
|
|
3068
|
+
*/
|
|
3069
|
+
width?: string;
|
|
3070
|
+
/**
|
|
3071
|
+
* The desired display of the thumbnail, either wide or square
|
|
3072
|
+
*/
|
|
3073
|
+
thumbnailImageType?: 'square' | 'wide' | undefined;
|
|
3074
|
+
/**
|
|
3075
|
+
* The URL of the thumbnail image to display
|
|
3076
|
+
*/
|
|
3077
|
+
thumbnailUrl: string | null;
|
|
3078
|
+
/**
|
|
3079
|
+
* Children to render inside the thumbnail; must be a `ThumbnailOverlay` component
|
|
3080
|
+
*/
|
|
3081
|
+
children?: ReactNode;
|
|
3082
|
+
};
|
|
3083
|
+
declare const Thumbnail: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
3084
|
+
/**
|
|
3085
|
+
* The type of gradient to show either behind the icon or when there is no thumbnail image
|
|
3086
|
+
*/
|
|
3087
|
+
gradientBackground?: GradientNameType;
|
|
3088
|
+
/**
|
|
3089
|
+
* Width of the thumbnail. By default, the thumbnail will grow to fit its container.
|
|
3090
|
+
*/
|
|
3091
|
+
width?: string;
|
|
3092
|
+
/**
|
|
3093
|
+
* The desired display of the thumbnail, either wide or square
|
|
3094
|
+
*/
|
|
3095
|
+
thumbnailImageType?: "square" | "wide" | undefined;
|
|
3096
|
+
/**
|
|
3097
|
+
* The URL of the thumbnail image to display
|
|
3098
|
+
*/
|
|
3099
|
+
thumbnailUrl: string | null;
|
|
3100
|
+
/**
|
|
3101
|
+
* Children to render inside the thumbnail; must be a `ThumbnailOverlay` component
|
|
3102
|
+
*/
|
|
3103
|
+
children?: ReactNode;
|
|
3104
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
3105
|
+
|
|
3106
|
+
type ThumbnailOverlayProps = {
|
|
3107
|
+
/**
|
|
3108
|
+
* Icon to display on the left side of the overlay
|
|
3109
|
+
*/
|
|
3110
|
+
icon?: JSX.Element | undefined;
|
|
3111
|
+
/**
|
|
3112
|
+
* Text content to display in the overlay
|
|
3113
|
+
*/
|
|
3114
|
+
label: string;
|
|
3115
|
+
};
|
|
3116
|
+
declare const ThumbnailOverlay: {
|
|
3117
|
+
({ icon, label, ...otherProps }: ThumbnailOverlayProps): JSX.Element;
|
|
3118
|
+
displayName: string;
|
|
3119
|
+
};
|
|
3120
|
+
|
|
3121
|
+
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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, ThumbnailOverlay, type ThumbnailOverlayProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };
|