import React from 'react'; import PropTypes from 'prop-types'; import { Item } from '@splunk/react-ui/Menu'; import { ComponentProps } from '../utils/types'; type OptionClickHandler = (event: React.MouseEvent, data: { value: string | number | boolean; }) => void; interface OptionPropsBase { /** @private */ active?: boolean; /** * When provided, `children` is rendered instead of the `label`. * * Caution: The element(s) passed here must be pure. */ children?: React.ReactNode; /** * Additional information to explain the option, such as "Recommended". */ description?: string; /** * The description text may appear to the right of the label or under the label. */ descriptionPosition?: 'right' | 'bottom'; /** * Prevents user interaction and adds disabled styling. * * If set to `dimmed`, the component is able to receive focus. * If set to `disabled`, the component is unable to receive focus (as a result of setting the html `disabled` attribute). */ disabled?: boolean | 'dimmed' | 'disabled'; /** * A React ref which is set to the DOM element when the component mounts, and null when it unmounts. */ elementRef?: React.Ref; /** * Allow the endAdornment to be passed to the underlying Menu.Item. * @private */ endAdornment?: React.ReactNode; /** * Adding hidden options can be useful for resolving the selected display label and icon, * when the option should not be in the list. This scenario can arise when Select's filter is * controlled, because the selected item may be filtered out; and when a legacy option is * valid, but should no longer be displayed as a selectable option. */ hidden?: boolean; /** * The icon to show before the label. See the @splunk/react-icons package for * drop in icons. * * Caution: The element(s) passed here must be pure. All icons in the react-icons package are pure. */ icon?: React.ReactNode; /** * The text to show for the option when `children` is not defined. When filtering, the * `label` is used for matching to the filter text. */ label: string; /** * Sections of the label string to highlight as a match. This is automatically set for * uncontrolled filters, so it's not normally necessary to set this property when using * filtering. */ matchRanges?: { start: number; end: number; }[]; /** * @private Passed down from */ multiple?: boolean; /** @private */ onClick?: OptionClickHandler; /** @private */ role?: 'menuitemcheckbox' | 'option'; /** @private */ selected?: boolean | 'some'; /** * When `true`, wrapping is disabled and any additional text is ellipsised. */ truncate?: boolean; /** * The label and/or icon will be placed on the Control's toggle if it matches this value. */ value: string | number | boolean; } type OptionProps = ComponentProps; /** * An option within a `Multiselect`. */ declare function Option({ children, descriptionPosition, disabled, elementRef, endAdornment, icon, label, multiple, onClick, role, value, ...otherProps }: OptionProps): React.JSX.Element; declare namespace Option { var propTypes: { /** @private */ active: PropTypes.Requireable; children: PropTypes.Requireable; description: PropTypes.Requireable; descriptionPosition: PropTypes.Requireable; disabled: PropTypes.Requireable>; elementRef: PropTypes.Requireable; endAdornment: PropTypes.Requireable; hidden: PropTypes.Requireable; icon: PropTypes.Requireable; label: PropTypes.Validator; /** * @private Passed down from */ multiple: PropTypes.Requireable; matchRanges: PropTypes.Requireable<(PropTypes.InferProps<{ start: PropTypes.Validator; end: PropTypes.Validator; }> | null | undefined)[]>; /** @private */ onClick: PropTypes.Requireable<(...args: any[]) => any>; /** @private */ role: PropTypes.Requireable; /** @private */ selected: PropTypes.Requireable>; truncate: PropTypes.Requireable; value: PropTypes.Validator>>; }; var type: typeof Item; } export default Option; export type { OptionClickHandler };