import React, { type HTMLAttributes, type ReactElement } from 'react';
import { type CheckedStatus } from "../Checkbox";
import { type OverrideClassName } from "../types/OverrideClassName";
export type TableContainerProps = {
    children?: React.ReactNode;
    /** @default "compact" */
    variant?: 'compact' | 'default' | 'data';
};
/**
 * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929256/Table Guidance} |
 * {@link https://cultureamp.design/?path=/docs/components-table--docs Storybook}
 */
export declare const TableContainer: ({ variant, children, ...otherProps }: TableContainerProps) => JSX.Element;
export type TableHeaderProps = {
    children?: React.ReactNode;
};
export declare const TableHeader: ({ children, ...otherProps }: TableHeaderProps) => JSX.Element;
export type TableHeaderRowProps = {
    children?: React.ReactNode;
};
export type TableHeaderRowCellCheckboxProps = {
    checkable?: boolean;
    checkedStatus?: CheckedStatus;
    /** This will be passed into the aria-label for the checkbox to provide context to the user */
    checkboxLabel?: string;
    onCheck?: (event: React.ChangeEvent<HTMLInputElement>) => any;
};
/**
 * @param width value between 1 and 0, to be calculated as a percentage
 * @param flex CSS flex shorthand as a string. Be sure to specify the flex grow,
 *        shrink, and basis, due to IE11 compatibility. eg. use "1 1 auto"
 *        instead of just "1".
 */
export type TableHeaderRowCellProps = {
    labelText: string;
    onClick?: ((e: React.MouseEvent<HTMLButtonElement>) => any) | ((e: React.MouseEvent<HTMLAnchorElement>) => any);
    width?: number;
    flex?: string;
    href?: string;
    icon?: ReactElement;
    reversed?: boolean;
    /**
     * Shows an up or down arrow, to show that the column is sorted.
     */
    sorting?: 'ascending' | 'descending';
    wrapping?: 'nowrap' | 'wrap';
    align?: 'start' | 'center' | 'end';
    tooltipInfo?: string;
    /** If set, this will hide the tooltip exclamation icon. Useful in situations where
     the table header does not have enough space. This should be done with caution as tooltips
     should have a visual indicator to users */
    isTooltipIconHidden?: boolean;
    /**
     * Specify where the tooltip should be rendered.
     */
    tooltipPortalSelector?: string | undefined;
    /** If set, this will show the arrow in the direction provided
    when the header cell is hovered over. */
    sortingArrowsOnHover?: 'ascending' | 'descending' | undefined;
} & TableHeaderRowCellCheckboxProps & OverrideClassName<HTMLAttributes<HTMLElement>>;
export declare const TableHeaderRowCell: ({ labelText, onClick, href, width, flex, icon, checkable, checkedStatus, checkboxLabel, onCheck, reversed, sorting: sortingRaw, wrapping, align, tooltipInfo, isTooltipIconHidden, tooltipPortalSelector, sortingArrowsOnHover, classNameOverride, ...otherProps }: TableHeaderRowCellProps) => JSX.Element;
type ButtonClickEvent = (e: React.MouseEvent<HTMLButtonElement>) => void;
type AnchorClickEvent = (e: React.MouseEvent<HTMLAnchorElement>) => void;
/**
 * As the Card examples in Storybook take a TableRow,
 * I opted to give the child the role="row" tag. That being
 * said, while TableHeader has a role="rowgroup" as given
 * in an example on the accessibility docs, I couldn't justify
 * adding the same here as all rows look to be wrapped in the
 * TableCard.
 *
 * It may mean that the consumer needs to add their own container
 * around with the role="row". We could also just add it as a
 * very simple component similar to TableHeader.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role
 */
export type TableCardProps = OverrideClassName<HTMLAttributes<HTMLElement>> & {
    onClick?: ButtonClickEvent | AnchorClickEvent;
    expanded?: boolean;
    expandedStyle?: 'well' | 'popout';
    href?: string;
    forceHoverState?: boolean;
    children?: React.ReactNode;
};
export declare const TableCard: ({ children, expanded, expandedStyle, onClick, href, forceHoverState, classNameOverride, ...otherProps }: TableCardProps) => JSX.Element;
/**
 * Aria roles like aria-rowindex can be added from
 * the component consumer.
 *
 * @param {*} { children, classNameOverride, ...otherProps }
 */
export type TableRowProps = OverrideClassName<HTMLAttributes<HTMLElement>> & {
    children?: React.ReactNode;
};
export declare const TableRow: ({ children, classNameOverride, ...otherProps }: TableRowProps) => JSX.Element;
/**
 * @param width value between 1 and 0, to be calculated as a percentage
 * @param flex CSS flex shorthand as a string. Be sure to specify the flex grow,
 *        shrink, and basis, due to IE11 compatibility. eg. use "1 1 auto"
 *        instead of just "1".
 */
export type TableRowCellProps = OverrideClassName<HTMLAttributes<HTMLElement>> & {
    children?: React.ReactNode;
    width?: number;
    flex?: string;
    href?: string;
};
export declare const TableRowCell: ({ children, width, flex, href, classNameOverride, ...otherProps }: TableRowCellProps) => JSX.Element;
export {};