@lax-wp/design-system/dist/components/floating-bar/FloatingBar.d.ts

A comprehensive React + TypeScript design system built with Vite, providing reusable UI components for the LAX web portal applications. Features a complete set of form components, data display elements, and interactive controls with full TypeScript suppor

import { type ReactNode, type MouseEvent } from "react";
/**
 * Available floating bar sizes
 */
export type FloatingBarSize = "small" | "medium" | "large";
/**
 * Available floating bar positions
 */
export type FloatingBarPosition = "top" | "bottom";
/**
 * Available floating bar themes
 */
export type FloatingBarTheme = "primary" | "dark" | "light";
/**
 * Configuration for action buttons in the floating bar
 */
export interface FloatingBarActionConfig {
    /** Unique identifier for the action */
    id: string;
    /** Button label text */
    label?: string;
    /** Icon element to display */
    icon: ReactNode;
    /** Click handler for the action */
    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
    /** Icon for dropdown mode */
    dropdownIcon?: ReactNode;
    /** Whether the action is visible */
    visible?: boolean;
    /** Whether the action is disabled */
    disabled?: boolean;
    /** Tooltip text */
    tooltip?: string;
    /** Whether to hide the label text */
    hideLabel?: boolean;
    /** Action type */
    type?: "button" | "dropdown";
    /** Dropdown menu items */
    dropdownItems?: Array<{
        label: ReactNode;
        key: string;
        disabled?: boolean;
        onClick?: () => void;
    }>;
    /** Custom CSS classes */
    className?: string;
    /** Test ID for testing */
    "data-testid"?: string;
}
/**
 * Configuration for the delete action
 */
export interface FloatingBarDeleteConfig {
    /** Delete button label */
    label?: string;
    /** Whether delete is disabled */
    disabled?: boolean;
    /** Delete action handler */
    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
    /** Custom icon for delete */
    icon?: ReactNode;
    /** Delete confirmation required */
    confirmRequired?: boolean;
    /** Confirmation message */
    confirmMessage?: string;
}
/**
 * Props for the FloatingBar component
 */
export interface FloatingBarProps {
    /** Whether the floating bar is visible */
    show?: boolean;
    /** Close handler */
    onClose: () => void;
    /** Array of action configurations */
    actionItems: FloatingBarActionConfig[];
    /** Number of selected items */
    selectedItemsCount?: number;
    /** Delete action configuration */
    deleteConfig?: FloatingBarDeleteConfig;
    /** Whether to show action background */
    showActionBackground?: boolean;
    /** Floating bar size */
    size?: FloatingBarSize;
    /** Floating bar position */
    position?: FloatingBarPosition;
    /** Floating bar theme */
    theme?: FloatingBarTheme;
    /** Custom width */
    width?: string | number;
    /** Custom CSS classes */
    className?: string;
    /** Custom selected text */
    selectedText?: string;
    /** Custom actions text for collapsed mode */
    actionsText?: string;
    /** Whether to auto-hide on small screens */
    autoHide?: boolean;
    /** Maximum items before collapsing */
    maxVisibleItems?: number;
    /** Animation duration in seconds */
    animationDuration?: number;
    /** Custom aria-label */
    "aria-label"?: string;
    /** Test ID for testing */
    "data-testid"?: string;
    /** Error state */
    error?: boolean;
    /** Loading state */
    loading?: boolean;
    /** Error message */
    errorMessage?: string;
    /** Callback when actions overflow */
    onOverflow?: (isOverflowing: boolean) => void;
}
/**
 * FloatingBar component provides a floating action bar for bulk operations
 *
 * @example
 * ```tsx
 * <FloatingBar
 *   show={selectedItems.length > 0}
 *   onClose={() => setSelectedItems([])}
 *   selectedItemsCount={selectedItems.length}
 *   actionItems={[
 *     {
 *       id: "edit",
 *       label: "Edit",
 *       icon: <EditIcon />,
 *       onClick: handleEdit,
 *     },
 *     {
 *       id: "archive",
 *       label: "Archive",
 *       icon: <ArchiveIcon />,
 *       onClick: handleArchive,
 *     },
 *   ]}
 *   deleteConfig={{
 *     label: "Delete",
 *     onClick: handleDelete,
 *     confirmRequired: true,
 *   }}
 * />
 * ```
 */
export declare const FloatingBar: import("react").ForwardRefExoticComponent<FloatingBarProps & import("react").RefAttributes<HTMLDivElement>>;