TypeScript: Make scope argument required

Author: hzhu

packages/focusvisible/src/FocusVisibleContainer.spec.tsx

@@ -35,7 +35,10 @@ describe('FocusVisibleContainer', () => {
 
     expect(() => {
       const ErrorExample = () => {
+        /* eslint-disable @typescript-eslint/ban-ts-ignore */
+        // @ts-ignore
         useFocusVisible();
+        /* eslint-enable @typescript-eslint/ban-ts-ignore */
 
         return <div>test</div>;
       };

packages/focusvisible/src/FocusVisibleContainer.ts

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 
 import { useFocusVisible, IUseFocusVisibleProps } from './useFocusVisible';
 
-export interface IFocusVisibleContainerProps extends IUseFocusVisibleProps {
+export interface IFocusVisibleContainerProps extends Omit<IUseFocusVisibleProps, 'scope'> {
   render?: (options: { ref: React.RefObject<HTMLDivElement> }) => React.ReactNode;
   children?: (options: { ref: React.RefObject<HTMLDivElement> }) => React.ReactNode;
 }

packages/focusvisible/src/useFocusVisible.ts

@@ -29,18 +29,20 @@ const INPUT_TYPES_WHITE_LIST: Record<string, boolean> = {
 };
 
 export interface IUseFocusVisibleProps {
-  scope?: React.RefObject<HTMLElement | null>;
+  scope: React.RefObject<HTMLElement | null>;
   relativeDocument?: any;
   className?: string;
   dataAttribute?: string;
 }
 
-export function useFocusVisible({
-  scope,
-  relativeDocument = document,
-  className = 'garden-focus-visible',
-  dataAttribute = 'data-garden-focus-visible'
-}: IUseFocusVisibleProps = {}): void {
+export function useFocusVisible(
+  {
+    scope,
+    relativeDocument = document,
+    className = 'garden-focus-visible',
+    dataAttribute = 'data-garden-focus-visible'
+  }: IUseFocusVisibleProps = {} as any
+): void {
   if (!scope) {
     throw new Error('Error: the useFocusVisible() hook requires a "scope" property');
   }