@wistia/ui 0.4.4 → 0.4.5-beta.29a2dc1f.0bf9afa

package/dist/index.d.mts

@@ -56,6 +56,25 @@ declare const useMq: () => MediaQueryBooleans;
 type MediaQueryLabels = keyof MediaQueryBooleans;
 declare const useActiveMq: () => MediaQueryLabels[];
 
+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;
+
+type KeyFilterPredicate = (evt: KeyboardEvent) => boolean;
+type KeyFilter = KeyFilterPredicate | boolean | string | null | undefined;
+type EventHandler = (event: KeyboardEvent) => unknown;
+type UseKeyOptions = {
+    eventName?: string;
+    eventTarget?: Parameters<typeof useEvent>[2];
+    eventOptions?: Parameters<typeof useEvent>[3];
+};
+declare const useKey: (key: KeyFilter, eventHandler: EventHandler, options?: UseKeyOptions, dependencies?: unknown[]) => void;
+
+type AriaLiveContextType = {
+    announce: (message: string, politeness?: 'assertive' | 'polite') => void;
+};
+declare const useAriaLive: () => AriaLiveContextType;
+
 declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow", "vendor-hubspot", "vendor-marketo", "vendor-pardot"];
 type ColorSchemeTypes = (typeof colorSchemeOptions)[number];
 type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
@@ -259,11 +278,6 @@ declare const useWindowSize: (interval?: number) => {
     height: number;
 };
 
-type AriaLiveContextType = {
-    announce: (message: string, politeness?: 'assertive' | 'polite') => void;
-};
-declare const useAriaLive: () => AriaLiveContextType;
-
 type ActionButtonProps = {
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -505,6 +519,36 @@ declare const Box: {
     displayName: string;
 };
 
+type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Should be at least one `Breadcrumb` component
+     */
+    children: ReactNode;
+};
+/**
+ * Used to display a screens's location within a hierarchical structure
+ */
+declare const Breadcrumbs: {
+    ({ children, ...props }: BreadcrumbsProps): JSX.Element;
+    displayName: string;
+};
+
+type BreadcrumbProps = {
+    /**
+     * An [Icon](../?path=/docs/components-icon--docs) to show at the beginning of the breadcrumb
+     * */
+    icon?: ButtonAsLinkProps['leftIcon'];
+    /**
+     * The text of the breadcrumb link
+     */
+    children: ReactNode;
+    /**
+     * The link to the page of the breadcrumb
+     */
+    href: string;
+};
+declare const Breadcrumb: ({ icon, href, children }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
+
 type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Align buttons to the left or right of their container
@@ -2118,34 +2162,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Should be at least one `Breadcrumb` component
-     */
-    children: ReactNode;
-};
-/**
- * Used to display a screens's location within a hierarchical structure
- */
-declare const Breadcrumbs: {
-    ({ children, ...props }: BreadcrumbsProps): JSX.Element;
-    displayName: string;
-};
-
-type BreadcrumbProps = {
-    /**
-     * An [Icon](../?path=/docs/components-icon--docs) to show at the beginning of the breadcrumb
-     * */
-    icon?: ButtonAsLinkProps['leftIcon'];
-    /**
-     * The text of the breadcrumb link
-     */
-    children: ReactNode;
-    /**
-     * The link to the page of the breadcrumb
-     */
-    href: string;
-};
-declare const Breadcrumb: ({ icon, href, children }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
-
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, 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, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, 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, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -56,6 +56,25 @@ declare const useMq: () => MediaQueryBooleans;
 type MediaQueryLabels = keyof MediaQueryBooleans;
 declare const useActiveMq: () => MediaQueryLabels[];
 
+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;
+
+type KeyFilterPredicate = (evt: KeyboardEvent) => boolean;
+type KeyFilter = KeyFilterPredicate | boolean | string | null | undefined;
+type EventHandler = (event: KeyboardEvent) => unknown;
+type UseKeyOptions = {
+    eventName?: string;
+    eventTarget?: Parameters<typeof useEvent>[2];
+    eventOptions?: Parameters<typeof useEvent>[3];
+};
+declare const useKey: (key: KeyFilter, eventHandler: EventHandler, options?: UseKeyOptions, dependencies?: unknown[]) => void;
+
+type AriaLiveContextType = {
+    announce: (message: string, politeness?: 'assertive' | 'polite') => void;
+};
+declare const useAriaLive: () => AriaLiveContextType;
+
 declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow", "vendor-hubspot", "vendor-marketo", "vendor-pardot"];
 type ColorSchemeTypes = (typeof colorSchemeOptions)[number];
 type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
@@ -259,11 +278,6 @@ declare const useWindowSize: (interval?: number) => {
     height: number;
 };
 
-type AriaLiveContextType = {
-    announce: (message: string, politeness?: 'assertive' | 'polite') => void;
-};
-declare const useAriaLive: () => AriaLiveContextType;
-
 type ActionButtonProps = {
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -505,6 +519,36 @@ declare const Box: {
     displayName: string;
 };
 
+type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Should be at least one `Breadcrumb` component
+     */
+    children: ReactNode;
+};
+/**
+ * Used to display a screens's location within a hierarchical structure
+ */
+declare const Breadcrumbs: {
+    ({ children, ...props }: BreadcrumbsProps): JSX.Element;
+    displayName: string;
+};
+
+type BreadcrumbProps = {
+    /**
+     * An [Icon](../?path=/docs/components-icon--docs) to show at the beginning of the breadcrumb
+     * */
+    icon?: ButtonAsLinkProps['leftIcon'];
+    /**
+     * The text of the breadcrumb link
+     */
+    children: ReactNode;
+    /**
+     * The link to the page of the breadcrumb
+     */
+    href: string;
+};
+declare const Breadcrumb: ({ icon, href, children }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
+
 type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Align buttons to the left or right of their container
@@ -2118,34 +2162,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Should be at least one `Breadcrumb` component
-     */
-    children: ReactNode;
-};
-/**
- * Used to display a screens's location within a hierarchical structure
- */
-declare const Breadcrumbs: {
-    ({ children, ...props }: BreadcrumbsProps): JSX.Element;
-    displayName: string;
-};
-
-type BreadcrumbProps = {
-    /**
-     * An [Icon](../?path=/docs/components-icon--docs) to show at the beginning of the breadcrumb
-     * */
-    icon?: ButtonAsLinkProps['leftIcon'];
-    /**
-     * The text of the breadcrumb link
-     */
-    children: ReactNode;
-    /**
-     * The link to the page of the breadcrumb
-     */
-    href: string;
-};
-declare const Breadcrumb: ({ icon, href, children }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
-
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, 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, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, 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, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };