How to use the @blueprintjs/select.Omnibar.ofType function in @blueprintjs/select

itemExclude?: (node: IPageNode | IHeadingNode) => boolean;

    /**
     * Callback invoked when the navigator is closed. Navigation is performed by
     * updating browser `location` directly.
     */
    onClose: () => void;
}

export interface INavigationSection {
    path: string[];
    route: string;
    title: string;
}

const NavOmnibar = Omnibar.ofType();
const INPUT_PROPS: IInputGroupProps = { placeholder: "Fuzzy search headings..." };

export class Navigator extends React.PureComponent {
    private sections: INavigationSection[];

    public componentDidMount() {
        this.sections = [];
        eachLayoutNode(this.props.items, (node, parents) => {
            if (Utils.safeInvoke(this.props.itemExclude, node) === true) {
                // ignore excluded item
                return;
            }
            const { route, title } = node;
            const path = parents.map(p => p.title).reverse();
            this.sections.push({ path, route, title });
        });

import { Colors, Icon, Menu } from '@blueprintjs/core'
import { ItemPredicate, ItemRenderer, Omnibar } from '@blueprintjs/select'
import * as _ from 'lodash'
import * as React from 'react'
import { RouteComponentProps, withRouter } from 'react-router'

import { ToggleableProps } from 'constants/toggleable'
import Twitch, { Follower } from 'libs/Twitch'

/**
 * Omnibar for either online streams or offline follows.
 */
const StreamsAndFollowsOmnibar = Omnibar.ofType()

/**
 * React State.
 */
const initialState = { follows: [] as Follower[], isReady: false }
type State = Readonly

/**
 * FollowOmnibar Component.
 */
class FollowOmnibar extends React.Component {
  public state: State = initialState

  /**
   * Lifecycle: componentDidUpdate.
   * @param prevProps - The previous props.

Button,
    H5,
    Hotkey,
    Hotkeys,
    HotkeysTarget,
    KeyCombo,
    MenuItem,
    Position,
    Switch,
    Toaster,
} from "@blueprintjs/core";
import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-theme";
import { Omnibar } from "@blueprintjs/select";
import { areFilmsEqual, createFilm, filmSelectProps, IFilm, renderCreateFilmOption } from "./films";

const FilmOmnibar = Omnibar.ofType();

export interface IOmnibarExampleState {
    allowCreate: boolean;
    isOpen: boolean;
    resetOnSelect: boolean;
}

@HotkeysTarget
export class OmnibarExample extends React.PureComponent {
    public state: IOmnibarExampleState = {
        allowCreate: false,
        isOpen: false,
        resetOnSelect: true,
    };

    private handleAllowCreateChange = handleBooleanChange(allowCreate => this.setState({ allowCreate }));

IItemListRendererProps,
    ItemPredicate,
    ItemRenderer,
    Omnibar,
} from '@blueprintjs/select';
import * as React from 'react';
import { Link } from 'react-router-dom';
import { IRoadClosureOrgName } from 'src/store/road-closure';
import './road-closure-org-selector.css';

export interface IRoadClosureOrgSelectorProps {
    allOrgs: { [name: string] : IRoadClosureOrgName },
    loadAllOrgs: () => void,
} 

const OrgOmnibar = Omnibar.ofType();

class RoadClosureOrgSelector extends React.Component {
    public componentDidMount() {
        this.props.loadAllOrgs();
    }

    public handleItemSelect = () => {
        return;
    }

    public itemPredicate: ItemPredicate = (query: string, item: string) => {
        return `${item}`.indexOf(query.toLowerCase()) >= 0;
    }

    public itemRenderer: ItemRenderer = (item, { handleClick, modifiers, query }) => {
        return

interface IResult {
  hierarchy: { [key: string]: string };
  url: string;
  content: string;
}

interface IWidgetProps {
  refine: (value: string) => void;
  hits: IResult[];
}

interface IWidgetState {
  isOpen?: boolean;
}

const SearchOmnibar = Omnibar.ofType();

class SearchWidget extends React.Component {
  public state: IWidgetState = {};

  public render() {
    return (
      <>
        <button> this.setState({ isOpen: true })} /&gt;
         this.props.refine(query)}
          onItemSelect={item =&gt; {
            this.setState({ isOpen: false });
            window.location.href = item.url;
          }}
          isOpen={this.state.isOpen}</button>