Update components

lib/components/notification.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import type {NotificationProps, NotificationState} from '../hyper';
 
-export default class Notification extends React.PureComponent<NotificationProps, NotificationState> {
+export default class Notification extends React.PureComponent<
+  React.PropsWithChildren<NotificationProps>,
+  NotificationState
+> {
   dismissTimer!: NodeJS.Timeout;
   constructor(props: NotificationProps) {
     super(props);

lib/components/notifications.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
 
 import {decorate} from '../utils/plugins';
 
@@ -7,9 +7,9 @@ import type {NotificationsProps} from '../hyper';
 
 const Notification = decorate(Notification_, 'Notification');
 
-const Notifications: React.FC<NotificationsProps> = (props) => {
+const Notifications = forwardRef<HTMLDivElement, NotificationsProps>((props, ref) => {
   return (
-    <div className="notifications_view">
+    <div className="notifications_view" ref={ref}>
       {props.customChildrenBefore}
       {props.fontShowing && (
         <Notification
@@ -125,6 +125,8 @@ const Notifications: React.FC<NotificationsProps> = (props) => {
       `}</style>
     </div>
   );
-};
+});
+
+Notifications.displayName = 'Notifications';
 
 export default Notifications;

lib/components/searchBox.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useRef, useEffect} from 'react';
+import React, {useCallback, useRef, useEffect, forwardRef} from 'react';
 import type {SearchBoxProps} from '../hyper';
 import {VscArrowUp} from '@react-icons/all-files/vsc/VscArrowUp';
 import {VscArrowDown} from '@react-icons/all-files/vsc/VscArrowDown';
@@ -82,7 +82,7 @@ const SearchButton = ({
   );
 };
 
-const SearchBox = (props: SearchBoxProps) => {
+const SearchBox = forwardRef<HTMLDivElement, SearchBoxProps>((props, ref) => {
   const {
     caseSensitive,
     wholeWord,
@@ -127,7 +127,7 @@ const SearchBox = (props: SearchBoxProps) => {
   };
 
   return (
-    <div className="flex-row search-container">
+    <div className="flex-row search-container" ref={ref}>
       <div className="flex-row search-box">
         <input className="search-input" type="text" onKeyDown={handleChange} ref={inputRef} placeholder="Search" />
 
@@ -228,6 +228,8 @@ const SearchBox = (props: SearchBoxProps) => {
       </style>
     </div>
   );
-};
+});
+
+SearchBox.displayName = 'SearchBox';
 
 export default SearchBox;

lib/components/split-pane.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import sum from 'lodash/sum';
 import type {SplitPaneProps} from '../hyper';
 
-export default class SplitPane extends React.PureComponent<SplitPaneProps, {dragging: boolean}> {
+export default class SplitPane extends React.PureComponent<
+  React.PropsWithChildren<SplitPaneProps>,
+  {dragging: boolean}
+> {
   dragPanePosition!: number;
   dragTarget!: Element;
   panes!: Element[];

lib/components/style-sheet.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
 import type {StyleSheetProps} from '../hyper';
 
-const StyleSheet: React.FC<StyleSheetProps> = (props) => {
+const StyleSheet: React.FC<StyleSheetProps> = forwardRef<HTMLStyleElement, StyleSheetProps>((props, ref) => {
   const {borderColor} = props;
 
   return (
-    <style jsx global>{`
+    <style jsx global ref={ref}>{`
       ::-webkit-scrollbar {
         width: 5px;
       }
@@ -19,6 +19,8 @@ const StyleSheet: React.FC<StyleSheetProps> = (props) => {
       }
     `}</style>
   );
-};
+});
+
+StyleSheet.displayName = 'StyleSheet';
 
 export default StyleSheet;

lib/components/tab.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
 import type {TabProps} from '../hyper';
 
-const Tab = (props: TabProps) => {
+const Tab = forwardRef<HTMLLIElement, TabProps>((props, ref) => {
   const handleClick = (event: React.MouseEvent) => {
     const isLeftClick = event.nativeEvent.which === 1;
 
@@ -28,6 +28,7 @@ const Tab = (props: TabProps) => {
         className={`tab_tab ${isFirst ? 'tab_first' : ''} ${isActive ? 'tab_active' : ''} ${
           isFirst && isActive ? 'tab_firstActive' : ''
         } ${hasActivity ? 'tab_hasActivity' : ''}`}
+        ref={ref}
       >
         {props.customChildrenBefore}
         <span
@@ -159,6 +160,8 @@ const Tab = (props: TabProps) => {
       `}</style>
     </>
   );
-};
+});
+
+Tab.displayName = 'Tab';
 
 export default Tab;

lib/components/tabs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
 
 import {decorate, getTabProps} from '../utils/plugins';
 
@@ -9,13 +9,13 @@ import DropdownButton from './new-tab';
 const Tab = decorate(Tab_, 'Tab');
 const isMac = /Mac/.test(navigator.userAgent);
 
-const Tabs = (props: TabsProps) => {
+const Tabs = forwardRef<HTMLElement, TabsProps>((props, ref) => {
   const {tabs = [], borderColor, onChange, onClose, fullScreen} = props;
 
   const hide = !isMac && tabs.length === 1;
 
   return (
-    <nav className={`tabs_nav ${hide ? 'tabs_hiddenNav' : ''}`}>
+    <nav className={`tabs_nav ${hide ? 'tabs_hiddenNav' : ''}`} ref={ref}>
       {props.customChildrenBefore}
       {tabs.length === 1 && isMac ? <div className="tabs_title">{tabs[0].title}</div> : null}
       {tabs.length > 1 ? (
@@ -106,6 +106,8 @@ const Tabs = (props: TabsProps) => {
       `}</style>
     </nav>
   );
-};
+});
+
+Tabs.displayName = 'Tabs';
 
 export default Tabs;

lib/components/terms.tsx

@@ -12,7 +12,7 @@ const StyleSheet = decorate(StyleSheet_, 'StyleSheet');
 
 const isMac = /Mac/.test(navigator.userAgent);
 
-export default class Terms extends React.Component<TermsProps> {
+export default class Terms extends React.Component<React.PropsWithChildren<TermsProps>> {
   terms: Record<string, Term>;
   registerCommands: (cmds: Record<string, (e: any, dispatch: HyperDispatch) => void>) => void;
   constructor(props: TermsProps, context: any) {