import * as React from 'react'; import { css } from '@patternfly/react-styles'; import { Button, ButtonVariant } from '../Button'; import { Badge } from '../Badge'; import { Icon } from '../Icon'; import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; import AngleUpIcon from '@patternfly/react-icons/dist/esm/icons/angle-up-icon'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; import { AdvancedSearchMenu } from './AdvancedSearchMenu'; import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup'; import { InputGroup, InputGroupItem } from '../InputGroup'; import { Popper } from '../../helpers'; import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group'; /** Properties for adding search attributes to an advanced search input. These properties must * be passed in as an object within an array to the search input component's attribute properrty. */ export interface SearchInputSearchAttribute { /** The search attribute's value to be provided in the search input's query string. * It should have no spaces and be unique for every attribute. */ attr: string; /** The search attribute's display name. It is used to label the field in the advanced * search menu. */ display: React.ReactNode; } /** Properties for creating an expandable search input. These properties should be passed into * the search input component's expandableInput property. */ export interface SearchInputExpandable { /** Flag to indicate if the search input is expanded. */ isExpanded: boolean; /** Callback function to toggle the expandable search input. */ onToggleExpand: (event: React.SyntheticEvent, isExpanded: boolean) => void; /** An accessible label for the expandable search input toggle. */ toggleAriaLabel: string; } /** The main search input component. */ export interface SearchInputProps extends Omit, 'onChange' | 'results' | 'ref'> { /** Delimiter in the query string for pairing attributes with search values. * Required whenever attributes are passed as props. */ advancedSearchDelimiter?: string; /** The container to append the menu to. * If your menu is being cut off you can append it to an element higher up the DOM tree. * Some examples: * appendTo={() => document.body} * appendTo={document.getElementById('target')} */ appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; /** An accessible label for the search input. */ 'aria-label'?: string; /** Flag to indicate utilities should be displayed. By default if this prop is undefined or false, utilities will only be displayed when the search input has a value. */ areUtilitiesDisplayed?: boolean; /** Array of attribute values used for dynamically generated advanced search. */ attributes?: string[] | SearchInputSearchAttribute[]; /** Additional classes added to the search input. */ className?: string; /** Object that makes the search input expandable/collapsible. */ expandableInput?: SearchInputExpandable; /* Additional elements added after the attributes in the form. * The new form elements can be wrapped in a form group component for automatic formatting. */ formAdditionalItems?: React.ReactNode; /** Attribute label for strings unassociated with one of the provided listed attributes. */ hasWordsAttrLabel?: React.ReactNode; /** A suggestion for autocompleting. */ hint?: string; /** @hide A reference object to attach to the input box. */ innerRef?: React.RefObject; /** A flag for controlling the open state of a custom advanced search implementation. */ isAdvancedSearchOpen?: boolean; /** Flag indicating if search input is disabled. */ isDisabled?: boolean;