Use extracted @primer/behaviors (#1700)

.changeset/neat-forks-shout.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Use extracted [@primer/behaviors](https://github.com/primer/behaviors) for hook behaviors

jest.config.js

@@ -9,5 +9,7 @@ module.exports = {
     '<rootDir>/src/utils/test-deprecations.tsx',
     '<rootDir>/src/utils/test-helpers.tsx'
   ],
-  testMatch: ['<rootDir>/(src|codemods)/__tests__/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)']
+  testMatch: ['<rootDir>/(src|codemods)/__tests__/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'],
+  // @primer/behaviors is ESM, so needs to be transformed
+  transformIgnorePatterns: ['node_modules/(?!@primer/behaviors)']
 }

package.json

@@ -5,10 +5,6 @@
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
   "typings": "lib/index.d.ts",
-  "sideEffects": [
-    "(lib|lib-esm)/behaviors/focusZone.js",
-    "(lib|lib-esm)/behaviors/focusTrap.js"
-  ],
   "scripts": {
     "setup": "./script/setup",
     "build": "./script/build",
@@ -43,6 +39,7 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
+    "@primer/behaviors": "^1.0.2",
     "@primer/octicons-react": "^16.1.0",
     "@primer/primitives": "7.1.1",
     "@radix-ui/react-polymorphic": "0.0.14",

src/ActionList/Item.tsx

@@ -12,7 +12,7 @@ import {
   activeDescendantActivatedDirectly,
   activeDescendantActivatedIndirectly,
   isActiveDescendantAttribute
-} from '../behaviors/focusZone'
+} from '@primer/behaviors'
 import {useSSRSafeId} from '@react-aria/ssr'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
 import {AriaRole} from '../utils/types'

src/ActionList/List.tsx

@@ -6,7 +6,7 @@ import {Divider} from './Divider'
 import styled from 'styled-components'
 import {get} from '../constants'
 import {SystemCssProperties} from '@styled-system/css'
-import {hasActiveDescendantAttribute} from '../behaviors/focusZone'
+import {hasActiveDescendantAttribute} from '@primer/behaviors'
 import {Merge} from '../utils/types/Merge'
 
 type RenderItemFn = (props: ItemProps) => React.ReactElement

src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -4,7 +4,7 @@ import {FocusTrapHookSettings, useFocusTrap} from '../hooks/useFocusTrap'
 import {FocusZoneHookSettings, useFocusZone} from '../hooks/useFocusZone'
 import {useAnchoredPosition, useProvidedRefOrCreate, useRenderForcingRef} from '../hooks'
 import {useSSRSafeId} from '@react-aria/ssr'
-import {PositionSettings} from '../behaviors/anchoredPosition'
+import type {PositionSettings} from '@primer/behaviors'
 
 interface AnchoredOverlayPropsWithAnchor {
   /**

src/Autocomplete/AutocompleteMenu.tsx

@@ -5,15 +5,17 @@ import {ComponentProps, MandateProps} from '../utils/types'
 import {Box, Spinner} from '../'
 import {AutocompleteContext} from './AutocompleteContext'
 import {PlusIcon} from '@primer/octicons-react'
-import {uniqueId} from '../utils/uniqueId'
-import {scrollIntoViewingArea} from '../behaviors/scrollIntoViewingArea'
+import {uniqueId} from '@primer/behaviors/utils'
+import {scrollIntoView} from '@primer/behaviors'
+import type {ScrollIntoViewOptions} from '@primer/behaviors'
 
 type OnSelectedChange<T> = (item: T | T[]) => void
 type AutocompleteMenuItem = MandateProps<ItemProps, 'id'>
 
 const getDefaultSortFn =
   (isItemSelectedFn: (itemId: string | number) => boolean) => (itemIdA: string | number, itemIdB: string | number) =>
     isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1
+const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
 function getDefaultItemFilter<T extends AutocompleteMenuItem>(filterValue: string) {
   return function (item: T, _i: number) {
@@ -248,9 +250,9 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
         }
 
         if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
-          scrollIntoViewingArea(current, customScrollContainerRef.current)
+          scrollIntoView(current, customScrollContainerRef.current, menuScrollMargins)
         } else if (current && scrollContainerRef.current && directlyActivated) {
-          scrollIntoViewingArea(current, scrollContainerRef.current)
+          scrollIntoView(current, scrollContainerRef.current, menuScrollMargins)
         }
       }
     },

src/Dialog/ConfirmationDialog.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 import styled from 'styled-components'
 import Box from '../Box'
 import {ThemeProvider, useTheme, ThemeProviderProps} from '../ThemeProvider'
-import {FocusKeys} from '../behaviors/focusZone'
+import {FocusKeys} from '@primer/behaviors'
 import {get} from '../constants'
 import {Dialog, DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/Dialog'
 import {useFocusZone} from '../hooks/useFocusZone'

src/Dialog/Dialog.tsx

@@ -9,7 +9,7 @@ import sx, {SxProp} from '../sx'
 import StyledOcticon from '../StyledOcticon'
 import {XIcon} from '@primer/octicons-react'
 import {useFocusZone} from '../hooks/useFocusZone'
-import {FocusKeys} from '../behaviors/focusZone'
+import {FocusKeys} from '@primer/behaviors'
 import Portal from '../Portal'
 import {useCombinedRefs} from '../hooks/useCombinedRefs'
 import {useSSRSafeId} from '@react-aria/ssr'

src/FilteredActionList/FilteredActionList.tsx

@@ -11,9 +11,12 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
 import useScrollFlash from '../hooks/useScrollFlash'
-import {scrollIntoViewingArea} from '../behaviors/scrollIntoViewingArea'
+import {scrollIntoView} from '@primer/behaviors'
+import type {ScrollIntoViewOptions} from '@primer/behaviors'
 import {SxProp} from '../sx'
 
+const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
+
 export interface FilteredActionListProps
   extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>,
     ListPropsBase,
@@ -83,7 +86,7 @@ export function FilteredActionList({
         activeDescendantRef.current = current
 
         if (current && scrollContainerRef.current && directlyActivated) {
-          scrollIntoViewingArea(current, scrollContainerRef.current)
+          scrollIntoView(current, scrollContainerRef.current, menuScrollMargins)
         }
       }
     },
@@ -96,14 +99,7 @@ export function FilteredActionList({
   useEffect(() => {
     // if items changed, we want to instantly move active descendant into view
     if (activeDescendantRef.current && scrollContainerRef.current) {
-      scrollIntoViewingArea(
-        activeDescendantRef.current,
-        scrollContainerRef.current,
-        'vertical',
-        undefined,
-        undefined,
-        'auto'
-      )
+      scrollIntoView(activeDescendantRef.current, scrollContainerRef.current, {...menuScrollMargins, behavior: 'auto'})
     }
   }, [items])
 

src/Overlay.tsx

@@ -7,7 +7,7 @@ import {useOverlay, TouchOrMouseEvent} from './hooks'
 import Portal from './Portal'
 import sx, {SxProp} from './sx'
 import {useCombinedRefs} from './hooks/useCombinedRefs'
-import {AnchorSide} from './behaviors/anchoredPosition'
+import type {AnchorSide} from '@primer/behaviors'
 import {useTheme} from './ThemeProvider'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
 

src/TextInputWithTokens.tsx

@@ -1,6 +1,6 @@
 import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject, useRef, useState} from 'react'
 import {omit} from '@styled-system/props'
-import {FocusKeys} from './behaviors/focusZone'
+import {FocusKeys} from '@primer/behaviors'
 import {useCombinedRefs} from './hooks/useCombinedRefs'
 import {useFocusZone} from './hooks/useFocusZone'
 import {ComponentProps} from './utils/types'
@@ -12,7 +12,7 @@ import UnstyledTextInput from './_UnstyledTextInput'
 import TextInputWrapper from './_TextInputWrapper'
 import Box from './Box'
 import Text from './Text'
-import {isFocusable} from './utils/iterateFocusableElements'
+import {isFocusable} from '@primer/behaviors/utils'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyReactComponent = React.ComponentType<any>