@patternfly/react-core 4.243.1 → 4.244.1

package/src/components/Pagination/Pagination.tsx

@@ -11,8 +11,8 @@ import widthChars from '@patternfly/react-tokens/dist/esm/c_pagination__nav_page
 import { PickOptional } from '../../helpers';
 
 export enum PaginationVariant {
-  top = 'top',
-  bottom = 'bottom'
+  bottom = 'bottom',
+  top = 'top'
 }
 
 const defaultPerPageOptions = [
@@ -34,40 +34,48 @@ const defaultPerPageOptions = [
   }
 ];
 
+/** Properties to customize the content and behavior of the pagination dropdown options. These
+ * properties should be passed into the pagination component's perPageOptions property.
+ */
+
 export interface PerPageOptions {
-  /** option title */
+  /** The text title of the option, which is rendered inside the pagination dropdown menu. */
   title?: string;
-  /** option value */
+  /** The value of the option, which determines how many items are displayed per page. */
   value?: number;
 }
 
+/** Properties to customize various pagination titles. The following properties should be
+ * passed into the pagination component's title property.
+ */
+
 export interface PaginationTitles {
-  /** The title of a page displayed beside the page number */
-  page?: string;
-  /** The title of a page displayed beside the page number (plural form) */
-  pages?: string;
-  /** The type or title of the items being paginated */
+  /** Accessible label for the input displaying the current page. */
+  currPage?: string;
+  /** The type or title of the items being paginated. */
   items?: string;
-  /** The title of the pagination options menu */
+  /** The title of the pagination options menu. */
   itemsPerPage?: string;
-  /** The suffix to be displayed after each option on the options menu dropdown */
+  /** Label for the English word "of". */
+  ofWord?: string;
+  /** Accessible label for the options toggle. */
+  optionsToggle?: string;
+  /** The title of a page displayed beside the page number. */
+  page?: string;
+  /** The title of a page displayed beside the page number (plural form). */
+  pages?: string;
+  /** Accessible label for the pagination component. */
+  paginationTitle?: string;
+  /** The suffix to be displayed after each option on the options menu dropdown. */
   perPageSuffix?: string;
-  /** Accessible label for the button which moves to the first page */
+  /** Accessible label for the button which moves to the first page. */
   toFirstPage?: string;
-  /** Accessible label for the button which moves to the previous page */
-  toPreviousPage?: string;
-  /** Accessible label for the button which moves to the last page */
+  /** Accessible label for the button which moves to the last page. */
   toLastPage?: string;
-  /** Accessible label for the button which moves to the next page */
+  /** Accessible label for the button which moves to the next page. */
   toNextPage?: string;
-  /** Accessible label for the options toggle */
-  optionsToggle?: string;
-  /** Accessible label for the input displaying the current page */
-  currPage?: string;
-  /** Accessible label for the pagination component */
-  paginationTitle?: string;
-  /** Accessible label for the English word "of" */
-  ofWord?: string;
+  /** Accessible label for the button which moves to the previous page. */
+  toPreviousPage?: string;
 }
 
 export type OnSetPage = (
@@ -86,65 +94,71 @@ export type OnPerPageSelect = (
   endIdx?: number
 ) => void;
 
+/** The main pagination component. */
+
 export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
-  /** What should be rendered inside */
+  /** What should be rendered inside the pagination. */
   children?: React.ReactNode;
-  /** Additional classes for the container. */
+  /** Additional classes for the pagination container. */
   className?: string;
-  /** Total number of items. */
-  itemCount?: number;
-  /** Position where pagination is rendered. */
-  variant?: 'top' | 'bottom' | PaginationVariant;
-  /** Flag indicating if pagination is disabled */
-  isDisabled?: boolean;
-  /** Flag indicating if pagination is compact */
+  /** Indicate whether to show last full page of results when user selects perPage value
+   * greater than remaining rows.
+   */
+  defaultToFullPage?: boolean;
+  /** Direction of dropdown context menu. */
+  dropDirection?: 'up' | 'down';
+  /** Page to start at. */
+  firstPage?: number;
+  /** Flag indicating if pagination is compact. */
   isCompact?: boolean;
-  /** Flag indicating if pagination should not be sticky on mobile */
+  /** Flag indicating if pagination is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating if pagination should not be sticky on mobile. */
   isStatic?: boolean;
-  /** Flag indicating if pagination should stick to its position (based on variant) */
+  /** Flag indicating if pagination should stick to its position (based on variant). */
   isSticky?: boolean;
+  /** Total number of items. */
+  itemCount?: number;
+  /** Last index of items on current page. */
+  itemsEnd?: number;
+  /** First index of items on current page. */
+  itemsStart?: number;
+  /** Start index of rows to display, used in place of providing page. */
+  offset?: number;
+  /** Current page number. */
+  page?: number;
   /** Number of items per page. */
   perPage?: number;
-  /** Array of the number of items per page  options. */
+  /** Component to be used for wrapping the toggle contents. Use "button" when you want
+   * all of the toggle text to be clickable.
+   */
+  perPageComponent?: 'div' | 'button';
+  /** Array of the number of items per page options. */
   perPageOptions?: PerPageOptions[];
-  /** Indicate whether to show last full page of results when user selects perPage value greater than remaining rows */
-  defaultToFullPage?: boolean;
-  /** Page we start at. */
-  firstPage?: number;
-  /** Current page number. */
-  page?: number;
-  /** Start index of rows to display, used in place of providing page */
-  offset?: number;
-  /** First index of items on current page. */
-  itemsStart?: number;
-  /** Last index of items on current page. */
-  itemsEnd?: number;
-  /** ID to ideintify widget on page. */
-  widgetId?: string;
-  /** Direction of dropdown context menu. */
-  dropDirection?: 'up' | 'down';
-  /** Object with titles to display in pagination. */
-  titles?: PaginationTitles;
-  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle, ofWord props. */
-  toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
-  /** Function called when user sets page. */
-  onSetPage?: OnSetPage;
   /** Function called when user clicks on navigate to first page. */
   onFirstClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks on navigate to previous page. */
-  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks on navigate to next page. */
-  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user clicks on navigate to last page. */
   onLastClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user clicks on navigate to next page. */
+  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user inputs page number. */
   onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
-  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
-   * all of the toggle text to be clickable.
+  /** Function called when user clicks on navigate to previous page. */
+  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user sets page. */
+  onSetPage?: OnSetPage;
+  /** Object with titles to display in pagination. */
+  titles?: PaginationTitles;
+  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
+   * itemCount, itemsTitle, and/or ofWord props.
    */
-  perPageComponent?: 'div' | 'button';
+  toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
+  /** Position where pagination is rendered. */
+  variant?: 'top' | 'bottom' | PaginationVariant;
+  /** Id to ideintify widget on page. */
+  widgetId?: string;
 }
 
 const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -8,43 +8,47 @@ import { ToggleTemplateProps, ToggleTemplate } from './ToggleTemplate';
 import { PerPageOptions, OnPerPageSelect } from './Pagination';
 
 export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivElement> {
-  /** Custom class name added to the pagination options menu */
+  /** Custom class name added to the pagination options menu. */
   className?: string;
-  /** Id added to the title of the Pagination options menu */
+  /** Id added to the title of the pagination options menu. */
   widgetId?: string;
-  /** Flag indicating if pagination options menu is disabled */
+  /** Flag indicating if pagination options menu is disabled. */
   isDisabled?: boolean;
-  /** Menu will open up or open down from the options menu toggle */
+  /** Menu will open up or open down from the options menu toggle. */
   dropDirection?: 'up' | 'down';
-  /** Array of titles and values which will be the options on the options menu dropdown */
+  /** Array of titles and values which will be the options on the options menu dropdown. */
   perPageOptions?: PerPageOptions[];
-  /** The title of the pagination options menu */
+  /** The title of the pagination options menu. */
   itemsPerPageTitle?: string;
-  /** Current page number */
+  /** Current page number. */
   page?: number;
-  /** The suffix to be displayed after each option on the options menu dropdown */
+  /** The suffix to be displayed after each option on the options menu dropdown. */
   perPageSuffix?: string;
-  /** The type or title of the items being paginated */
+  /** The type or title of the items being paginated. */
   itemsTitle?: string;
-  /** Accessible label for the options toggle */
+  /** Accessible label for the options toggle. */
   optionsToggle?: string;
-  /** The total number of items being paginated */
+  /** The total number of items being paginated. */
   itemCount?: number;
-  /** The first index of the items being paginated */
+  /** The first index of the items being paginated. */
   firstIndex?: number;
-  /** The last index of the items being paginated */
+  /** The last index of the items being paginated. */
   lastIndex?: number;
-  /** Flag to show last full page of results if perPage selected > remaining rows */
+  /** Flag to indicate whether to show last full page of results when user selects perPage
+   * value that is greater than remaining rows.
+   */
   defaultToFullPage?: boolean;
-  /** The number of items to be displayed per page */
+  /** The number of items to be displayed per page. */
   perPage?: number;
-  /** The number of the last page */
+  /** The number of the last page. */
   lastPage?: number;
-  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle props. */
+  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
+   * itemCount, and/or itemsTitle props.
+   */
   toggleTemplate: ((props: ToggleTemplateProps) => React.ReactElement) | string;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
-  /** Label for the English word "of" */
+  /** Label for the English word "of". */
   ofWord?: string;
   /** Component to be used for wrapping the toggle contents. Use 'button' when you want
    * all of the toggle text to be clickable.

package/src/components/Pagination/ToggleTemplate.tsx

@@ -1,5 +1,9 @@
 import * as React from 'react';
 
+/** Allows more customization of the pagination dropdown toggle. The following properties
+ * should be passed into the pagination component's toggleTemplate property.
+ */
+
 export interface ToggleTemplateProps {
   /** The first index of the items being paginated */
   firstIndex?: number;

package/src/components/Popover/Popover.tsx

@@ -34,51 +34,63 @@ export enum PopoverPosition {
   rightEnd = 'right-end'
 }
 
+/** The main popover component. The following properties can also be passed into another component
+ * that has a property specifically for passing in popover properties.
+ */
+
 export interface PopoverProps {
-  /** Accessible label, required when header is not present */
-  'aria-label'?: string;
-  /** The element to append the popover to, defaults to body */
+  /** @beta Text announced by screen reader when alert severity variant is set to indicate
+   * severity level.
+   */
+  alertSeverityScreenReaderText?: string;
+  /** @beta Severity variants for an alert popover. This modifies the color of the header to
+   * match the severity.
+   */
+  alertSeverityVariant?: 'default' | 'info' | 'warning' | 'success' | 'danger';
+  /** The duration of the CSS fade transition animation. */
+  animationDuration?: number;
+  /** The element to append the popover to. Defaults to "document.body". */
   appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement);
+  /** Accessible label for the popover, required when header is not present. */
+  'aria-label'?: string;
   /**
-   * Body content
-   * If you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,
-   * or you can provide a function which will receive a callback as an argument to hide the popover
-   * i.e. bodyContent={hide => <Button onClick={() => hide()}>Close</Button>}
+   * Body content of the popover. If you want to close the popover after an action within the
+   * body content, you can use the isVisible prop for manual control, or you can provide a
+   * function which will receive a callback as an argument to hide the popover, i.e.
+   * bodyContent={hide => <Button onClick={() => hide()}>Close</Button>}
    */
   bodyContent: React.ReactNode | ((hide: () => void) => React.ReactNode);
+  /** @deprecated - no longer used. if you want to constrain the popper to a specific element
+   * use the appendTo prop instead.
+   */
+  boundary?: 'scrollParent' | 'window' | 'viewport' | HTMLElement;
   /**
-   * The reference element to which the Popover is relatively placed to.
-   * If you cannot wrap the reference with the Popover, you can use the reference prop instead.
+   * The reference element to which the popover is relatively placed to. If you cannot wrap
+   * the reference with the Popover, you can use the reference prop instead.
    * Usage: <Popover><Button>Reference</Button></Popover>
    */
   children?: ReactElement<any>;
-  /**
-   * The reference element to which the Popover is relatively placed to.
-   * If you can wrap the reference with the Popover, you can use the children prop instead.
-   * Usage: <Popover reference={() => document.getElementById('reference-element')} />
-   */
-  reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
-  /** Popover additional class */
+  /** Additional classes added to the popover. */
   className?: string;
-  /** Aria label for the Close button */
+  /** Accessible label for the close button. */
   closeBtnAriaLabel?: string;
-  /** Whether to show the close button */
-  showClose?: boolean;
-  /** Distance of the popover to its target, defaults to 25 */
+  /** Distance of the popover to its target. Defaults to 25. */
   distance?: number;
   /**
    * If true, tries to keep the popover in view by flipping it if necessary.
-   * If the position is set to 'auto', this prop is ignored
+   * If the position is set to 'auto', this prop is ignored.
    */
   enableFlip?: boolean;
   /**
    * The desired position to flip the popover to if the initial position is not possible.
-   * By setting this prop to 'flip' it attempts to flip the popover to the opposite side if there is no space.
-   * You can also pass an array of positions that determines the flip order. It should contain the initial position
-   * followed by alternative positions if that position is unavailable.
-   * Example: Initial position is 'top'. Button with popover is in the top right corner. 'flipBehavior' is set to
-   * ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no
-   * space to the right, so it finally shows the popover on the left.
+   * By setting this prop to 'flip' it attempts to flip the popover to the opposite side if
+   * there is no space.
+   * You can also pass an array of positions that determines the flip order. It should contain
+   * the initial position followed by alternative positions if that position is unavailable.
+   * Example: Initial position is 'top'. Button with popover is in the top right corner.
+   * 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it
+   * checks if right is available. There's also no space to the right, so it finally shows the
+   * popover on the left.
    */
   flipBehavior?:
     | 'flip'
@@ -97,40 +109,46 @@ export interface PopoverProps {
         | 'right-end'
       )[];
   /**
-   * Footer content
-   * If you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,
-   * or you can provide a function which will receive a callback as an argument to hide the popover
-   * i.e. footerContent={hide => <Button onClick={() => hide()}>Close</Button>}
+   * Footer content of the popover. If you want to close the popover after an action within the
+   * footer content, you can use the isVisible prop for manual control, or you can provide a
+   * function which will receive a callback as an argument to hide the popover, i.e.
+   * footerContent={hide => <Button onClick={() => hide()}>Close</Button>}
    */
   footerContent?: React.ReactNode | ((hide: () => void) => React.ReactNode);
+  /** Removes fixed-width and allows width to be defined by contents. */
+  hasAutoWidth?: boolean;
+  /** Allows content to touch edges of popover container. */
+  hasNoPadding?: boolean;
+  /** Sets the heading level to use for the popover header. Defaults to h6. */
+  headerComponent?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /**
-   * Simple header content to be placed within a title.
-   * If you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,
-   * or you can provide a function which will receive a callback as an argument to hide the popover
-   * i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}
+   * Simple header content to be placed within a title. If you want to close the popover after
+   * an action within the header content, you can use the isVisible prop for manual control,
+   * or you can provide a function which will receive a callback as an argument to hide the
+   * popover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}
    */
   headerContent?: React.ReactNode | ((hide: () => void) => React.ReactNode);
-  /** Sets the heading level to use for the popover header. Default is h6. */
-  headerComponent?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  /** @beta Icon to be displayed in the popover header **/
+  /** @beta Icon to be displayed in the popover header. **/
   headerIcon?: React.ReactNode;
-  /** @beta Severity variants for an alert popover. This modifies the color of the header to match the severity. */
-  alertSeverityVariant?: 'default' | 'info' | 'warning' | 'success' | 'danger';
-  /** @beta Text announced by screen reader when alert severity variant is set to indicate severity level */
-  alertSeverityScreenReaderText?: string;
-  /** Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user) */
+  /** Hides the popover when a click occurs outside (only works if isVisible is not controlled
+   * by the user).
+   */
   hideOnOutsideClick?: boolean;
+  /** Id used as part of the various popover elements (popover-${id}-header/body/footer). */
+  id?: string;
   /**
    * True to show the popover programmatically. Used in conjunction with the shouldClose prop.
-   * By default, the popover child element handles click events automatically. If you want to control this programmatically,
-   * the popover will not auto-close if the Close button is clicked, ESC key is used, or if a click occurs outside the popover.
-   * Instead, the consumer is responsible for closing the popover themselves by adding a callback listener for the shouldClose prop.
+   * By default, the popover child element handles click events automatically. If you want to
+   * control this programmatically, the popover will not auto-close if the close button is
+   * clicked, the escape key is used, or if a click occurs outside the popover. Instead, the
+   * consumer is responsible for closing the popover themselves by adding a callback listener
+   * for the shouldClose prop.
    */
   isVisible?: boolean;
-  /** Minimum width of the popover (default 6.25rem) */
-  minWidth?: string;
-  /** Maximum width of the popover (default 18.75rem) */
+  /** Maximum width of the popover (default 18.75rem). */
   maxWidth?: string;
+  /** Minimum width of the popover (default 6.25rem). */
+  minWidth?: string;
   /**
    * Lifecycle function invoked when the popover has fully transitioned out.
    * Note: The tip argument is no longer passed and has been deprecated.
@@ -157,9 +175,9 @@ export interface PopoverProps {
    */
   onShown?: (tip?: TippyInstance) => void;
   /**
-   * Popover position. Note: With 'enableFlip' set to true,
-   * it will change the position if there is not enough space for the starting position.
-   * The behavior of where it flips to can be controlled through the flipBehavior prop.
+   * Popover position. Note: With the enableFlip property set to true, it will change the
+   * position if there is not enough space for the starting position. The behavior of where it
+   * flips to can be controlled through the flipBehavior property.
    */
   position?:
     | PopoverPosition
@@ -177,34 +195,32 @@ export interface PopoverProps {
     | 'right-start'
     | 'right-end';
   /**
-   * Callback function that is only invoked when isVisible is also controlled. Called when the popover Close button is
-   * clicked, Enter key was used on it, or the ESC key is used.
+   * The reference element to which the popover is relatively placed to. If you can wrap the
+   * reference with the popover, you can use the children prop instead.
+   * Usage: <Popover reference={() => document.getElementById('reference-element')} />
+   */
+  reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
+  /**
+   * Callback function that is only invoked when isVisible is also controlled. Called when the
+   * popover close button is clicked, the enter key was used on it, or the escape key is used.
    * Note: The tip argument is no longer passed and has been deprecated.
    */
   shouldClose?: (tip?: TippyInstance, hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void;
   /**
-   * Callback function that is only invoked when isVisible is also controlled. Called when the Enter key is
-   * used on the focused trigger
+   * Callback function that is only invoked when isVisible is also controlled. Called when the
+   * enter key is used on the focused trigger.
    */
   shouldOpen?: (showFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void;
-  /** z-index of the popover */
-  zIndex?: number;
-  /** CSS fade transition animation duration */
-  animationDuration?: number;
-  /** id used as part of the various popover elements (popover-${id}-header/body/footer) */
-  id?: string;
-  /** Whether to trap focus in the popover */
-  withFocusTrap?: boolean;
-  /** Removes fixed-width and allows width to be defined by contents */
-  hasAutoWidth?: boolean;
-  /** Allows content to touch edges of popover container */
-  hasNoPadding?: boolean;
-  /** @deprecated - no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead */
-  boundary?: 'scrollParent' | 'window' | 'viewport' | HTMLElement;
-  /** @deprecated - no longer used */
+  /** Flag indicating whether the close button should be shown. */
+  showClose?: boolean;
+  /** @deprecated - no longer used. */
   tippyProps?: Partial<TippyProps>;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
+  /** Whether to trap focus in the popover. */
+  withFocusTrap?: boolean;
+  /** The z-index of the popover. */
+  zIndex?: number;
 }
 
 const alertStyle = {

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -8,44 +8,45 @@ import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
 
 export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
-  /** Additional classes added to the Advanced search menu */
+  /** Delimiter in the query string for pairing attributes with search values.
+   * Required whenever attributes are passed as props.
+   */
+  advancedSearchDelimiter?: string;
+  /** Array of attribute values used for dynamically generated advanced search. */
+  attributes?: string[] | SearchAttribute[];
+  /** Additional classes added to the advanced search menu. */
   className?: string;
-  /** Value of the search input */
-  value?: string;
-  /** Ref of the div wrapping the whole search input **/
-  parentRef?: React.RefObject<any>;
-  /** Ref of the input element within the search input**/
-  parentInputRef?: React.RefObject<any>;
-  /** Function which builds an attribute-value map by parsing the value in the search input */
+  /* 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;
+  /** Function which builds an attribute-value map by parsing the value in the search input. */
   getAttrValueMap?: () => { [key: string]: string };
-  /** A callback for when the search button clicked changes */
+  /** Attribute label for strings unassociated with one of the provided listed attributes. */
+  hasWordsAttrLabel?: React.ReactNode;
+  /** Flag for toggling the open/close state of the advanced search menu. */
+  isSearchMenuOpen?: boolean;
+  /** A callback for when the input value changes. */
+  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  /** A callback for when the user clicks the clear button. */
+  onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** A callback for when the search button is clicked. */
   onSearch?: (
     value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
     attrValueMap: { [key: string]: string }
   ) => void;
-  /** A callback for when the user clicks the clear button */
-  onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** A callback for when the input value changes */
-  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  /** Function called to toggle the advanced search menu */
+  /** A callback for when the open advanced search button is clicked. */
   onToggleAdvancedMenu?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Flag for toggling the open/close state of the advanced search menu */
-  isSearchMenuOpen?: boolean;
-  /** Label for the buttons which reset the advanced search form and clear the search input */
+  /** Ref of the input element within the search input. */
+  parentInputRef?: React.RefObject<any>;
+  /** Ref of the div wrapping the whole search input. */
+  parentRef?: React.RefObject<any>;
+  /** Label for the button which resets the advanced search form and clears the search input. */
   resetButtonLabel?: string;
-  /** Label for the buttons which called the onSearch event handler */
+  /** Label for the button which calls the onSearch event handler. */
   submitSearchButtonLabel?: string;
-  /** Array of attribute values used for dynamically generated advanced search */
-  attributes?: string[] | SearchAttribute[];
-  /* Additional elements added after the attributes in the form.
-   * The new form elements can be wrapped in a FormGroup component for automatic formatting */
-  formAdditionalItems?: React.ReactNode;
-  /** Attribute label for strings unassociated with one of the provided listed attributes */
-  hasWordsAttrLabel?: React.ReactNode;
-  /** Delimiter in the query string for pairing attributes with search values.
-   * Required whenever attributes are passed as props */
-  advancedSearchDelimiter?: string;
+  /** Value of the search input. */
+  value?: string;
 }
 
 export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps> = ({