chop-logic-components 2.6.0 → 3.0.0

package/dist/index.d.ts

@@ -1,7 +1,492 @@
-export { ChopLogicIcon, ChopLogicLoader, ChopLogicPortal, ChopLogicTooltip } from './atoms';
-export * from './contexts';
-export * from './enums';
-export * from './hooks';
-export * from './models';
-export * from './molecules';
-export * from './organisms';
+import { ChangeEventHandler } from 'react';
+import { Context } from 'react';
+import { CSSProperties } from 'react';
+import { FC } from 'react';
+import { FocusEventHandler } from 'react';
+import { FormEventHandler } 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 { RefObject } from 'react';
+import { SVGProps } from 'react';
+import { ThemeContextProps as ThemeContextProps_2 } from '../..';
+
+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 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 {
+    columns?: number;
+    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 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",
+    Clear = "clear",
+    Copy = "copy",
+    Cut = "cut",
+    Delete = "delete",
+    Download = "download",
+    Error = "error",
+    Forward = "forward",
+    Graduate = "graduate",
+    Help = "help",
+    Hide = "hide",
+    Home = "home",
+    Info = "info",
+    Login = "login",
+    Paste = "paste",
+    Question = "question",
+    Save = "save",
+    Show = "show",
+    Upload = "upload",
+    Warning = "warning",
+    Remove = "remove"
+}
+
+export declare interface IconProps extends ChopLogicComponentProps, HTMLAttributes<SVGSVGElement> {
+    name?: IconName;
+    testId?: string;
+    title?: string;
+}
+
+export declare const Input: FC<Props>;
+
+export declare const Label: FC<LabelProps>;
+
+declare type LabelProps = {
+    label: string;
+    required: boolean;
+    inputId: string;
+    isTextHidden?: boolean;
+    icon?: ReactElement;
+    iconPosition?: 'left' | 'right';
+};
+
+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<HTMLDivElement | 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;
+
+declare type Props = InputHTMLAttributes<HTMLInputElement> & PropsWithChildren;
+
+export declare type RenderDataItemCallback = (item: GridItem, field: string) => ReactElement;
+
+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 Tabs: FC<TabsProps>;
+
+export declare interface TabsProps extends ChopLogicComponentProps {
+    tabs: ChopLogicTabItem[];
+    defaultTabId?: string;
+    mode?: OrientationMode;
+}
+
+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 useChopLogicTheme: () => ThemeContextProps_2;
+
+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 function useElementIds(id?: string): {
+    elementId: string;
+    errorId: string;
+    dropdownId: string;
+};
+
+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<HTMLDivElement | null>;
+    onKeyPress: () => void;
+};
+
+export declare const useModalFocusTrap: ({ modalRef, isOpened }: ModalFocusTrapParams) => void;
+
+export declare const useResetFormInput: (onReset: () => void) => void;
+
+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 { }