chop-logic-components/dist/index.d.ts

Reusable React components and hooks for the Chop Logic project

import { AnchorHTMLAttributes } from 'react';
import { ChangeEventHandler } from 'react';
import { ComponentType } from 'react';
import { Context } from 'react';
import { CSSProperties } from 'react';
import { FC } from 'react';
import { FocusEventHandler } from 'react';
import { FormEventHandler } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { HTMLAttributes } from 'react';
import { HTMLInputAutoCompleteAttribute } from 'react';
import { InputHTMLAttributes } from 'react';
import { MouseEvent as MouseEvent_2 } from 'react';
import { MouseEventHandler } from 'react';
import { PropsWithChildren } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { ReactPortal } from 'react';
import { RefAttributes } from 'react';
import { RefObject } from 'react';
import { SVGProps } from 'react';
import { ThemeContextProps as ThemeContextProps_2 } from '../..';

export declare const Accordion: FC<AccordionProps>;

export declare type AccordionItemProps = PropsWithChildren & {
    summary: string;
};

export declare interface AccordionProps extends ChopLogicComponentProps {
    items: AccordionItemProps[];
}

export declare const Alert: FC<AlertProps>;

export declare enum AlertMode {
    Success = "success",
    Error = "error",
    Warning = "warning",
    Info = "info",
    Help = "help"
}

export declare interface AlertProps extends ChopLogicComponentProps {
    isOpened: boolean;
    onClose: () => void;
    message: string;
    mode?: AlertMode;
    icon?: IconName;
    autoClose?: boolean;
    autoCloseDelay?: number;
}

export declare interface Breadcrumb {
    label: string;
    icon?: IconName;
    link?: string;
}

export declare const Breadcrumbs: FC<BreadcrumbsProps>;

export declare interface BreadcrumbsProps extends ChopLogicComponentProps {
    items: Breadcrumb[];
}

export declare const Button: FC<ButtonProps & {
    tooltip?: string;
    visibleOn?: "hover" | "click" | "focus" | "contextmenu";
}>;

export declare interface ButtonProps extends Partial<ChopLogicInputProps> {
    onClick?: MouseEventHandler<HTMLButtonElement>;
    onFocus?: FocusEventHandler<HTMLButtonElement>;
    onBlur?: FocusEventHandler<HTMLButtonElement>;
    view?: ButtonView;
    icon?: IconName;
    text?: string;
    extended?: boolean;
    type?: 'button' | 'reset' | 'submit';
    tooltip?: string;
}

export declare enum ButtonView {
    Primary = "primary",
    Secondary = "secondary",
    Icon = "icon",
    Inner = "inner"
}

export declare const Checkbox: FC<CheckboxProps>;

export declare interface CheckboxProps extends ChopLogicInputProps {
    noLabel?: boolean;
    iconPosition?: 'left' | 'right';
    onChange?: ChangeEventHandler<HTMLInputElement>;
    defaultChecked?: boolean;
}

export declare interface ChopLogicComponentProps {
    id?: string;
    className?: string;
    style?: CSSProperties;
    tabIndex?: number;
    title?: string;
}

export declare interface ChopLogicInputProps extends ChopLogicComponentProps {
    label: string;
    name: string;
    disabled?: boolean;
    required?: boolean;
}

export declare type ChopLogicRegExpWithFlags = {
    regexp: string;
    flags?: string;
};

export declare interface ChopLogicSVGElementProps extends SVGProps<SVGSVGElement> {
    title?: string;
}

export declare interface ChopLogicTabItem {
    content: ReactElement;
    title: string;
    id: string;
    disabled?: boolean;
}

export declare const Dialog: FC<DialogProps>;

export declare interface DialogProps extends ChopLogicComponentProps, PropsWithChildren {
    isOpened: boolean;
    onClose: () => void;
    title: string;
    icon?: IconName;
}

export declare type Dimensions = {
    width: number;
    height: number;
};

export declare const EditableText: FC<EditableTextProps>;

export declare interface EditableTextProps extends ChopLogicComponentProps {
    value: string;
    autoSelectTextOnEditMode?: boolean;
    isEditMode?: boolean;
    multiline?: boolean;
    onChange?: (value: string) => void;
    onClick?: (event: MouseEvent_2) => void;
    placeholder?: string;
    readOnly?: boolean;
}

export declare const ErrorMessage: FC<ErrorMessageProps>;

declare type ErrorMessageProps = {
    errorId: string;
    visible?: boolean;
    message?: string;
    testId?: string;
    className?: string;
};

export declare const Form: FC<FormProps>;

export declare const FormContext: Context<FormContextProps>;

export declare interface FormContextProps {
    onChangeFormInput?: (params: FormInputParams) => void;
    initialValues?: FormValues;
    resetSignal?: number;
}

export declare interface FormInputParams {
    name: string;
    value: unknown;
    valid?: boolean;
}

export declare interface FormProps extends PropsWithChildren, ChopLogicComponentProps {
    initialValues?: FormValues;
    hasReset?: boolean;
    onClickSubmit?: (data: FormValues) => void;
    onReset?: FormEventHandler<HTMLFormElement>;
    onSubmit?: FormEventHandler<HTMLFormElement>;
}

export declare type FormValidationState = [string, boolean][];

export declare type FormValues = {
    [key: string]: unknown;
};

export declare const Grid: FC<GridProps>;

export declare type GridColumn = {
    field: string;
    title?: string;
    component?: ReactElement;
    highlighted?: boolean;
    className?: string;
};

export declare type GridItem = {
    id: string;
    disabled?: boolean;
    [key: string]: unknown;
};

export declare interface GridProps extends ChopLogicComponentProps {
    columns: GridColumn[];
    data: GridItem[];
    caption?: string;
    selectable?: boolean;
    renderDataItem?: RenderDataItemCallback;
    onSelect?: (ids: string[]) => void;
}

export declare type GridRowValue = {
    field: string;
    value: string | ReactElement;
};

export declare const Header: FC<HeaderProps>;

declare type HeaderLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

export declare interface HeaderProps extends HTMLAttributes<HTMLHeadingElement> {
    children: ReactNode;
    as?: HeaderLevel;
    icon?: IconName;
}

export declare const Icon: FC<IconProps>;

export declare enum IconName {
    ArrowDown = "arrow-down",
    ArrowUp = "arrow-up",
    Back = "back",
    Cancel = "cancel",
    CheckboxChecked = "checkbox-checked",
    CheckboxUnchecked = "checkbox-unchecked",
    CheckMark = "check-mark",
    ChevronDown = "chevron-down",
    ChevronLeft = "chevron-left",
    ChevronRight = "chevron-right",
    ChevronUp = "chevron-up",
    ChopLogic = "chop-logic",
    Clear = "clear",
    Copy = "copy",
    Cut = "cut",
    Delete = "delete",
    Documents = "documents",
    Download = "download",
    Edit = "edit",
    Email = "email",
    Error = "error",
    Forward = "forward",
    Graduate = "graduate",
    Help = "help",
    Hide = "hide",
    Home = "home",
    Image = "image",
    Info = "info",
    Login = "login",
    Paste = "paste",
    Phone = "phone",
    PlusCircle = "plus-circle",
    Projects = "projects",
    Question = "question",
    Save = "save",
    Search = "search",
    Settings = "settings",
    Show = "show",
    Upload = "upload",
    Warning = "warning",
    Remove = "remove"
}

export declare interface IconProps extends ChopLogicComponentProps, HTMLAttributes<SVGSVGElement> {
    name?: IconName;
    testId?: string;
    title?: string;
    hidden?: boolean;
}

declare const Image_2: FC<ImageProps & {
    caption?: string;
}>;
export { Image_2 as Image }

export declare interface ImageProps {
    src: string;
    alt: string;
    sources?: ImageSource[];
    sizes?: string;
    caption?: string;
    width?: number | string;
    height?: number | string;
    aspectRatio?: string;
    loading?: 'lazy' | 'eager';
    decoding?: 'sync' | 'async' | 'auto';
    className?: string;
    decorative?: boolean;
    onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
}

export declare interface ImageSource {
    src: string;
    descriptor?: string;
    media?: string;
    type?: string;
}

export declare const Input: ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
children?: ReactNode | undefined;
} & RefAttributes<HTMLInputElement>>;

export declare const Label: FC<LabelProps>;

declare type LabelProps = {
    label: string;
    required: boolean;
    inputId: string;
    isTextHidden?: boolean;
    icon?: IconName;
    iconPosition?: 'left' | 'right';
};

export declare const Link: FC<LinkProps>;

export declare interface LinkProps extends PropsWithChildren, AnchorHTMLAttributes<HTMLAnchorElement> {
    href: string;
    icon?: IconName;
    iconPosition?: 'left' | 'right';
    external?: boolean;
    disabled?: boolean;
}

export declare const Loader: FC<LoaderProps>;

export declare interface LoaderProps extends ChopLogicComponentProps, HTMLAttributes<HTMLSpanElement> {
    view?: LoaderView;
}

export declare enum LoaderView {
    Dots = "dots",
    Brackets = "brackets",
    Linear = "linear",
    Square = "square",
    Circle = "circle",
    Pulse = "pulse",
    Arrow = "arrow",
    Filler = "filler",
    Rotation = "rotation"
}

export declare const Menu: FC<MenuProps>;

export declare interface MenuItem {
    label: string;
    id: string;
    nestedItems?: MenuItem[];
    icon?: IconName;
    link?: string;
    onClick?: () => void;
    onHover?: () => void;
    onFocus?: () => void;
}

export declare interface MenuProps extends ChopLogicComponentProps {
    items: MenuItem[];
    mode?: OrientationMode;
    openedOn?: 'hover' | 'click';
}

declare type ModalFocusTrapParams = {
    modalRef: RefObject<HTMLElement | null>;
    isOpened: boolean;
};

export declare const MultiSelect: FC<MultiSelectProps>;

export declare interface MultiSelectProps extends ChopLogicInputProps {
    options: SelectValue[];
    onChange?: (values?: SelectValue[]) => void;
    defaultValue?: string | number | readonly string[];
    placeholder?: string;
}

export declare type MultiSelectValue = SelectValue & {
    selected: boolean;
};

export declare const NumericInput: FC<NumericInputProps>;

export declare interface NumericInputProps extends ChopLogicInputProps {
    errorMessage?: string;
    validator?: NumericInputValidator;
    hasSpinButtons?: boolean;
    min?: number;
    max?: number;
    step?: number;
    readOnly?: boolean;
    defaultValue?: number;
    onSpinButtonClick?: (value?: number) => void;
    onChange?: ChangeEventHandler<HTMLInputElement>;
    onBlur?: FocusEventHandler<HTMLInputElement>;
    onFocus?: FocusEventHandler<HTMLInputElement>;
}

export declare type NumericInputValidator = (input?: number) => boolean;

export declare enum OrientationMode {
    Vertical = "vertical",
    Horizontal = "horizontal"
}

export declare const Portal: ({ children }: {
    children: ReactElement;
}) => ReactPortal;

export declare type RenderDataItemCallback = (item: GridItem, field: string) => ReactElement;

export declare const Search: FC<SearchProps>;

export declare interface SearchProps extends ChopLogicInputProps {
    maxLength?: number;
    minLength?: number;
    placeholder?: string;
    autoComplete?: HTMLInputAutoCompleteAttribute;
    clearable?: boolean;
    spellCheck?: boolean;
    searchMode?: 'automatic' | 'manual';
    onSearch?: (searchTerm: string) => void;
    onClear?: () => void;
    onBlur?: FocusEventHandler<HTMLInputElement>;
    onFocus?: FocusEventHandler<HTMLInputElement>;
    debounceDelay?: number;
}

export declare const Select: FC<SelectProps>;

export declare interface SelectProps extends ChopLogicInputProps {
    options: SelectValue[];
    onChange?: (value?: SelectValue) => void;
    placeholder?: string;
    defaultValue?: string | number | readonly string[];
}

export declare type SelectValue = {
    id: string;
    label: string;
} & {
    [key in string]: unknown;
};

export declare const Switch: FC<SwitchProps>;

export declare interface SwitchProps {
    checked?: boolean;
    onChange?: (checked: boolean) => void;
    value?: string;
    hasIndicator?: boolean;
    label: string;
    name: string;
    disabled?: boolean;
    id?: string;
    className?: string;
    style?: CSSProperties;
}

export declare const Tabs: FC<TabsProps>;

export declare interface TabsProps extends ChopLogicComponentProps {
    tabs: ChopLogicTabItem[];
    defaultTabId?: string;
    mode?: OrientationMode;
    stretched?: boolean;
    editable?: boolean;
    extendable?: boolean;
    extendedTabLabel?: string;
    extendedTabContent?: ReactElement;
    onTabTitleChange?: (tabId: string, newTitle: string) => void;
    onTabAdd?: () => void;
    onTabSelect?: (id: string) => void;
    onTabDelete?: (id: string) => void;
}

export declare const TextInput: FC<TextInputProps>;

export declare interface TextInputProps extends ChopLogicInputProps {
    errorMessage?: string;
    clearable?: boolean;
    readOnly?: boolean;
    type?: 'text' | 'email' | 'password';
    validator?: ChopLogicRegExpWithFlags | TextInputValidator;
    maxLength?: number;
    placeholder?: string;
    defaultValue?: string;
    autoComplete?: HTMLInputAutoCompleteAttribute;
    onClear?: () => void;
    onChange?: ChangeEventHandler<HTMLInputElement>;
    onBlur?: FocusEventHandler<HTMLInputElement>;
    onFocus?: FocusEventHandler<HTMLInputElement>;
}

export declare type TextInputValidator = (input: string) => boolean;

export declare const ThemeContext: Context<ThemeContextProps>;

export declare interface ThemeContextProps {
    mode?: ThemeMode;
    setMode: (mode: ThemeMode) => void;
}

export declare enum ThemeMode {
    Light = "cl-components-light-theme",
    Dark = "cl-components-dark-theme"
}

export declare const ThemeProvider: FC<{
    children: ReactNode;
    injectedMode?: ThemeMode;
}>;

export declare const Tooltip: FC<TooltipProps>;

export declare enum TooltipContainer {
    Span = "span",
    Div = "div",
    P = "p",
    Strong = "strong",
    Em = "em"
}

export declare interface TooltipProps extends PropsWithChildren, ChopLogicComponentProps {
    tooltipContent: string | ReactElement;
    containerTag?: TooltipContainer;
    visibleOn?: 'hover' | 'click' | 'focus' | 'contextmenu';
    autoClose?: boolean;
    autoCloseDelay?: number;
}

export declare const useAutoClose: ({ isOpened, onClose, autoClose, autoCloseDelay, }: {
    isOpened: boolean;
    onClose: () => void;
    autoClose?: boolean;
    autoCloseDelay?: number;
}) => void;

export declare const useClickOutside: ({ ref, onClickOutsideHandler, dependentRef, }: UseClickOutsideParams) => void;

declare type UseClickOutsideParams = {
    ref: RefObject<HTMLElement | null>;
    onClickOutsideHandler: () => void;
    dependentRef?: RefObject<HTMLElement | null>;
};

export declare const useContainerDimensions: ({ ref, isVisible, }: useContainerDimensionsParams) => Dimensions;

declare type useContainerDimensionsParams = {
    ref: RefObject<HTMLElement | null>;
    isVisible?: boolean;
};

export declare const useDebounce: <T>(value: T, delay: number) => T;

export declare function useElementIds(id?: string): {
    elementId: string;
    errorId: string;
    dropdownId: string;
};

export declare function useIsHovered(ref: RefObject<HTMLElement | null>, isMounted?: boolean): boolean;

export declare const useIsMounted: (isOpened: boolean, delay?: number) => boolean;

export declare const useIsOverflow: ({ ref, dimension, isMounted, }: {
    ref: RefObject<HTMLElement | null>;
    dimension: "width" | "height";
    isMounted?: boolean;
}) => boolean;

export declare const useKeyPress: ({ ref, keyCode, onKeyPress }: useKeyPressParams) => void;

declare type useKeyPressParams = {
    keyCode: string;
    ref: RefObject<HTMLElement | null>;
    onKeyPress: () => void;
};

export declare const useModalFocusTrap: ({ modalRef, isOpened }: ModalFocusTrapParams) => void;

export declare function useRemainingTimer({ isOpened, isHovered, onClose, autoCloseDelay, }: UseRemainingTimerProps): number;

declare type UseRemainingTimerProps = {
    isOpened: boolean;
    isHovered: boolean;
    onClose: () => void;
    autoCloseDelay?: number;
};

export declare const useResetFormInput: (onReset: () => void) => void;

export declare const useTheme: () => ThemeContextProps_2;

export declare const useTooltipPosition: ({ wrapperRef, tooltipRef, isOpened, spacing, }: useTooltipPositionParams) => {
    top: number;
    left: number;
};

declare type useTooltipPositionParams = {
    wrapperRef: RefObject<HTMLElement | null>;
    tooltipRef: RefObject<HTMLElement | null>;
    isOpened: boolean;
    spacing?: number;
};

export declare function useWindowDimensions(): Dimensions;

export declare function withFigureCaption<P extends object>(Component: ComponentType<P>): FC<P & WithFigureCaptionProps>;

declare type WithFigureCaptionProps = {
    caption?: string;
};

export declare function withTooltip<P extends object>(Component: ComponentType<P>): FC<P & WithTooltipProps>;

declare type WithTooltipProps = {
    tooltip?: string;
    visibleOn?: 'hover' | 'click' | 'focus' | 'contextmenu';
};

export { }