import React from 'react'; import { UniqueIdentifier } from '@dnd-kit/core'; import PropTypes from 'prop-types'; import { HeadAutosizeColumnHandler, HeadRequestMoveColumnHandler, HeadRequestResizeColumnHandler } from './Head'; import { HeadCellKeyDownHandler } from './HeadCell'; import { ComponentProps } from '../utils/types'; /** @public */ type HeadDropdownCellPossibleCloseReason = 'clickAway' | 'contentClick' | 'escapeKey' | 'offScreen' | 'tabKey' | 'toggleClick'; type HeadDropdownCellAutosizeColumnHandler = HeadAutosizeColumnHandler; type HeadDropdownCellKeyDownHandler = HeadCellKeyDownHandler; /** @public */ type HeadDropdownCellRequestCloseHandler = (event: React.MouseEvent | React.KeyboardEvent | MouseEvent | KeyboardEvent | TouchEvent | undefined, data: { columnId?: string; index: number; reason: HeadDropdownCellPossibleCloseReason; }) => void; type HeadDropdownCellRequestMoveColumnHandler = HeadRequestMoveColumnHandler; /** @public */ type HeadDropdownCellRequestOpenHandler = (event: React.MouseEvent | React.KeyboardEvent, data: { columnId?: string; index: number; reason: 'toggleClick'; }) => void; type HeadDropdownCellRequestResizeHandler = HeadRequestResizeColumnHandler; interface HeadDropdownCellPropsBase { /** Align the text in the label. */ align?: 'left' | 'center' | 'right'; /** * A React ref which is set to the button element when the component mounts and null when it unmounts. */ buttonRef?: React.Ref; /** * If there is not enough room to render the `Popover` in a direction, this option * enables it to be rendered over the Head. */ canCoverHead?: boolean; children: React.ReactNode; /** * An array of reasons for which this `Popover` should close. */ closeReasons?: HeadDropdownCellPossibleCloseReason[]; /** * An id that is passed to the `onRequestOpen`, `onRequestClose` callback and as `Table`'s `onRequestResizeColumn` callback. */ columnId?: string; /** @private. */ dragId?: UniqueIdentifier; /** * A React ref which is set to the DOM element when the component mounts and null when it unmounts. */ elementRef?: React.Ref; /** * A string used to generate the `aria-label` for the head cell during column reordering. * * When the `label` prop is not a string, providing `headCellScreenReaderText` is recommended * to improve the screen reader announcements during the reordering interaction. */ headCellScreenReaderText?: string; /** * An array of reasons for which to set focus on the toggle. Only subset of `closeReasons` * will be honored. When Menu.Items open a Modal or other dialog, it may be necessary to * remove the 'contentClick' reason to allow focus to be passed to the dialog. */ focusToggleReasons?: HeadDropdownCellPossibleCloseReason[]; /** @private The index of the cell, skipping the info column. */ index?: number; /** * The label on the heading, which may simply be text or may contain an element with * icons or other markup. */ label?: React.ReactNode; /** @private. */ onAutosizeColumn?: HeadDropdownCellAutosizeColumnHandler; /** * @private. This will be passed through, and will work as expected. */ onKeyDown?: HeadDropdownCellKeyDownHandler; /** * A callback function invoked with a data object containing the event (if applicable) and * a reason for the close request. */ onRequestClose?: HeadDropdownCellRequestCloseHandler; /** @private. */ onRequestMoveColumn?: HeadDropdownCellRequestMoveColumnHandler; /** * A callback function invoked with a data object containing the event. (The reason is * always toggleClick). */ onRequestOpen?: HeadDropdownCellRequestOpenHandler; /** @private. */ onRequestResize?: HeadDropdownCellRequestResizeHandler; /** * If an open prop is provided, this component will behave as a * [controlled component](https://reactjs.org/docs/forms.html#controlled-components). * This means that the consumer is responsible for handling the open/close state. If no * open prop is provided, the component will handle the open/close state internally. */ open?: boolean; /** * See `repositionMode` on `Popover` for details. */ repositionMode?: 'none' | 'flip' | 'any'; /** * Allow the user to resize the column when onRequestResize is passed to the `Table`. Set * resizable to false to prevent some columns for resizing. */ resizable?: boolean; /** * Keep focus within the Popover while open. Note, Menu handles it's own focus by default, * so this is only necessary when the popover contains other types of content. */ retainFocus?: boolean; /** * When true, the Popover will automatically take focus when 'open' changes to true. * Disable this for a Popover that has shows on hover, such as a tooltip. */ takeFocus?: boolean; /** * Truncate the text in the label. `truncate=false` is not compatible with `Table`'s * `onRequestResize`. */ truncate?: boolean; /** * @private * Used internally to suppress focus when this `HeadDropdownCell` is superseded by one in an * overlaid `HeadTable` for user interactions. */ visible?: boolean; /** @private */ variant?: 'toggleAll' | 'info' | 'actions'; /** * The width of the column in pixels. */ width?: number; } type HeadDropdownCellProps = ComponentProps; declare function HeadDropdownCell({ align, buttonRef, canCoverHead, children, closeReasons, columnId, dragId, elementRef, headCellScreenReaderText, focusToggleReasons, id, index, label, onAutosizeColumn, onKeyDown, onRequestClose, onRequestMoveColumn, onRequestOpen, onRequestResize, open, repositionMode, resizable, retainFocus, style, takeFocus, truncate, variant, visible, width, ...otherProps }: HeadDropdownCellProps): React.JSX.Element; declare namespace HeadDropdownCell { var propTypes: { align: PropTypes.Requireable; buttonRef: PropTypes.Requireable; canCoverHead: PropTypes.Requireable; children: PropTypes.Validator>; closeReasons: PropTypes.Requireable<(HeadDropdownCellPossibleCloseReason | null | undefined)[]>; columnId: PropTypes.Requireable; /** @private. */ dragId: PropTypes.Requireable>; elementRef: PropTypes.Requireable; headCellScreenReaderText: PropTypes.Requireable; focusToggleReasons: PropTypes.Requireable<(HeadDropdownCellPossibleCloseReason | null | undefined)[]>; /** @private The index of the cell, skipping the info column. */ index: PropTypes.Requireable; label: PropTypes.Requireable; /** @private. */ onAutosizeColumn: PropTypes.Requireable<(...args: any[]) => any>; /** * @private. This will be passed through, and will work as expected. */ onKeyDown: PropTypes.Requireable<(...args: any[]) => any>; onRequestClose: PropTypes.Requireable<(...args: any[]) => any>; /** @private. */ onRequestMoveColumn: PropTypes.Requireable<(...args: any[]) => any>; onRequestOpen: PropTypes.Requireable<(...args: any[]) => any>; /** @private. */ onRequestResize: PropTypes.Requireable<(...args: any[]) => any>; open: PropTypes.Requireable; repositionMode: PropTypes.Requireable; resizable: PropTypes.Requireable; retainFocus: PropTypes.Requireable; takeFocus: PropTypes.Requireable; truncate: PropTypes.Requireable; /** * @private * Used internally to suppress focus when this `HeadDropdownCell` is superseded by one in an * overlaid `HeadTable` for user interactions. */ visible: PropTypes.Requireable; width: PropTypes.Requireable; /** @private. */ variant: PropTypes.Requireable; }; var splunkUiType: string; var possibleCloseReasons: HeadDropdownCellPossibleCloseReason[]; } export default HeadDropdownCell; export { HeadDropdownCellPossibleCloseReason, HeadDropdownCellRequestCloseHandler, HeadDropdownCellRequestMoveColumnHandler, HeadDropdownCellRequestOpenHandler, };