From 61db41b3707e3462341eb2f6e08b5e4ca5fed05b Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Wed, 9 Aug 2023 19:55:10 +0000
Subject: [PATCH 1/8] Automatically reposition suggestions depending on
 available space

---
 .../InlineAutocomplete/InlineAutocomplete.tsx |  4 +--
 .../_AutocompleteSuggestions.tsx              | 32 +++++++++++++++----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
index ddc287d7a81..f0123272ea1 100644
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
+++ b/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
@@ -108,7 +108,6 @@ const InlineAutocomplete = ({
           (getSelectionStart(inputRef.current) ?? 0) - showEventRef.current.query.length,
         )
       : {top: 0, left: 0, height: 0}
-  const suggestionsOffset = {top: triggerCharCoords.top + triggerCharCoords.height, left: triggerCharCoords.left}
 
   // User can blur while suggestions are visible with shift+tab
   const onBlur: React.FocusEventHandler<TextInputElement> = () => {
@@ -198,8 +197,7 @@ const InlineAutocomplete = ({
         inputRef={inputRef}
         onCommit={onCommit}
         onClose={onHideSuggestions}
-        top={suggestionsOffset.top || 0}
-        left={suggestionsOffset.left || 0}
+        triggerCharCoords={triggerCharCoords}
         visible={suggestionsVisible}
         tabInsertsSuggestions={tabInsertsSuggestions}
       />
diff --git a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
index 4483757ba15..6990f20e62e 100644
--- a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
+++ b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import React, {useCallback, useLayoutEffect, useRef, useState} from 'react'
 import Spinner from '../../Spinner'
 import {ActionList, ActionListItemProps} from '../../ActionList'
 import Box from '../../Box'
@@ -7,13 +7,12 @@ import Overlay from '../../Overlay'
 
 import {Suggestion, Suggestions, TextInputElement} from './types'
 import {getSuggestionKey, getSuggestionValue} from './utils'
+import {CharacterCoordinates} from '../utils/character-coordinates'
 
 type AutoCompleteSuggestionsProps = {
   suggestions: Suggestions | null
   portalName?: string
-  // make top/left primitives instead of a Coordinates object to avoid extra re-renders
-  top: number
-  left: number
+  triggerCharCoords: CharacterCoordinates
   onClose: () => void
   onCommit: (suggestion: string) => void
   inputRef: React.RefObject<TextInputElement>
@@ -54,14 +53,15 @@ const SuggestionListItem = ({suggestion}: {suggestion: Suggestion}) => {
 const AutocompleteSuggestions = ({
   suggestions,
   portalName,
-  top,
-  left,
+  triggerCharCoords,
   onClose,
   onCommit: externalOnCommit,
   inputRef,
   visible,
   tabInsertsSuggestions,
 }: AutoCompleteSuggestionsProps) => {
+  const overlayRef = useRef<HTMLDivElement | null>(null)
+
   // It seems wierd to use state instead of a ref here, but because the list is inside an
   // AnchoredOverlay it is not always mounted - so we want to reinitialize the Combobox when it mounts
   const [list, setList] = useState<HTMLUListElement | null>(null)
@@ -85,6 +85,22 @@ const AutocompleteSuggestions = ({
     defaultFirstOption: true,
   })
 
+  const [top, setTop] = useState(0)
+  useLayoutEffect(
+    function reCalculateTop() {
+      const overlayHeight = overlayRef.current?.offsetHeight ?? 0
+
+      const yOffsetBottomSide = triggerCharCoords.top + triggerCharCoords.height
+      const wouldOverflowBottom = yOffsetBottomSide + overlayHeight > window.innerHeight
+
+      const yOffsetTopSide = triggerCharCoords.top - overlayHeight
+
+      setTop(wouldOverflowBottom ? yOffsetTopSide : yOffsetBottomSide)
+    },
+    // this is a cheap effect and we want it to run when pretty much anything that could affect position changes
+    [triggerCharCoords.top, triggerCharCoords.height, suggestions, visible],
+  )
+
   // Conditional rendering appears wrong at first - it means that we are reconstructing the
   // Combobox instance every time the suggestions appear. But this is what we want - otherwise
   // the textarea would always have the `combobox` role, which is incorrect (a textarea should
@@ -98,7 +114,9 @@ const AutocompleteSuggestions = ({
       preventFocusOnOpen
       portalContainerName={portalName}
       sx={{position: 'fixed'}}
-      {...{top, left}}
+      top={top}
+      left={triggerCharCoords.left}
+      ref={overlayRef}
     >
       <ActionList ref={setList}>
         {suggestions === 'loading' ? (

From 95dd51c439abfcf6c94f63f4da3a011c0bb8cad5 Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Wed, 9 Aug 2023 19:59:27 +0000
Subject: [PATCH 2/8] Use isomorphic layout effect

---
 src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
index 6990f20e62e..3492e07815c 100644
--- a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
+++ b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
@@ -8,6 +8,7 @@ import Overlay from '../../Overlay'
 import {Suggestion, Suggestions, TextInputElement} from './types'
 import {getSuggestionKey, getSuggestionValue} from './utils'
 import {CharacterCoordinates} from '../utils/character-coordinates'
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 
 type AutoCompleteSuggestionsProps = {
   suggestions: Suggestions | null
@@ -86,7 +87,7 @@ const AutocompleteSuggestions = ({
   })
 
   const [top, setTop] = useState(0)
-  useLayoutEffect(
+  useIsomorphicLayoutEffect(
     function reCalculateTop() {
       const overlayHeight = overlayRef.current?.offsetHeight ?? 0
 

From 8d451379f282ad81e8cfaf9c2841fb66b4ef6a0d Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Wed, 9 Aug 2023 16:06:52 -0400
Subject: [PATCH 3/8] Create old-cherries-smile.md

---
 .changeset/old-cherries-smile.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/old-cherries-smile.md

diff --git a/.changeset/old-cherries-smile.md b/.changeset/old-cherries-smile.md
new file mode 100644
index 00000000000..0f43cd49973
--- /dev/null
+++ b/.changeset/old-cherries-smile.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+Automatically reposition `InlineAutocomplete` suggestions depending on available space
+
+<!-- Changed components: InlineAutocomplete -->

From 3f28aded3495135ae35563c2a0d20d186bcf5d06 Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Wed, 9 Aug 2023 20:42:02 +0000
Subject: [PATCH 4/8] Add story

---
 .../InlineAutocomplete.features.stories.tsx   | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx
index 2e467e5d3f8..8352d5e7913 100644
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx
+++ b/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx
@@ -105,3 +105,33 @@ export const CustomRendering = ({loading, tabInserts}: ArgProps) => {
     </FormControl>
   )
 }
+
+export const AutoPositioning = () => {
+  const [suggestions, setSuggestions] = useState<Suggestions | null>(null)
+
+  const onShowSuggestions = (event: ShowSuggestionsEvent) => {
+    setSuggestions(
+      filteredUsers(event.query).map(user => ({
+        value: user.login,
+        render: props => <UserSuggestion user={user} {...props} />,
+      })),
+    )
+  }
+
+  const onHideSuggestions = () => setSuggestions(null)
+
+  return (
+    <FormControl sx={{position: 'absolute', bottom: '15px'}}>
+      <FormControl.Label>Inline Autocomplete Demo</FormControl.Label>
+      <FormControl.Caption>Try typing &apos;@&apos; to show user suggestions.</FormControl.Caption>
+      <InlineAutocomplete
+        triggers={[{triggerChar: '@'}]}
+        suggestions={suggestions}
+        onShowSuggestions={onShowSuggestions}
+        onHideSuggestions={onHideSuggestions}
+      >
+        <Textarea sx={{height: '70px'}} />
+      </InlineAutocomplete>
+    </FormControl>
+  )
+}

From 7590671c34125beb8db67f0e18967b1c9a3f27bf Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Wed, 9 Aug 2023 20:59:16 +0000
Subject: [PATCH 5/8] Handle `NaN` case

---
 src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
index 3492e07815c..5542034034d 100644
--- a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
+++ b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
@@ -96,7 +96,11 @@ const AutocompleteSuggestions = ({
 
       const yOffsetTopSide = triggerCharCoords.top - overlayHeight
 
-      setTop(wouldOverflowBottom ? yOffsetTopSide : yOffsetBottomSide)
+      // Sometimes the value can be NaN if layout is not available (ie, SSR or JSDOM)
+      const result = wouldOverflowBottom ? yOffsetTopSide : yOffsetBottomSide
+      const resultNotNaN = Number.isNaN(result) ? 0 : result
+
+      setTop(resultNotNaN)
     },
     // this is a cheap effect and we want it to run when pretty much anything that could affect position changes
     [triggerCharCoords.top, triggerCharCoords.height, suggestions, visible],

From 5bff227c3be87e99ffc95f5f7c18bf240e5a7572 Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Wed, 9 Aug 2023 21:16:30 +0000
Subject: [PATCH 6/8] Remove unused import

---
 src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
index 5542034034d..917adb66e25 100644
--- a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
+++ b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useLayoutEffect, useRef, useState} from 'react'
+import React, {useCallback, useRef, useState} from 'react'
 import Spinner from '../../Spinner'
 import {ActionList, ActionListItemProps} from '../../ActionList'
 import Box from '../../Box'

From 7db80f86027662e08b6e03356108979b20bb64f7 Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Thu, 10 Aug 2023 18:48:45 +0000
Subject: [PATCH 7/8] Add `suggestionsPlacement` prop

---
 .../InlineAutocomplete.features.stories.tsx   | 31 +++++++++++++++++++
 .../InlineAutocomplete/InlineAutocomplete.tsx | 23 +++++++++++++-
 .../_AutocompleteSuggestions.tsx              | 22 ++++++++-----
 src/drafts/InlineAutocomplete/types.ts        |  2 ++
 4 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx
index 8352d5e7913..3f2f9c5a6ae 100644
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx
+++ b/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx
@@ -106,6 +106,37 @@ export const CustomRendering = ({loading, tabInserts}: ArgProps) => {
   )
 }
 
+export const AbovePositioning = () => {
+  const [suggestions, setSuggestions] = useState<Suggestions | null>(null)
+
+  const onShowSuggestions = (event: ShowSuggestionsEvent) => {
+    setSuggestions(
+      filteredUsers(event.query).map(user => ({
+        value: user.login,
+        render: props => <UserSuggestion user={user} {...props} />,
+      })),
+    )
+  }
+
+  const onHideSuggestions = () => setSuggestions(null)
+
+  return (
+    <FormControl sx={{position: 'absolute', bottom: '15px'}}>
+      <FormControl.Label>Inline Autocomplete Demo</FormControl.Label>
+      <FormControl.Caption>Try typing &apos;@&apos; to show user suggestions.</FormControl.Caption>
+      <InlineAutocomplete
+        triggers={[{triggerChar: '@'}]}
+        suggestions={suggestions}
+        onShowSuggestions={onShowSuggestions}
+        onHideSuggestions={onHideSuggestions}
+        suggestionsPlacement="above"
+      >
+        <Textarea sx={{height: '70px'}} />
+      </InlineAutocomplete>
+    </FormControl>
+  )
+}
+
 export const AutoPositioning = () => {
   const [suggestions, setSuggestions] = useState<Suggestions | null>(null)
 
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
index f0123272ea1..6775547848e 100644
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
+++ b/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
@@ -5,7 +5,14 @@ import {BetterSystemStyleObject} from '../../sx'
 import {useSyntheticChange} from '../hooks/useSyntheticChange'
 import {getAbsoluteCharacterCoordinates} from '../utils/character-coordinates'
 
-import {ShowSuggestionsEvent, Suggestions, TextInputCompatibleChild, TextInputElement, Trigger} from './types'
+import {
+  ShowSuggestionsEvent,
+  Suggestions,
+  SuggestionsPlacement,
+  TextInputCompatibleChild,
+  TextInputElement,
+  Trigger,
+} from './types'
 import {augmentHandler, calculateSuggestionsQuery, getSuggestionValue, requireChildrenToBeInput} from './utils'
 
 import {useRefObjectAsForwardedRef} from '../../hooks'
@@ -52,6 +59,18 @@ export type InlineAutocompleteProps = {
    * thrown.
    */
   children: TextInputCompatibleChild
+  /**
+   * Control which side of the insertion point the suggestions list appears on by default. This
+   * should almost always be `"below"` because it typically provides a better user experience
+   * (the most-relevant suggestions will appear closest to the text). However, if the input
+   * is always near the bottom of the screen (ie, a chat composition form), it may be better to
+   * display the suggestions above the input.
+   *
+   * In either case, if there is not enough room to display the suggestions in the default direction,
+   * the suggestions will appear in the other direction.
+   * @default "belo"
+   */
+  suggestionsPlacement?: SuggestionsPlacement
 }
 
 const getSelectionStart = (element: TextInputElement) => {
@@ -79,6 +98,7 @@ const InlineAutocomplete = ({
   sx,
   children,
   tabInsertsSuggestions = false,
+  suggestionsPlacement = 'below',
   // Forward accessibility props so it works with FormControl
   ...forwardProps
 }: InlineAutocompleteProps & React.ComponentProps<'textarea' | 'input'>) => {
@@ -200,6 +220,7 @@ const InlineAutocomplete = ({
         triggerCharCoords={triggerCharCoords}
         visible={suggestionsVisible}
         tabInsertsSuggestions={tabInsertsSuggestions}
+        defaultPlacement={suggestionsPlacement}
       />
 
       <Portal>
diff --git a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
index 917adb66e25..3d9bdfa51c6 100644
--- a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
+++ b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
@@ -5,7 +5,7 @@ import Box from '../../Box'
 import {ComboboxCommitEvent, useCombobox} from '../hooks/useCombobox'
 import Overlay from '../../Overlay'
 
-import {Suggestion, Suggestions, TextInputElement} from './types'
+import {Suggestion, Suggestions, SuggestionsPlacement, TextInputElement} from './types'
 import {getSuggestionKey, getSuggestionValue} from './utils'
 import {CharacterCoordinates} from '../utils/character-coordinates'
 import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
@@ -19,6 +19,7 @@ type AutoCompleteSuggestionsProps = {
   inputRef: React.RefObject<TextInputElement>
   visible: boolean
   tabInsertsSuggestions: boolean
+  defaultPlacement: SuggestionsPlacement
 }
 
 const LoadingIndicator = () => (
@@ -60,6 +61,7 @@ const AutocompleteSuggestions = ({
   inputRef,
   visible,
   tabInsertsSuggestions,
+  defaultPlacement,
 }: AutoCompleteSuggestionsProps) => {
   const overlayRef = useRef<HTMLDivElement | null>(null)
 
@@ -88,22 +90,28 @@ const AutocompleteSuggestions = ({
 
   const [top, setTop] = useState(0)
   useIsomorphicLayoutEffect(
-    function reCalculateTop() {
+    function recalculateTop() {
       const overlayHeight = overlayRef.current?.offsetHeight ?? 0
 
-      const yOffsetBottomSide = triggerCharCoords.top + triggerCharCoords.height
-      const wouldOverflowBottom = yOffsetBottomSide + overlayHeight > window.innerHeight
+      const belowOffset = triggerCharCoords.top + triggerCharCoords.height
+      const wouldOverflowBelow = belowOffset + overlayHeight > window.innerHeight
 
-      const yOffsetTopSide = triggerCharCoords.top - overlayHeight
+      const aboveOffset = triggerCharCoords.top - overlayHeight
+      const wouldOverflowAbove = aboveOffset < 0
+
+      // Only override the default if it would overflow in the default direction and it would not overflow in the override direction
+      const result = {
+        below: wouldOverflowBelow && !wouldOverflowAbove ? aboveOffset : belowOffset,
+        above: wouldOverflowAbove && !wouldOverflowBelow ? belowOffset : aboveOffset,
+      }[defaultPlacement]
 
       // Sometimes the value can be NaN if layout is not available (ie, SSR or JSDOM)
-      const result = wouldOverflowBottom ? yOffsetTopSide : yOffsetBottomSide
       const resultNotNaN = Number.isNaN(result) ? 0 : result
 
       setTop(resultNotNaN)
     },
     // this is a cheap effect and we want it to run when pretty much anything that could affect position changes
-    [triggerCharCoords.top, triggerCharCoords.height, suggestions, visible],
+    [triggerCharCoords.top, triggerCharCoords.height, suggestions, visible, defaultPlacement],
   )
 
   // Conditional rendering appears wrong at first - it means that we are reconstructing the
diff --git a/src/drafts/InlineAutocomplete/types.ts b/src/drafts/InlineAutocomplete/types.ts
index ff174170172..2c4d22fb4f9 100644
--- a/src/drafts/InlineAutocomplete/types.ts
+++ b/src/drafts/InlineAutocomplete/types.ts
@@ -49,3 +49,5 @@ export type TextInputCompatibleChild = React.ReactElement<
   JSX.IntrinsicElements['textarea'] | JSX.IntrinsicElements['input']
 > &
   React.RefAttributes<HTMLInputElement & HTMLTextAreaElement>
+
+export type SuggestionsPlacement = 'above' | 'below'

From b5c2beb6bdf0f01ec38c482594603a2d88a82526 Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Mon, 14 Aug 2023 11:54:50 -0400
Subject: [PATCH 8/8] fix typo belo -> below

Co-authored-by: Josh Black <joshblack@github.com>
---
 src/drafts/InlineAutocomplete/InlineAutocomplete.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
index 6775547848e..f9d797823ad 100644
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
+++ b/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
@@ -68,7 +68,7 @@ export type InlineAutocompleteProps = {
    *
    * In either case, if there is not enough room to display the suggestions in the default direction,
    * the suggestions will appear in the other direction.
-   * @default "belo"
+   * @default "below"
    */
   suggestionsPlacement?: SuggestionsPlacement
 }