Move useOverlay to /core

Author: ericgio

src/components/Overlay/Overlay.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { getMiddleware, getPlacement } from './useOverlay';
+import { getMiddleware, getPlacement } from '../../core';
 import * as stories from './Overlay.stories';
 
 import { Align } from '../../types';

src/components/Overlay/Overlay.tsx

@@ -1,38 +1,6 @@
-import PropTypes from 'prop-types';
 import { CSSProperties, ReactElement, RefCallback } from 'react';
 
-import useOverlay, { OverlayOptions, ReferenceElement } from './useOverlay';
-
-import { ALIGN_VALUES } from '../../constants';
-import { noop } from '../../utils';
-
-// `Element` is not defined during server-side rendering, so shim it here.
-/* istanbul ignore next */
-const SafeElement = typeof Element === 'undefined' ? noop : Element;
-
-const propTypes = {
-  /**
-   * Specify menu alignment. The default value is `justify`, which makes the
-   * menu as wide as the input and truncates long values. Specifying `left`
-   * or `right` will align the menu to that side and the width will be
-   * determined by the length of menu item values.
-   */
-  align: PropTypes.oneOf(ALIGN_VALUES),
-  children: PropTypes.func.isRequired,
-  /**
-   * Specify whether the menu should appear above the input.
-   */
-  dropup: PropTypes.bool,
-  /**
-   * Whether or not to automatically adjust the position of the menu when it
-   * reaches the viewport boundaries.
-   */
-  flip: PropTypes.bool,
-  isMenuShown: PropTypes.bool,
-  positionFixed: PropTypes.bool,
-  // @ts-ignore
-  referenceElement: PropTypes.instanceOf(SafeElement),
-};
+import { OverlayOptions, ReferenceElement, useOverlay } from '../../core';
 
 export interface OverlayRenderProps {
   innerRef: RefCallback<HTMLElement>;
@@ -45,16 +13,17 @@ export interface OverlayProps extends OverlayOptions {
   referenceElement: ReferenceElement;
 }
 
-const Overlay = ({ referenceElement, isMenuShown, ...props }: OverlayProps) => {
+/**
+ * The component is mainly for testing purposes.
+ */
+function Overlay({ referenceElement, isMenuShown, ...props }: OverlayProps) {
   const overlayProps = useOverlay(referenceElement, props);
 
   if (!isMenuShown) {
     return null;
   }
 
   return props.children(overlayProps);
-};
-
-Overlay.propTypes = propTypes;
+}
 
 export default Overlay;

src/components/Overlay/index.ts

@@ -1,4 +1,2 @@
 export { default } from './Overlay';
 export * from './Overlay';
-
-export { default as useOverlay } from './useOverlay';

src/components/Typeahead/Typeahead.tsx

@@ -1,12 +1,16 @@
 import cx from 'classnames';
 import React, { CSSProperties, forwardRef, ReactNode, useState } from 'react';
 
-import { TypeaheadContext, TypeaheadRef, useTypeahead } from '../../core';
+import {
+  TypeaheadContext,
+  TypeaheadRef,
+  useOverlay,
+  useTypeahead,
+} from '../../core';
 
 import ClearButton from '../ClearButton';
 import Loader from '../Loader';
-import { useOverlay } from '../Overlay';
-import Token from '../Token/Token';
+import Token from '../Token';
 import TypeaheadInputMulti from '../TypeaheadInputMulti';
 import TypeaheadInputSingle from '../TypeaheadInputSingle';
 import TypeaheadMenu, { RenderMenuItemChildren } from '../TypeaheadMenu';

src/core/index.ts

@@ -6,6 +6,8 @@ export { default as useClickOutside } from './useClickOutside';
 export { default as useHint } from './useHint';
 export { default as useItem } from './useItem';
 export * from './useItem';
+export { default as useOverlay } from './useOverlay';
+export * from './useOverlay';
 export { default as useRootClose } from './useRootClose';
 export { default as useToken } from './useToken';
 export * from './useToken';

src/components/Overlay/useOverlay.ts src/core/useOverlay.tssrc/components/Overlay/useOverlay.ts renamed to src/core/useOverlay.ts

@@ -8,14 +8,31 @@ import {
 } from '@floating-ui/react-dom';
 import { useState } from 'react';
 
-import { Align } from '../../types';
+import { Align } from '../types';
 
 export type ReferenceElement = HTMLElement | null;
 
 export interface OverlayOptions {
+  /**
+   * Specify menu alignment. The default value is `justify`, which makes the
+   * menu as wide as the input and truncates long values. Specifying `left`
+   * or `right` will align the menu to that side and the width will be
+   * determined by the length of menu item values.
+   */
   align?: Align;
+  /**
+   * Specify whether the menu should appear above the input.
+   */
   dropup?: boolean;
+  /**
+   * Whether or not to automatically adjust the position of the overlay when it
+   * reaches the viewport boundaries.
+   */
   flip?: boolean;
+  /**
+   * Whether to use the fixed position strategy for positioning the overlay, as
+   * opposed to absolute positioning.
+   */
   positionFixed?: boolean;
 }