its-just-ui/dist/components/Cascade/Cascade.d.ts

ITS Just UI - React 18 & React 19 UI component library. 36+ accessible, TypeScript-native components with Tailwind CSS. Zero-config Material UI alternative for SaaS dashboards and enterprise apps.

import { default as React } from 'react';
import { CascadeOption, CascadeValue, CascadeLevel } from './types';

export interface CascadeContextValue {
    isOpen: boolean;
    setIsOpen: (open: boolean) => void;
    value: CascadeValue | CascadeValue[] | null;
    onChange: (value: CascadeValue | CascadeValue[] | null) => void;
    searchQuery: string;
    setSearchQuery: (query: string) => void;
    highlightedIndex: number;
    setHighlightedIndex: React.Dispatch<React.SetStateAction<number>>;
    activeLevel: number;
    setActiveLevel: (level: number) => void;
    options: CascadeOption[];
    levels: CascadeLevel[];
    filteredOptions: CascadeOption[];
    multiple: boolean;
    disabled: boolean;
    loading: boolean;
    searchable: boolean;
    clearable: boolean;
    showPath: boolean;
    maxLevels: number;
    variant: string;
    size: string;
    status: string;
    transition: string;
    transitionDuration: number;
    placement: string;
    emptyMessage: string;
    loadingMessage: string;
    placeholder: string;
    renderOption?: (option: CascadeOption, isSelected: boolean, level: number) => React.ReactNode;
    renderValue?: (value: CascadeValue | CascadeValue[]) => React.ReactNode;
    renderEmpty?: () => React.ReactNode;
    renderPath?: (path: CascadeValue[]) => React.ReactNode;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    backgroundColor?: string;
    textColor?: string;
    placeholderColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    dropdownBackgroundColor?: string;
    dropdownBorderColor?: string;
    dropdownBorderWidth?: string;
    dropdownBorderRadius?: string;
    dropdownBoxShadow?: string;
    dropdownZIndex?: string;
    optionPadding?: string;
    optionHoverBackgroundColor?: string;
    optionSelectedBackgroundColor?: string;
    optionSelectedTextColor?: string;
    optionDisabledOpacity?: string;
    iconColor?: string;
    clearIconColor?: string;
    dropdownIconColor?: string;
    loadingIconColor?: string;
    pathSeparatorColor?: string;
    pathSeparator?: string;
    onFocus?: () => void;
    onBlur?: () => void;
    onOpen?: () => void;
    onClose?: () => void;
    onSearch?: (query: string) => void;
    onLevelChange?: (level: number) => void;
    onKeyDown?: (event: React.KeyboardEvent) => void;
}
export interface CascadeBaseProps {
    options: CascadeOption[];
    value?: CascadeValue | CascadeValue[] | null;
    onChange?: (value: CascadeValue | CascadeValue[] | null) => void;
    defaultValue?: CascadeValue | CascadeValue[] | null;
    placeholder?: string;
    disabled?: boolean;
    loading?: boolean;
    multiple?: boolean;
    clearable?: boolean;
    searchable?: boolean;
    required?: boolean;
    showPath?: boolean;
    maxLevels?: number;
    label?: string;
    helperText?: string;
    errorMessage?: string;
    emptyMessage?: string;
    loadingMessage?: string;
    variant?: 'default' | 'filled' | 'outlined' | 'ghost' | 'underlined';
    size?: 'sm' | 'md' | 'lg';
    status?: 'default' | 'success' | 'warning' | 'error';
    transition?: 'none' | 'fade' | 'slide' | 'scale' | 'flip';
    transitionDuration?: number;
    renderOption?: (option: CascadeOption, isSelected: boolean, level: number) => React.ReactNode;
    renderValue?: (value: CascadeValue | CascadeValue[]) => React.ReactNode;
    renderEmpty?: () => React.ReactNode;
    renderPath?: (path: CascadeValue[]) => React.ReactNode;
    dropdownIcon?: React.ReactNode;
    clearIcon?: React.ReactNode;
    loadingIcon?: React.ReactNode;
    placement?: 'top' | 'bottom';
    offset?: number;
    maxHeight?: number;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    placeholderColor?: string;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    dropdownBackgroundColor?: string;
    dropdownBorderColor?: string;
    dropdownBorderWidth?: string;
    dropdownBorderRadius?: string;
    dropdownBoxShadow?: string;
    dropdownZIndex?: string;
    optionPadding?: string;
    optionHoverBackgroundColor?: string;
    optionSelectedBackgroundColor?: string;
    optionSelectedTextColor?: string;
    optionDisabledOpacity?: string;
    iconColor?: string;
    clearIconColor?: string;
    dropdownIconColor?: string;
    loadingIconColor?: string;
    pathSeparatorColor?: string;
    pathSeparator?: string;
    labelFontSize?: string;
    labelFontWeight?: string;
    labelColor?: string;
    labelMarginBottom?: string;
    helperTextFontSize?: string;
    helperTextColor?: string;
    helperTextMarginTop?: string;
    requiredColor?: string;
    onFocus?: () => void;
    onBlur?: () => void;
    onOpen?: () => void;
    onClose?: () => void;
    onSearch?: (query: string) => void;
    onLevelChange?: (level: number) => void;
    onKeyDown?: (event: React.KeyboardEvent) => void;
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-invalid'?: boolean;
    'aria-required'?: boolean;
}
export interface CascadeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof CascadeBaseProps>, CascadeBaseProps {
    children?: React.ReactNode;
}
export interface CascadeInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    placeholder?: string;
    dropdownIcon?: React.ReactNode;
    clearIcon?: React.ReactNode;
    loadingIcon?: React.ReactNode;
}
export interface CascadeDropdownProps extends React.HTMLAttributes<HTMLDivElement> {
    maxHeight?: number;
    offset?: number;
}
export interface CascadeOptionProps extends React.HTMLAttributes<HTMLDivElement> {
    option: CascadeOption;
    level: number;
    index: number;
}
export interface CascadeEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
export interface CascadePathProps extends React.HTMLAttributes<HTMLDivElement> {
    path: CascadeValue[];
    separator?: string;
}
export declare const useCascade: () => CascadeContextValue;
declare const CascadeInput: React.ForwardRefExoticComponent<CascadeInputProps & React.RefAttributes<HTMLDivElement>>;
declare const CascadeDropdown: React.ForwardRefExoticComponent<CascadeDropdownProps & React.RefAttributes<HTMLDivElement>>;
declare const CascadeOptionComponent: React.ForwardRefExoticComponent<CascadeOptionProps & React.RefAttributes<HTMLDivElement>>;
declare const CascadeEmpty: React.ForwardRefExoticComponent<CascadeEmptyProps & React.RefAttributes<HTMLDivElement>>;
declare const CascadePath: React.ForwardRefExoticComponent<CascadePathProps & React.RefAttributes<HTMLDivElement>>;
interface CascadeComponent extends React.ForwardRefExoticComponent<CascadeProps & React.RefAttributes<HTMLDivElement>> {
    Input: typeof CascadeInput;
    Dropdown: typeof CascadeDropdown;
    Option: typeof CascadeOptionComponent;
    Empty: typeof CascadeEmpty;
    Path: typeof CascadePath;
}
declare const CascadeComponent: CascadeComponent;
export { CascadeComponent as Cascade };