@databiosphere/findable-ui 49.0.0 → 49.2.0

package/src/components/common/Tabs/tabs.tsx

@@ -81,7 +81,11 @@ function buildTabLabel(
   annotation?: DataDictionaryAnnotation,
 ): ReactElement {
   return (
-    <Tooltip description={annotation?.description} title={annotation?.label}>
+    <Tooltip
+      description={annotation?.description}
+      enterDelay={300}
+      title={annotation?.label}
+    >
       <span>{count ? `${label} (${count})` : label}</span>
     </Tooltip>
   );

package/src/components/common/ToggleButtonGroup/provider/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { ToggleButtonGroupContextProps } from "./types";
+
+export const ToggleButtonGroupContext = createContext<
+  ToggleButtonGroupContextProps<unknown>
+>({
+  onChange: undefined,
+  value: null,
+});

package/src/components/common/ToggleButtonGroup/provider/hook.ts

@@ -0,0 +1,16 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { useContext } from "react";
+import { ToggleButtonGroupContext } from "./context";
+import { ToggleButtonGroupContextProps } from "./types";
+
+/**
+ * Returns the toggle button group context.
+ * @returns toggle button group context.
+ */
+export const useToggleButtonGroup = <
+  T extends ToggleButtonGroupProps["value"],
+>(): ToggleButtonGroupContextProps<T> => {
+  return useContext(
+    ToggleButtonGroupContext,
+  ) as ToggleButtonGroupContextProps<T>;
+};

package/src/components/common/ToggleButtonGroup/provider/provider.tsx

@@ -0,0 +1,37 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { JSX, MouseEvent, useCallback, useState } from "react";
+import { ToggleButtonGroupContext } from "./context";
+import { ToggleButtonGroupProviderProps } from "./types";
+
+/**
+ * ToggleButtonGroup provider component.
+ * Manages toggle button group state for child components.
+ * @param props - Component props.
+ * @param props.children - Child elements to render.
+ * @param props.initialValue - Initial value for the toggle button group.
+ * @returns ToggleButtonGroup provider component.
+ */
+export function ToggleButtonGroupProvider<
+  T extends ToggleButtonGroupProps["value"],
+>({
+  children,
+  initialValue = null,
+}: ToggleButtonGroupProviderProps<T>): JSX.Element {
+  const [value, setValue] = useState<T | null>(initialValue);
+
+  const onChange = useCallback(
+    (_: MouseEvent<HTMLElement>, value: T | null) => {
+      if (value === null) return;
+      setValue(value);
+    },
+    [],
+  );
+
+  return (
+    <ToggleButtonGroupContext.Provider value={{ onChange, value }}>
+      {typeof children === "function"
+        ? children({ onChange, value })
+        : children}
+    </ToggleButtonGroupContext.Provider>
+  );
+}

package/src/components/common/ToggleButtonGroup/provider/types.ts

@@ -0,0 +1,17 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { ReactNode } from "react";
+
+export type ToggleButtonGroupContextProps<
+  T extends ToggleButtonGroupProps["value"],
+> = Pick<ToggleButtonGroupProps, "onChange"> & {
+  value: T | null;
+};
+
+export type ToggleButtonGroupProviderProps<
+  T extends ToggleButtonGroupProps["value"],
+> = {
+  children:
+    | ReactNode
+    | ((props: ToggleButtonGroupContextProps<T>) => ReactNode);
+  initialValue?: T | null;
+};

package/src/config/entities.ts

@@ -27,6 +27,7 @@ import { ProviderId } from "../providers/authentication/common/types";
 import { ExploreState } from "../providers/exploreState";
 import { FileManifestState } from "../providers/fileManifestState";
 import { SystemStatus, SystemStatusResponse } from "../providers/systemStatus";
+import { AiConfig } from "../common/ai/config/types";
 
 /**
  * Interface to define the analytics configuration for a given site.
@@ -364,6 +365,7 @@ interface TrackingConfig {
  * Interface that will hold the whole configuration for a given site.
  */
 export interface SiteConfig {
+  ai?: AiConfig;
   analytics?: AnalyticsConfig;
   appTitle: string;
   authentication?: AuthenticationConfig;

package/src/hooks/ai/useAiRoutes/hook.ts

@@ -0,0 +1,22 @@
+import { FEATURE_FLAG } from "../../../common/ai/constants";
+import { AiConfig } from "../../../common/ai/config/types";
+import { useConfig } from "../../useConfig";
+import { useFeatureFlag } from "../../useFeatureFlag/useFeatureFlag";
+
+/**
+ * Returns AI route configuration when the AI feature is enabled.
+ * @returns AI routes, or undefined if AI is not configured or enabled.
+ */
+export const useAiRoutes = (): Pick<AiConfig, "routes"> | undefined => {
+  const flagEnabled = useFeatureFlag(FEATURE_FLAG.CHAT);
+  const { config } = useConfig();
+  const { ai } = config;
+
+  if (!ai) return;
+
+  const { enabled, routes } = ai;
+
+  if (enabled || flagEnabled) {
+    return { routes };
+  }
+};

package/src/styles/common/mui/drawer.ts

@@ -0,0 +1,24 @@
+import { DrawerProps } from "@mui/material";
+
+type DrawerPropsOptions = {
+  ANCHOR: typeof ANCHOR;
+  VARIANT: typeof VARIANT;
+};
+
+const ANCHOR: Record<string, DrawerProps["anchor"]> = {
+  BOTTOM: "bottom",
+  LEFT: "left",
+  RIGHT: "right",
+  TOP: "top",
+};
+
+const VARIANT: Record<string, DrawerProps["variant"]> = {
+  PERMANENT: "permanent",
+  PERSISTENT: "persistent",
+  TEMPORARY: "temporary",
+};
+
+export const DRAWER_PROPS: DrawerPropsOptions = {
+  ANCHOR,
+  VARIANT,
+};

package/src/styles/common/mui/inputBase.ts

@@ -0,0 +1,38 @@
+import { InputBaseProps } from "@mui/material";
+
+type InputBasePropsOptions = {
+  COLOR: typeof COLOR;
+  MARGIN: typeof MARGIN;
+  SIZE: typeof SIZE;
+  TYPE: typeof TYPE;
+};
+
+const COLOR: Record<string, InputBaseProps["color"]> = {
+  ERROR: "error",
+  INFO: "info",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+const MARGIN: Record<string, InputBaseProps["margin"]> = {
+  DENSE: "dense",
+  NONE: "none",
+};
+
+const SIZE: Record<string, InputBaseProps["size"]> = {
+  MEDIUM: "medium",
+  SMALL: "small",
+};
+
+const TYPE: Record<string, InputBaseProps["type"]> = {
+  TEXT: "text",
+};
+
+export const INPUT_BASE_PROPS: InputBasePropsOptions = {
+  COLOR,
+  MARGIN,
+  SIZE,
+  TYPE,
+};

package/src/styles/common/mui/stack.ts

@@ -0,0 +1,33 @@
+import { StackProps } from "@mui/material";
+
+type StackPropsOptions = {
+  ALIGN_ITEMS: typeof ALIGN_ITEMS;
+  DIRECTION: typeof DIRECTION;
+  FLEX_WRAP: typeof FLEX_WRAP;
+};
+
+const ALIGN_ITEMS: Record<string, StackProps["alignItems"]> = {
+  BASELINE: "baseline",
+  CENTER: "center",
+  FLEX_END: "flex-end",
+  FLEX_START: "flex-start",
+  STRETCH: "stretch",
+} as const;
+
+const DIRECTION: Record<string, StackProps["direction"]> = {
+  COLUMN: "column",
+  COLUMN_REVERSE: "column-reverse",
+  ROW: "row",
+  ROW_REVERSE: "row-reverse",
+} as const;
+
+const FLEX_WRAP: Record<string, StackProps["flexWrap"]> = {
+  WRAP: "wrap",
+  WRAP_REVERSE: "wrap-reverse",
+} as const;
+
+export const STACK_PROPS: StackPropsOptions = {
+  ALIGN_ITEMS,
+  DIRECTION,
+  FLEX_WRAP,
+};

package/src/tests/testIds.ts

@@ -12,7 +12,10 @@ export const TEST_IDS = {
   FILTER_SORT_BUTTON: "filter-sort-button",
   FILTER_SORT_MENU: "filter-sort-menu",
   FILTER_TERM: "filter-term",
+  RESEARCH_FORM: "research-form",
+  RESEARCH_PANEL: "research-panel",
   SEARCH_ALL_FILTERS: "search-all-filters",
+  SEARCH_PANEL: "search-panel",
   SIDEBAR: "sidebar",
   SIDEBAR_DRAWER: "sidebar-drawer",
   TABLE_FIRST_CELL: "table-first-cell",

package/src/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.styles.ts

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+import { Box, ToggleButtonGroup } from "@mui/material";
+import { bpDownMd } from "../../../../../../styles/common/mixins/breakpoints";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+
+export const StyledBox = styled(Box)`
+  margin-bottom: -16px;
+  padding: 16px;
+
+  ${bpDownMd} {
+    margin-bottom: 0;
+  }
+`;
+
+export const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
+  .MuiToggleButton-root {
+    gap: 4px;
+    padding: 6px 16px;
+    text-transform: none;
+
+    &.Mui-disabled {
+      color: ${PALETTE.INK_LIGHT};
+    }
+  }
+`;

package/src/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.tsx

@@ -0,0 +1,35 @@
+import { ToggleButton } from "@mui/material";
+import { JSX } from "react";
+import { StyledBox } from "./toggleButtonGroup.styles";
+import Link from "next/link";
+import { useAiRoutes } from "../../../../../../hooks/ai/useAiRoutes/hook";
+import { StyledToggleButtonGroup } from "./toggleButtonGroup.styles";
+import { Beta } from "../../../../../../components/common/Chip/components/Beta/beta";
+
+/**
+ * ToggleButtonGroup component for navigating between ExploreView and ResearchView.
+ * @returns ToggleButtonGroup JSX element, or null if routes are not configured.
+ */
+export const ToggleButtonGroup = (): JSX.Element | null => {
+  const { routes } = useAiRoutes() || {};
+
+  if (!routes) return null;
+
+  return (
+    <StyledBox>
+      <StyledToggleButtonGroup exclusive>
+        <ToggleButton component={Link} href={routes.research} value="research">
+          Research <Beta />
+        </ToggleButton>
+        <ToggleButton
+          component={Link}
+          href={routes.search}
+          selected
+          value="search"
+        >
+          Search
+        </ToggleButton>
+      </StyledToggleButtonGroup>
+    </StyledBox>
+  );
+};

package/src/views/ExploreView/entityList/filters/filters.styles.ts

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { Stack } from "@mui/material";
+import { bpDownMd } from "../../../../styles/common/mixins/breakpoints";
+
+export const StyledStack = styled(Stack)`
+  gap: 8px;
+  margin: 16px 0;
+  padding: 0 16px;
+
+  ${bpDownMd} {
+    margin: 8px 0;
+  }
+`;
+
+export const StyledGrid = styled.div`
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr auto;
+`;

package/src/views/ExploreView/exploreView.tsx

@@ -16,7 +16,6 @@ import { SearchAllFilters } from "../../components/Filter/components/SearchAllFi
 import { SURFACE_TYPE } from "../../components/Filter/components/surfaces/types";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
-import { SidebarTools } from "../../components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles";
 import { Sidebar } from "../../components/Layout/components/Sidebar/sidebar";
 import { CategoryGroup } from "../../config/entities";
 import { useStateSyncManager } from "../../hooks/stateSyncManager/hook";
@@ -32,6 +31,8 @@ import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { TEST_IDS } from "../../tests/testIds";
 import { useUpdateFilterSort } from "./hooks/UseUpdateFilterSort/hook";
 import { buildStateSyncManagerContext } from "./utils";
+import { StyledGrid, StyledStack } from "./entityList/filters/filters.styles";
+import { ToggleButtonGroup } from "./entityList/filters/components/ToggleButtonGroup/toggleButtonGroup";
 
 export interface ExploreViewProps extends AzulEntitiesStaticResponse {
   className?: string;
@@ -137,16 +138,19 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
     <DrawerProvider>
       {categoryViews && !!categoryViews.length && (
         <Sidebar>
-          <SidebarTools data-testid={TEST_IDS.FILTER_CONTROLS}>
-            <SidebarLabel label={"Filters"} />
-            <Stack direction="row" gap={4}>
-              <ClearAllFilters />
-              <FilterSort
-                enabled={filterSortEnabled}
-                filterSort={filterSort}
-                onFilterSortChange={onFilterSortChange}
-              />
-            </Stack>
+          <ToggleButtonGroup />
+          <StyledStack>
+            <StyledGrid data-testid={TEST_IDS.FILTER_CONTROLS}>
+              <SidebarLabel label={"Filters"} />
+              <Stack direction="row" gap={4}>
+                <ClearAllFilters />
+                <FilterSort
+                  enabled={filterSortEnabled}
+                  filterSort={filterSort}
+                  onFilterSortChange={onFilterSortChange}
+                />
+              </Stack>
+            </StyledGrid>
             <SearchAllFilters
               categoryViews={categoryViews}
               onFilter={onFilterChange.bind(null, true)}
@@ -154,7 +158,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
                 mdDown ? SURFACE_TYPE.POPPER_DRAWER : SURFACE_TYPE.POPPER_MENU
               }
             />
-          </SidebarTools>
+          </StyledStack>
           <Filters
             categoryFilters={categoryFilters}
             onFilter={onFilterChange.bind(null, false)}

package/src/views/ResearchView/assistant/assistant.tsx

@@ -0,0 +1,28 @@
+import { JSX } from "react";
+import { useChatState } from "../state/hooks/UseChatState/hook";
+import { Form } from "./components/Form/form";
+import { Input } from "./components/Input/input";
+import { getPlaceholder } from "./components/Input/utils";
+import { Messages } from "./components/Messages/messages";
+import { Drawer } from "./components/Drawer/drawer";
+import { ToggleButtonGroup } from "./components/ToggleButtonGroup/toggleButtonGroup";
+
+/**
+ * Renders the research assistant drawer.
+ * @returns The assistant drawer.
+ */
+export const Assistant = (): JSX.Element => {
+  const { state } = useChatState();
+  return (
+    <Drawer>
+      <ToggleButtonGroup />
+      <Form status={state.status}>
+        <Messages state={state} />
+        <Input
+          disabled={state.status.loading}
+          placeholder={getPlaceholder(state)}
+        />
+      </Form>
+    </Drawer>
+  );
+};

package/src/views/ResearchView/assistant/components/Drawer/drawer.styles.ts

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled";
+import { Drawer } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+import { ComponentProps } from "react";
+import { LayoutSpacing } from "../../../../../hooks/UseLayoutSpacing/types";
+
+export const StyledDrawer = styled(Drawer, {
+  shouldForwardProp(prop) {
+    return prop !== "bottom" && prop !== "top";
+  },
+})<ComponentProps<typeof Drawer> & LayoutSpacing>`
+  height: 100%;
+  max-height: 100dvh;
+  width: 412px;
+  z-index: 0;
+
+  > .MuiPaper-root {
+    background-color: ${PALETTE.COMMON_WHITE};
+    border-right: 1px solid ${PALETTE.SMOKE_MAIN};
+    padding-top: ${({ top }) => top}px;
+    position: relative;
+    width: inherit;
+  }
+`;

package/src/views/ResearchView/assistant/components/Drawer/drawer.tsx

@@ -0,0 +1,26 @@
+import { JSX } from "react";
+import { TEST_IDS } from "../../../../../tests/testIds";
+import { StyledDrawer } from "./drawer.styles";
+import { DrawerProps } from "./types";
+import { useLayoutSpacing } from "../../../../../hooks/UseLayoutSpacing/hook";
+import { DRAWER_PROPS } from "../../../../../styles/common/mui/drawer";
+
+/**
+ * Renders the drawer component for the research assistant.
+ * @param props - Component props.
+ * @param props.children - Children.
+ * @returns The drawer component.
+ */
+export const Drawer = ({ children }: DrawerProps): JSX.Element => {
+  const { spacing } = useLayoutSpacing();
+  return (
+    <StyledDrawer
+      data-testid={TEST_IDS.RESEARCH_PANEL}
+      open
+      variant={DRAWER_PROPS.VARIANT.PERSISTENT}
+      {...spacing}
+    >
+      {children}
+    </StyledDrawer>
+  );
+};

package/src/views/ResearchView/assistant/components/Drawer/types.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export interface DrawerProps {
+  children: ReactNode;
+}

package/src/views/ResearchView/assistant/components/Form/constants.ts

@@ -0,0 +1,3 @@
+export const FIELD_NAME = {
+  AI_PROMPT: "ai-prompt",
+};

package/src/views/ResearchView/assistant/components/Form/form.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+`;

package/src/views/ResearchView/assistant/components/Form/form.tsx

@@ -0,0 +1,40 @@
+import { JSX } from "react";
+import { TEST_IDS } from "../../../../../tests/testIds";
+import { useQuery } from "../../../state/query/hooks/UseQuery/hook";
+import { FIELD_NAME } from "./constants";
+import { StyledForm } from "./form.styles";
+import { FormProps } from "./types";
+import { getPayload } from "./utils";
+
+/**
+ * Renders the research form.
+ * @param props - Component props.
+ * @param props.children - Form children.
+ * @param props.className - Class name for styling.
+ * @param props.status - Form status.
+ * @returns The research form container element.
+ */
+export const Form = ({
+  children,
+  className,
+  status,
+}: FormProps): JSX.Element => {
+  const { onSubmit } = useQuery();
+  return (
+    <StyledForm
+      className={className}
+      data-testid={TEST_IDS.RESEARCH_FORM}
+      onSubmit={async (e) => {
+        await onSubmit(e, getPayload(e), {
+          onSettled: (form) => {
+            const input = form.elements.namedItem(FIELD_NAME.AI_PROMPT);
+            if (input instanceof HTMLElement) input.focus();
+          },
+          status,
+        });
+      }}
+    >
+      {children}
+    </StyledForm>
+  );
+};

package/src/views/ResearchView/assistant/components/Form/types.ts

@@ -0,0 +1,9 @@
+import {
+  BaseComponentProps,
+  ChildrenProps,
+} from "../../../../../components/types";
+import { ChatState } from "../../../state/types";
+
+export type FormProps = BaseComponentProps &
+  ChildrenProps &
+  Pick<ChatState, "status">;

package/src/views/ResearchView/assistant/components/Form/utils.ts

@@ -0,0 +1,51 @@
+import { FormEvent } from "react";
+import { FIELD_NAME } from "./constants";
+import { OnSubmitPayload } from "../../../state/query/types";
+
+/**
+ * Extracts and trims form values from a form element.
+ * @param form - Form element.
+ * @returns An object mapping form field names to their trimmed string values.
+ */
+export const getFormValues = (
+  form: HTMLFormElement,
+): Record<string, string> => {
+  const formData = new FormData(form);
+
+  const values: Record<string, string> = {};
+  formData.forEach((value, key) => {
+    values[key] = value.toString().trim();
+  });
+
+  return values;
+};
+
+/**
+ * Returns the payload for the query form submission.
+ * If the submitter has a data-query attribute (e.g. a suggestion chip), uses that as the query.
+ * Otherwise, falls back to the form input value.
+ * @param e - Form event.
+ * @returns The payload object containing the query value.
+ */
+export const getPayload = (e: FormEvent<HTMLFormElement>): OnSubmitPayload => {
+  // Check for a query from the submitter's data-query attribute first
+  const query = getSubmitterQuery(e);
+
+  // The onSubmit handler will ignore empty queries which acts as a safeguard against empty data-query values.
+  if (query !== undefined) return { query };
+
+  // If no submitter query, fall back to form values
+  const formValues = getFormValues(e.currentTarget);
+  return { query: formValues[FIELD_NAME.AI_PROMPT] || "" };
+};
+
+/**
+ * Returns the query from the form submitter's data-query attribute, if present.
+ * @param e - Form event.
+ * @returns The query string, or undefined if the submitter has no data-query.
+ */
+function getSubmitterQuery(e: FormEvent<HTMLFormElement>): string | undefined {
+  const submitter = (e.nativeEvent as SubmitEvent).submitter;
+  // We should expect a defined value here if the submitter is a data-query element, but we trim it just in case.
+  return submitter?.dataset.query?.trim();
+}

package/src/views/ResearchView/assistant/components/Input/constants.ts

@@ -0,0 +1,16 @@
+import { InputBaseProps } from "@mui/material";
+import { INPUT_BASE_PROPS as MUI_INPUT_BASE_PROPS } from "../../../../../styles/common/mui/inputBase";
+import { FIELD_NAME } from "../Form/constants";
+
+export const INPUT_BASE_PROPS: InputBaseProps = {
+  autoFocus: true,
+  color: MUI_INPUT_BASE_PROPS.COLOR.PRIMARY,
+  fullWidth: true,
+  inputProps: { autoComplete: "off", spellCheck: false },
+  margin: MUI_INPUT_BASE_PROPS.MARGIN.DENSE,
+  maxRows: 4,
+  minRows: 1,
+  multiline: true,
+  name: FIELD_NAME.AI_PROMPT,
+  placeholder: "Ask anything",
+};

package/src/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/constants.ts

@@ -0,0 +1,7 @@
+export const KEY = {
+  ARROW_DOWN: "ArrowDown",
+  ARROW_UP: "ArrowUp",
+  ENTER: "Enter",
+  ESCAPE: "Escape",
+  TAB: "Tab",
+} as const;

package/src/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/hook.ts

@@ -0,0 +1,45 @@
+import { KeyboardEvent, useCallback, useEffect, useRef } from "react";
+import { useChatState } from "../../../../../state/hooks/UseChatState/hook";
+import { KEY } from "./constants";
+import { UseKeyShortCutsProps } from "./types";
+import {
+  getHistory,
+  handleArrowKey,
+  handleEnterKey,
+  handleEscapeKey,
+  handleTabKey,
+} from "./utils";
+
+/**
+ * Provides a keydown handler that implements keyboard shortcuts for the assistant input.
+ * @returns An object containing the onKeyDown handler.
+ */
+export const useKeyShortCuts = (): UseKeyShortCutsProps => {
+  const { state } = useChatState();
+  const { messages } = state;
+
+  const history = getHistory(messages);
+
+  const draftRef = useRef<string>("");
+  const historyIndexRef = useRef<number>(-1);
+
+  useEffect(() => {
+    // Resets history navigation when messages change.
+    draftRef.current = "";
+    historyIndexRef.current = -1;
+  }, [messages]);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      const refs = { draftRef, historyIndexRef };
+      if (e.key === KEY.ENTER) return handleEnterKey(e);
+      if (e.key === KEY.ESCAPE) return handleEscapeKey(e, refs);
+      if (e.key === KEY.ARROW_UP || e.key === KEY.ARROW_DOWN)
+        return handleArrowKey(e, history, refs);
+      if (e.key === KEY.TAB) return handleTabKey(e);
+    },
+    [history],
+  );
+
+  return { onKeyDown };
+};