@wistia/ui 0.0.14 → 0.0.16

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
+import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 
 type UIProviderProps = {
     children: ReactNode;
@@ -89,7 +90,7 @@ declare const Avatar: {
     displayName: string;
 };
 
-declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow"];
+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'> & {
     /**
@@ -345,7 +346,7 @@ type BaseButtonProps = {
      */
     isLoading?: boolean;
     /**
-     * Icon to display on the left side of the button, Must be an instance of [Icon](?path=/docs/ui-components-icon--docs)
+     * Icon to display on the left side of the button, Must be an instance of [Icon](?path=/docs/components-icon--docs)
      */
     leftIcon?: JSX.Element | undefined;
     /**
@@ -370,7 +371,7 @@ type BaseButtonProps = {
      */
     unstyled?: boolean;
     /**
-     * Icon to display on the right side of the button, Must be an instance of [Icon](?path=/docs/ui-components-icon--docs)
+     * Icon to display on the right side of the button, Must be an instance of [Icon](?path=/docs/components-icon--docs)
      */
     rightIcon?: JSX.Element | undefined;
     /**
@@ -383,7 +384,7 @@ type BaseButtonProps = {
     variant?: ButtonVariants;
 };
 type ButtonAsLinkProps = BaseButtonProps & ComponentPropsWithRef<'a'> & {
-    href: string;
+    href: string | undefined;
     children: ReactNode;
     /**
      * This just allows pathrough to beforeAction for link
@@ -433,6 +434,51 @@ declare const ButtonGroup: {
     displayName: string;
 };
 
+type CheckboxProps = Omit<ComponentPropsWithRef<'label'>, 'onChange'> & {
+    /**
+     * Indicates the state of the checkbox
+     */
+    checked?: boolean;
+    /**
+     * Disables checkbox
+     */
+    disabled?: boolean;
+    /**
+     * @ignore
+     * Force a Checkbox into a particular css state (for debugging)
+     */
+    forceState?: 'focus' | 'hover';
+    /**
+     * Optional ID attribute
+     */
+    id?: string | undefined;
+    /**
+     * The label for the checkbox
+     */
+    label?: JSX.Element | string | undefined;
+    /**
+     * The description for the checkbox
+     */
+    description?: JSX.Element | string | undefined;
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string | undefined;
+    /**
+     * Callback function invoked when the checkbox value changes
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Make Input a required element
+     */
+    required?: boolean;
+    /**
+     * The value given as data when submitted with a `name`.
+     */
+    value?: string;
+};
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
 type DividerProps = ComponentPropsWithoutRef<'hr'> & {
     /**
      * Size of the divider. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
@@ -477,6 +523,7 @@ type ComponentProp<C> = {
      *  Render a different element or component
      *
      * @type ElementType | ComponentType
+     * @default 'div'
      */
     renderAs?: C;
 };
@@ -836,8 +883,8 @@ type IconButtonProps = {
     children: JSX.Element;
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
 /**
- * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs),
- * but only accepts an [Icon](?path=/docs/ui-components-icon--docs) as a child.
+ * IconButton behaves like a [Button](?path=/docs/components-button--docs),
+ * but only accepts an [Icon](?path=/docs/components-icon--docs) as a child.
  */
 declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     /**
@@ -898,59 +945,201 @@ declare const Label: {
     displayName: string;
 };
 
-type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
+type ControlledMenuProps = {
     /**
-     * Pass an arbitrary child node
+     * Is the menu open.
+     * Must be used with `onOpenChange`.
+     * */
+    isOpen: boolean;
+    /** When an attempt to toggle the menu is triggered.
+     *  Must be used with `isOpen`.
      */
-    children?: ReactNode;
+    onOpenChange: (isOpen: boolean) => void;
+};
+type UncontrolledMenuProps = {
+    isOpen?: never;
+    onOpenChange?: never;
+};
+type MenuControlProps = ControlledMenuProps | UncontrolledMenuProps;
+type MenuPropsWithDefaultTrigger = {
     /**
-     * Display content _only_ when it's focused.
+     * The label for the trigger element, this is ignored if `trigger` is defined
      */
-    focusable?: boolean;
+    label: string;
+    trigger?: never;
+};
+type MenuPropsWithCustomTrigger = {
+    label?: never;
     /**
-     * The text that will appear to screenreaders but not be displayed on screen
-     * (alternatively you can pass children)
+     * Replace the default trigger with a custom button or other element
+     * */
+    trigger: ReactNode;
+};
+type MenuTriggerProps = MenuPropsWithCustomTrigger | MenuPropsWithDefaultTrigger;
+type BaseMenuProps = MenuControlProps & MenuTriggerProps & {
+    /**
+     * The position of the Menu
      */
-    text?: ReactNode;
+    align?: 'center' | 'end' | 'start';
+    /**
+     * The content of the menu.
+     * Should be made up of `MenuItem`, `SubMenu`, `Divider`, or other subcomponents listed
+     */
+    children: ReactNode;
+    /**
+     * Callback for when the user clicks or focuses outside of the menu
+     */
+    onInteractOutside?: DropdownMenuContentProps['onInteractOutside'];
+    /**
+     * Props to pass to the trigger component, the default trigger is Button
+     */
+    triggerProps?: ButtonProps;
 };
+type MenuProps = BaseMenuProps & {};
 /**
- * Used to hide content from the visual client, but keep it readable for screen readers.
+ * Displays a menu to the users with a set of actions.
  */
-declare const ScreenReaderOnly: {
-    ({ text, children, focusable, ...otherProps }: ScreenReaderOnlyProps): react_jsx_runtime.JSX.Element;
+declare const Menu: {
+    ({ align, children, trigger, label, isOpen, triggerProps, onOpenChange, onInteractOutside, ...props }: MenuProps): JSX.Element;
     displayName: string;
 };
 
-type Spacings = 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09' | 'space-10' | 'space-11';
+type MenuLabelProps = {
+    /**
+     * The text of the label
+     */
+    children: ReactNode | string;
+};
+declare const MenuLabel: {
+    ({ children, ...props }: MenuLabelProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-type StackProps = {
+type SubMenuProps = {
     /**
-     * Optional children
+     * The label of the submenu
      */
-    children?: ReactNode | undefined;
+    label: ReactNode;
     /**
-     * The gap between each item in the stack. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     * TODO: add link to Spacing docs
+     * The description of the submenu
      */
-    gap?: Spacings;
+    description?: ReactNode;
     /**
-     * Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
-     * The default behavior is `vertical`. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * The menu items that will appear in this submenu
      */
-    direction?: 'horizontal' | 'vertical';
-    renderAs?: ElementType$1;
+    children: ReactNode[];
+    /**
+     * Callback when the submenu is opened or closed
+     */
+    onOpenChange?: (open: boolean) => void;
 };
-/**
- * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
- * This allows for layouting children in a consistent way without needing to manually add margins or padding.
- */
-declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, keyof StackProps> & {
-    renderAs?: any;
-} & StackProps & {
-    ref?: any;
-}) | (StackProps & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
-})>, never> & Record<string, never>;
+declare const SubMenu: {
+    ({ label, description, children, onOpenChange, ...props }: SubMenuProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type MenuItemButtonProps = ButtonProps & {
+    /**
+     *  Pre-defined visual treatments for the menu item
+     */
+    appearance?: 'dangerous' | 'default' | 'gated';
+    /**
+     * A badge to display on the MenuItem
+     */
+    badge?: JSX.Element;
+    /**
+     * The content of the MenuItem
+     */
+    children?: ReactNode;
+    /**
+     * Keyboard shortcut to bind to the MenuItem. Won't be shown if `badge` is set.
+     * *Note:* This is just visual, it doesn't actually bind the key command.
+     */
+    command?: ReactNode;
+    /**
+     * Icon to show before the MenuItem text. Ignored if children is provided or if `appearance` is `gated`
+     */
+    icon?: ButtonProps['leftIcon'];
+    /**
+     * @ignore
+     */
+    leftIcon?: ButtonProps['leftIcon'];
+    /**
+     * @ignore
+     */
+    rightIcon?: ButtonProps['rightIcon'];
+    /**
+     * @ignore
+     * */
+    fullWidth?: never;
+    /**
+     * @ignore
+     * */
+    asChild?: never;
+    /**
+     * @ignore
+     * */
+    variant?: never;
+    /**
+     * @ignore
+     * */
+    size?: never;
+    /**
+     * @ignore
+     * */
+    unstyled?: never;
+};
+
+declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
+} & {
+    href: string | undefined;
+    children: react.ReactNode;
+    beforeAction?: (() => Promise<void>) | (() => void);
+    type?: LinkTypes;
+} & {
+    appearance?: "dangerous" | "default" | "gated";
+    badge?: react.JSX.Element;
+    children?: react.ReactNode;
+    command?: react.ReactNode;
+    icon?: ButtonProps["leftIcon"];
+    leftIcon?: ButtonProps["leftIcon"];
+    rightIcon?: ButtonProps["rightIcon"];
+    fullWidth?: never;
+    asChild?: never;
+    variant?: never;
+    size?: never;
+    unstyled?: never;
+} & {
+    /**
+     * Treats the menu item as a link when provided
+     */
+    href?: MenuItemButtonProps["href"];
+}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    href?: never;
+    type?: "button" | "reset" | "submit";
+    children: react.ReactNode;
+} & {
+    appearance?: "dangerous" | "default" | "gated";
+    badge?: react.JSX.Element;
+    children?: react.ReactNode;
+    command?: react.ReactNode;
+    icon?: ButtonProps["leftIcon"];
+    leftIcon?: ButtonProps["leftIcon"];
+    rightIcon?: ButtonProps["rightIcon"];
+    fullWidth?: never;
+    asChild?: never;
+    variant?: never;
+    size?: never;
+    unstyled?: never;
+} & {
+    /**
+     * Treats the menu item as a link when provided
+     */
+    href?: MenuItemButtonProps["href"];
+}, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type AlignmentTypes = 'center' | 'justify' | 'left' | 'right';
 declare const variantStyleMap: {
@@ -1119,6 +1308,144 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
     renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
 })>, never> & Record<string, never>;
 
+type MenuItemLabelProps = {
+    /**
+     * The content of the label
+     */
+    children: ReactNode;
+};
+type MenuItemDescriptionProps = {
+    /**
+     * The content of the description
+     */
+    children: ReactNode;
+};
+declare const MenuItemLabel: ({ children }: MenuItemLabelProps) => react_jsx_runtime.JSX.Element;
+declare const MenuItemDescription: ({ children }: MenuItemDescriptionProps) => react_jsx_runtime.JSX.Element;
+
+type MenuRadioGroupProps = DropdownMenuRadioGroupProps & {
+    /** The label for the radio group  */
+    label: ReactNode;
+    /** The radio items */
+    children: ReactNode | ReactNode[];
+    /**
+     * @ignore
+     */
+    asChild?: never;
+};
+declare const MenuRadioGroup: {
+    ({ children, label, ...props }: MenuRadioGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
+    /**
+     * an [Icon](?path=/docs/components-icon--docs) to use as the indicator that the radio item is selected
+     */
+    indicator?: JSX.Element;
+    /**
+     * The value of the item
+     */
+    value: DropdownMenuRadioItemProps['value'];
+    /**
+     * @ignore
+     */
+    href?: never;
+    /**
+     * @ignore
+     */
+    isLoading?: never;
+    /**
+     * @ignore
+     */
+    ref?: never;
+};
+declare const RadioMenuItem: {
+    ({ onSelect, value, indicator, ...props }: RadioMenuItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps & {
+    /**
+     * an [Icon](?path=/docs/components-icon--docs) to use as the indicator that the radio item is selected
+     */
+    indicator?: JSX.Element;
+    /**
+     * The  checked state of the menu item
+     */
+    checked: boolean;
+    /**
+     * @ignore
+     */
+    href?: never;
+    /**
+     * @ignore
+     */
+    isLoading?: never;
+    /**
+     * @ignore
+     */
+    ref?: never;
+};
+declare const CheckboxMenuItem: {
+    ({ onSelect, checked, onCheckedChange, indicator, ...props }: CheckboxMenuItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * Display content _only_ when it's focused.
+     */
+    focusable?: boolean;
+    /**
+     * The text that will appear to screenreaders but not be displayed on screen
+     * (alternatively you can pass children)
+     */
+    text?: ReactNode;
+};
+/**
+ * Used to hide content from the visual client, but keep it readable for screen readers.
+ */
+declare const ScreenReaderOnly: {
+    ({ text, children, focusable, ...otherProps }: ScreenReaderOnlyProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type Spacings = 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09' | 'space-10' | 'space-11';
+
+type StackProps = {
+    /**
+     * Optional children
+     */
+    children?: ReactNode | undefined;
+    /**
+     * The gap between each item in the stack. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * TODO: add link to Spacing docs
+     */
+    gap?: Spacings;
+    /**
+     * Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
+     * The default behavior is `vertical`. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     */
+    direction?: 'horizontal' | 'vertical';
+    renderAs?: ElementType$1;
+};
+/**
+ * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
+ * This allows for layouting children in a consistent way without needing to manually add margins or padding.
+ */
+declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, keyof StackProps> & {
+    renderAs?: any;
+} & StackProps & {
+    ref?: any;
+}) | (StackProps & {
+    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+})>, never> & Record<string, never>;
+
 type TooltipProps = {
     /**
      * The content of the tooltip
@@ -1198,4 +1525,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
+export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, RadioMenuItem, ScreenReaderOnly, Stack, SubMenu, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };