@moderntribe/wme/dist/index.d.ts

Components and hooks to build the best UX/UI admin wizards

/// <reference types="react" />
import * as React from 'react';
import React__default, { ReactElement, ChangeEvent, ReactNode, Ref, PropsWithChildren } from 'react';
import { ButtonProps, ToggleButtonGroupProps as ToggleButtonGroupProps$1, CardContentProps, BoxProps, FormHelperTextProps as FormHelperTextProps$1, FormControlLabelProps, LinkProps, ChipProps, LinearProgressProps, TooltipProps, TypographyProps, ToggleButtonProps, CardMediaProps, DialogProps, PaperProps, CheckboxProps, SelectProps, InputBaseProps, InputLabelProps, SwitchProps } from '@mui/material';
import { CardProps } from '@mui/material/Card';
import { CardHeaderProps } from '@mui/material/CardHeader';
import { ListProps } from '@mui/material/List';
import { ResponsiveStyleValue } from '@mui/system';
import { GridSpacing } from '@mui/material/Grid';
import { FormControlUnstyledProps } from '@mui/base';
import { RadioGroupProps as RadioGroupProps$1 } from '@mui/material/RadioGroup';
import * as _mui_material_styles from '@mui/material/styles';
import { TypographyStyleOptions } from '@mui/material/styles/createTypography';

declare const Button: React__default.FC<ButtonProps>;

interface ToggleButtonGroupProps extends ToggleButtonGroupProps$1 {
    children: Array<ReactElement>;
    onChange: (event: ChangeEvent<unknown>) => void;
    value: string | null;
    ariaLabel?: string;
}
declare const ToggleButtonGroup: React__default.FC<ToggleButtonGroupProps>;

/**
 * All the logic for the dropdown is handled in the component, but the developer will need to
 * pass in a click handler and keep track of the selected index for when the button is clicked.
*/
interface SplitButtonProps {
    options: Array<string>;
    handleClick: () => void;
    handleIndexChange: (arg: number) => void;
    ariaLabelGroup?: string;
    color?: 'primary' | 'secondary';
    disabled?: boolean;
    selectedIndex: number;
}
declare const SplitButton: React__default.FC<SplitButtonProps>;

declare function SetupCard(props: CardProps): JSX.Element;

declare function SetupCardHeader(props: CardHeaderProps): JSX.Element;

declare const SetupCardContent: React.FC<CardContentProps>;

declare type TaskVariant = 'action' | 'task' | undefined;
interface SetupCardProps extends BoxProps {
    href?: string;
    title?: string;
    intro?: string;
    children?: React.ReactNode;
    button?: any;
    taskCta?: string;
    disabled?: boolean;
    avatar?: React.ReactNode;
    variant?: TaskVariant;
    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}
declare const SetupCardTask: React.FC<SetupCardProps>;

interface SetupCardTaskCtaProps extends Omit<ButtonProps, 'variant' | 'color'> {
}
declare const SetupCardTaskCta: React.FC<SetupCardTaskCtaProps>;

interface SetupCardInfoRowProps extends BoxProps {
    icon?: string;
    hasIcon?: boolean;
    primary?: any;
    secondary?: any;
}
declare const SetupCardInfoRow: React.FC<SetupCardInfoRowProps>;

declare const SetupCardFooter: React.FC<BoxProps>;

declare function SetupCardList(props: ListProps): JSX.Element;

interface WmeMenuItemProps {
    value: string;
    key: number | string;
    icon?: ReactNode;
    id?: string;
    children: string | ReactNode;
}
declare const MenuItem: React__default.FC<WmeMenuItemProps>;

interface InputTitleProps {
    children: string;
}
declare const InputTitle: React__default.FC<InputTitleProps>;

interface FormHelperTextProps extends FormHelperTextProps$1 {
    onClick?: () => void;
}
declare const FormHelperText: React__default.FC<FormHelperTextProps>;

interface FormControlProps extends FormControlLabelProps {
    control: ReactElement;
    label: string;
    value?: string;
    children?: string;
}
declare const FormControlLabel: React__default.FC<FormControlProps>;

interface SetupCardListItemProps {
    icon?: React__default.ReactNode;
    title: string;
    href?: string;
    target?: string;
    linkProps?: LinkProps;
}
declare function SetupCardListItem(props: SetupCardListItemProps): JSX.Element;

declare function Chip(props: ChipProps): JSX.Element;

interface ProgressBarProps extends LinearProgressProps {
    statusMessage?: string;
}
declare function ProgressBar(props: ProgressBarProps): JSX.Element;

declare const Tooltip: React__default.FC<TooltipProps>;

interface FileUploadProps extends BoxProps {
    action?: React__default.ReactElement;
    actionProps?: any;
    alert?: React__default.ReactElement;
    error?: boolean;
    header?: React__default.ReactElement;
    headerProps?: FileUploadHeaderProps;
    uploaded?: boolean;
    preview?: React__default.ReactElement;
    previewProps?: FileUploadPreviewProps;
    removeProps?: FileUploadRemoveProps;
    select?: React__default.ReactElement;
    selectProps?: FileUploadSelectProps;
    showActions?: boolean;
}
declare const FileUpload: React__default.FC<FileUploadProps>;

declare const ErrorText: React__default.FC<TypographyProps>;

interface CardSelectGroupProps extends ToggleButtonGroupProps$1 {
    cardPadding?: 'sm' | 'md';
    cardSpacing?: ResponsiveStyleValue<GridSpacing>;
    cardColumns?: ResponsiveStyleValue<number>;
}
declare function CardSelectGroup(props: CardSelectGroupProps): JSX.Element;

interface CardSelectItemProps extends ToggleButtonProps {
    primary?: any;
    secondary?: any;
    footer?: any;
    hasFooter?: boolean;
    icon?: any;
    cardPadding?: 'sm' | 'md';
    defaultIcon?: React.ReactNode;
    completedIcon?: React.ReactNode;
}
declare function CardSelectItem(props: CardSelectItemProps): JSX.Element;

interface VideoEmbedProps extends CardMediaProps {
    allow?: string;
    height?: string;
    width?: string;
    component?: string;
}
declare const VideoEmbed: React__default.FC<VideoEmbedProps>;

interface WmePaperProps extends PaperProps {
    ref?: Ref<HTMLDivElement>;
}
interface WmeDialogProps extends DialogProps {
    children?: ReactNode;
    bgStyles?: {};
    logoSrc?: string;
    logoAlt?: string;
    exit?: ReactElement;
    PaperProps?: WmePaperProps;
}
declare const Wizard: React__default.ForwardRefExoticComponent<Pick<WmeDialogProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "maxWidth" | "transitionDuration" | "fullWidth" | "scroll" | "open" | "container" | "disablePortal" | "keepMounted" | "TransitionProps" | "exit" | "componentsProps" | "components" | "onClose" | "TransitionComponent" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "onBackdropClick" | "bgStyles" | "logoSrc" | "logoAlt" | "PaperProps" | "fullScreen" | "PaperComponent"> & React__default.RefAttributes<HTMLDivElement>>;

interface WizardHeaderProps {
    children: ReactElement;
}
declare const WizardHeader: React__default.FC<WizardHeaderProps>;

interface WizardSectionTitleProps extends BoxProps {
    heading?: string;
    headingComponent?: React__default.ElementType;
    headingVariant?: 'h1' | 'h2' | 'h3' | 'h4';
    copy?: string;
    copyAlign?: 'center' | 'left';
    copyVariant?: 'h1' | 'h2' | 'h3' | 'h4';
    iconSrc?: string;
    iconAlt?: string;
    iconWidth?: string;
    width?: string;
    bookend?: boolean;
}
declare const WizardSectionTitle: React__default.FC<WizardSectionTitleProps>;

interface WizardFooterProps extends BoxProps {
    backText?: string;
    onBack?: () => void;
    nextText?: string;
    onNext?: () => void;
    skipText?: string;
    onSkip?: () => void;
    activeStep: number;
    steps: Array<{
        id: number;
        hideBack?: boolean;
        hideSkip?: boolean;
        hideNext?: boolean;
        heading?: string;
        label?: string;
        step?: string;
        text?: string;
        hidePagination?: boolean;
        screen?: ReactNode;
        disableNext?: boolean;
        disableAll?: boolean;
        disable?: boolean;
    }>;
    onClickStep?: (step: any) => void;
    disableNext?: boolean;
    isLoading?: boolean;
    loadingText?: string;
    save?: () => void;
    hideFooter: boolean;
    disableAll?: boolean;
    isLastStep?: boolean;
}
declare const WizardFooter: React__default.FC<WizardFooterProps>;

declare const Form: React__default.FC<BoxProps>;

declare const CheckboxInput: React__default.FC<CheckboxProps>;

declare const InputLabel: React__default.FC<FormControlLabelProps>;

interface SelectInputProps extends SelectProps {
    placeholder?: string;
    width?: string | number;
}
declare const SelectInput: React__default.FC<SelectInputProps>;

declare const FileInput: React__default.FC<InputBaseProps>;

interface FileUploadSelectProps {
    buttonText?: string;
    buttonProps?: ButtonProps;
    helperText?: string;
    inputProps?: InputBaseProps;
}
declare const FileUploadSelect: React__default.FC<FileUploadSelectProps>;

interface FileUploadRemoveProps {
    buttonText?: string;
    cancelText?: string;
    onCancel?: React__default.MouseEventHandler<HTMLButtonElement>;
    onRemove?: React__default.MouseEventHandler<HTMLButtonElement>;
}
declare const FileUploadRemove: React__default.FC<FileUploadRemoveProps>;

interface FileUploadPreviewProps {
    filePath?: string;
    imagePath?: string;
    imageAlt?: string;
}
declare const FileUploadPreview: React__default.FC<FileUploadPreviewProps>;

interface FileUploadHeaderProps {
    button?: React__default.ReactElement;
    buttonText?: string;
    labelText?: string;
    onRemove?: React__default.MouseEventHandler<HTMLButtonElement>;
    showButton?: boolean;
}
declare const FileUploadHeader: React__default.FC<FileUploadHeaderProps>;

interface InputHelperTextProps extends FormHelperTextProps$1 {
    onClick?: React__default.MouseEventHandler<HTMLParagraphElement>;
}
declare const InputHelperText: React__default.FC<PropsWithChildren<InputHelperTextProps>>;

declare const FormFieldControl: React__default.FC<FormControlUnstyledProps>;

declare const InputError: React__default.FC<TypographyProps>;

declare const TextInput: React__default.FC<InputBaseProps>;

/**
 * Password field is a WME Text Field component with additional props
 */
interface PasswordInputProps extends InputBaseProps {
    chipColor?: ChipProps['color'];
    chipLabel?: ChipProps['label'];
    value: any;
}
declare const PasswordInput: React__default.FC<PasswordInputProps>;

interface RadioGroupProps extends RadioGroupProps$1 {
    ariaLabelledby?: string;
}
declare const RadioGroup: React__default.FC<RadioGroupProps>;

declare type FormFieldProps = FormControlUnstyledProps & {
    errorMessage?: string;
    field?: ReactNode;
    helperText?: string;
    id?: string;
    label?: string;
};
declare const FormField: React__default.FC<PropsWithChildren<FormFieldProps>>;

declare const FormFieldLabel: React__default.FC<PropsWithChildren<InputLabelProps>>;

interface LogoContainerProps extends BoxProps {
    logoSrc?: string | React__default.ReactNode;
    logoAlt?: string;
    width?: string;
}
declare const Logo: React__default.FC<LogoContainerProps>;

interface ExitButtonProps extends BoxProps {
    children?: ReactElement;
    onClick?: (event: React__default.MouseEvent<HTMLElement>) => void;
}
declare const ExitButton: React__default.FC<ExitButtonProps>;

interface DeviceSelectionProps extends BoxProps {
    devices: Array<{
        name: string;
        icon: ReactElement;
        onClick?: (event: React__default.MouseEvent<HTMLElement>) => void;
        active?: boolean;
    }>;
}
declare const DeviceSelection: React__default.FC<DeviceSelectionProps>;

declare const Switch: React__default.FC<SwitchProps>;

declare module '@mui/material/styles/createPalette' {
    interface TypographyStyleOptionsExtended extends TypographyStyleOptions {
        pxToRem: (px: number) => number;
    }
    interface Theme {
        typography: TypographyStyleOptionsExtended;
    }
    interface ThemeOptions {
        globalStyles?: {
            menuListItemHeight?: number;
        };
    }
    interface TypeText {
        white?: string;
        placeholder?: string;
        link?: string;
    }
    interface TypeBorder {
        ui?: string;
        layout?: string;
        dark?: string;
    }
    interface PaletteOptions {
        border?: TypeBorder;
    }
    interface Palette {
        border: TypeBorder;
    }
    interface TypeBackground {
        primary?: string;
        secondary?: string;
        hover?: string;
        dark?: string;
        grey?: string;
        disabled?: string;
    }
}
declare module '@mui/material/styles' {
    interface TypographyVariants {
        subtext: React__default.CSSProperties;
        link: React__default.CSSProperties;
        taskTitle: React__default.CSSProperties;
    }
    interface TypographyVariantsOptions {
        subtext?: React__default.CSSProperties;
        link?: React__default.CSSProperties;
        taskTitle?: React__default.CSSProperties;
    }
    interface Theme {
        globalStyles: {
            menuListItemHeight: number;
            menuListItemPadding: number;
            menuPaperWidth: number;
        };
    }
    interface ThemeOptions {
        globalStyles?: {
            menuListItemHeight?: number;
            menuListItemPadding?: number;
            menuPaperWidth?: number;
        };
    }
}
declare module '@mui/material/Typography' {
    interface TypographyPropsVariantOverrides {
        subtext: true;
        link: true;
        taskTitle: true;
        subtitle1: false;
        subtitle2: false;
    }
}
declare const typographyVariants: {
    h1: {
        fontSize: string;
        lineHeight: number;
        fontWeight: number;
        letterSpacing: string;
    };
    h2: {
        fontSize: string;
        lineHeight: number;
        fontWeight: number;
        letterSpacing: string;
    };
    h3: {
        fontSize: string;
        lineHeight: number;
        fontWeight: number;
        letterSpacing: string;
    };
    h4: {
        fontSize: string;
        lineHeight: number;
        fontWeight: number;
        letterSpacing: string;
    };
    h5: {
        fontSize: string;
        lineHeight: number;
        fontWeight: number;
        letterSpacing: string;
    };
    body1: {
        fontSize: string;
        lineHeight: number;
        fontWeight: number;
        letterSpacing: string;
    };
    body2: {
        fontSize: string;
        lineHeight: number;
        fontWeight: number;
        letterSpacing: string;
    };
    subtext: {
        fontSize: string;
        lineHeight: number;
        fontWeight: number;
        letterSpacing: string;
    };
    link: {
        fontSize: string;
        lineHeight: number;
        fontWeight: number;
        letterSpacing: string;
    };
    taskTitle: {
        fontSize: string;
        lineHeight: number;
        fontWeight: number;
        letterSpacing: string;
    };
};
declare type WMEVariants = keyof typeof typographyVariants;
declare const theme: _mui_material_styles.Theme;

declare function WMEProvider({ children }: {
    children: React__default.ReactNode;
}): JSX.Element;

/**
 * We use useQueryParam to handle if the modal should be open or not.
 * We can have only one wizard modal open at a time.
 * Pass Wizard name to useWizardModal as a string
 */
declare const QUERY_PARAM_NAME = "wizard";
declare function useWizardModal(wizardName: string): {
    currentWizard: string | null | undefined;
    forceClose: () => void;
    open?: undefined;
    close?: undefined;
    isVisible?: undefined;
    modalProps?: undefined;
} | {
    currentWizard: string | null | undefined;
    open: () => void;
    close: () => void;
    isVisible: boolean;
    forceClose: () => void;
    modalProps: {
        open: boolean;
        onClose: () => void;
        closeWarning: boolean;
        setCloseWarning: React.Dispatch<React.SetStateAction<boolean>>;
    };
};

declare function useMaxActiveStep(activeStep?: number): {
    maxActiveStep: number;
};

declare function addQueryProviderHoc(WrappedComponent: React__default.FunctionComponent): (props: ReactElement) => JSX.Element;

declare const pxToRem: (px: number) => string;

interface ConditionalWrapperProps {
    condition: boolean;
    wrapper: any;
    children?: React__default.ReactNode;
}
declare const ConditionalWrapper: (props: ConditionalWrapperProps) => any;

declare const capitalize: (s: string) => string;

export { Button, CardSelectGroup, CardSelectItem, CheckboxInput, Chip, ConditionalWrapper, DeviceSelection, ErrorText, ExitButton, FileInput, FileUpload, FileUploadHeader, FileUploadHeaderProps, FileUploadPreview, FileUploadPreviewProps, FileUploadRemove, FileUploadRemoveProps, FileUploadSelect, FileUploadSelectProps, Form, FormControlLabel, FormField, FormFieldControl, FormFieldLabel, FormHelperText, InputError, InputHelperText, InputLabel, InputTitle, Logo, MenuItem, PasswordInput, ProgressBar, QUERY_PARAM_NAME, RadioGroup, SelectInput, SetupCard, SetupCardContent, SetupCardFooter, SetupCardHeader, SetupCardInfoRow, SetupCardList, SetupCardListItem, SetupCardTask, SetupCardTaskCta, SplitButton, Switch, TextInput, ToggleButtonGroup, Tooltip, VideoEmbed, WMEProvider, WMEVariants, Wizard, WizardFooter, WizardHeader, WizardSectionTitle, addQueryProviderHoc, capitalize, pxToRem, theme, useMaxActiveStep, useWizardModal };