fix(removal): remove filter and select from table (#183)

of contents component

src/TableOfContents/index.tsx

@@ -1,11 +1,10 @@
-import { Button, Drawer, InputGroup, MenuItem } from '@blueprintjs/core';
+import { Button, Drawer } from '@blueprintjs/core';
 import cn from 'classnames';
 import { flatMap, range } from 'lodash';
 import * as React from 'react';
 
 import { FAIcon, FAIconProp } from '../FAIcon';
 import { ScrollContainer } from '../ScrollContainer';
-import { ItemRenderer, Select } from '../Select';
 
 export type TableOfContentsItem = {
   name: React.ReactNode;
@@ -80,18 +79,6 @@ export interface ITableOfContents<T extends TableOfContentsItem = TableOfContent
   enableDrawer?: boolean | number;
 
   withScroller?: boolean;
-
-  // provide filter and onChangeFilter to enable filtering. this will render a filter input at the top of the TOC.
-  filter?: string;
-  onChangeFilter?: (filter: string) => void;
-
-  // provide filter and onChangeFilter to enable filtering.
-  selectFilter?: {
-    items: SelectItem[];
-    onSelect: (value: SelectItem) => void;
-    activeItem?: SelectItem;
-    initialContent?: string;
-  };
 }
 
 // This is to avoid "mismatch" when rendering during SSR, since we render without scroll container in SSR
@@ -172,65 +159,17 @@ export function TableOfContents<T extends TableOfContentsItem = TableOfContentsI
   isOpen = false,
   onClose = () => {},
   withScroller,
-  filter,
-  onChangeFilter,
-  selectFilter,
   ...innerProps
 }: ITableOfContents<T>) {
   useRenderWithScroll();
 
   const isMobile = false; // useIsMobile(enableDrawer);
 
-  const hasFilter = filter !== undefined && onChangeFilter;
-
-  const SelectGroup = Select.ofType<SelectItem>();
-
-  const toc = <TableOfContentsInner className={cn(hasFilter ? `pb-${padding}` : `py-${padding}`)} {...innerProps} />;
-
-  const renderSelect: ItemRenderer<SelectItem> = (item, { handleClick, modifiers }) => {
-    if (!modifiers.matchesPredicate) {
-      return null;
-    }
-    return (
-      <MenuItem key={item.value} text={item.name} label={item.label} active={modifiers.active} onClick={handleClick} />
-    );
-  };
-
-  function getActiveItem() {
-    return selectFilter?.activeItem;
-  }
+  const toc = <TableOfContentsInner className={cn(`py-${padding}`)} {...innerProps} />;
 
   const containerClassName = cn('TableOfContents', className);
   const comp = (
     <>
-      <div className="flex">
-        {selectFilter != undefined && (
-          <SelectGroup
-            items={selectFilter.items}
-            onItemSelect={selectFilter.onSelect}
-            itemRenderer={renderSelect}
-            filterable={false}
-            activeItem={getActiveItem()}
-            className={cn(`m-${padding}`, { 'mr-0': hasFilter })}
-          >
-            <Button
-              text={getActiveItem()?.name ?? selectFilter.initialContent ?? 'Fetching...'}
-              alignText="left"
-              rightIcon="caret-down"
-            />
-          </SelectGroup>
-        )}
-        {hasFilter && (
-          <InputGroup
-            leftIcon="search"
-            placeholder="Search..."
-            className={`m-${padding} w-full`}
-            value={filter}
-            autoFocus
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChangeFilter?.(event.currentTarget.value)}
-          />
-        )}
-      </div>
       <div className={containerClassName} data-test={dataTest}>
         {renderWithScroll && withScroller ? <ScrollContainer>{toc}</ScrollContainer> : toc}
       </div>