type: remove all ts warnings

packages/Button/Button.tsx

@@ -82,7 +82,7 @@ const Button = forwardRef(
       onClick?.(event);
     };
 
-    useImperativeHandle(ref, () => buttonRef.current);
+    useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement);
 
     return (
       <button

packages/Button/Button.types.ts

@@ -44,7 +44,7 @@ export interface ButtonIconProps {
   isSingle?: boolean;
   height?: string;
   horizontalPadding?: string;
-  children?: ReactElement;
+  children: ReactElement;
 }
 
 export interface ButtonSizeStyles {

packages/Checkbox/Checkbox.tsx

@@ -44,9 +44,9 @@ const Checkbox: FC<PropsWithChildren<CheckboxProps>> = ({
 
   const setIndeterminate = useCallback(() => {
     if (indeterminate) {
-      checkboxRef.current.indeterminate = true;
-    } else if (checkboxRef.current.indeterminate) {
-      checkboxRef.current.indeterminate = false;
+      checkboxRef.current!.indeterminate = true;
+    } else if (checkboxRef.current!.indeterminate) {
+      checkboxRef.current!.indeterminate = false;
     }
   }, [indeterminate]);
 

packages/Grid/Grid.styles.ts

@@ -12,6 +12,7 @@ import {
   JustifyResponsiveStyle,
   Justify,
   ResponsiveValue,
+  BreakPoint,
 } from './Grid.types';
 
 const GRID_SIZE = 24;
@@ -117,22 +118,22 @@ export const getColResponsiveStyle = (
   };
 
   if (type === 'span' && value === 0) {
-    Object.keys(responsiveStyle).map((key) => {
+    Object.keys(responsiveStyle).map((key: BreakPoint) => {
       responsiveStyle[key] = hideSpanStyle;
     });
     return responsiveStyle;
   }
 
   if (isLegalColPropertyValue(value)) {
-    Object.keys(responsiveStyle).map((key) => {
+    Object.keys(responsiveStyle).map((key: BreakPoint) => {
       responsiveStyle[key] = calculateColStyle(type, value as number);
     });
     return responsiveStyle;
   }
 
   if (isPlainObject(value)) {
     const breakPoints = Object.keys(BreakPoints);
-    Object.keys(value).map((breakPoint) => {
+    Object.keys(value).map((breakPoint: BreakPoint) => {
       if (type === 'span' && value[breakPoint] === 0) {
         responsiveStyle[breakPoint] = hideSpanStyle;
       } else if (
@@ -181,15 +182,15 @@ export const getGridResponsiveStyle = (
         };
 
   if (isLegalGridPropertyValue(type, value)) {
-    Object.keys(gridResponsiveStyle).map((key) => {
-      gridResponsiveStyle[key] = value;
+    Object.keys(gridResponsiveStyle).map((key: BreakPoint) => {
+      gridResponsiveStyle[key] = value as number | Align | Justify;
     });
     return gridResponsiveStyle;
   }
 
   if (isPlainObject(value)) {
     const breakPoints = Object.keys(BreakPoints);
-    Object.keys(value).map((breakPoint) => {
+    Object.keys(value).map((breakPoint: BreakPoint) => {
       if (
         breakPoints.includes(breakPoint) &&
         isLegalGridPropertyValue(type, value[breakPoint])

packages/Grid/Grid.types.ts

@@ -44,7 +44,7 @@ export interface BaseGridProps {
 export interface BaseGridColProps {
   offset?: ResponsiveValue<number>;
   order?: ResponsiveValue<number>;
-  span?: ResponsiveValue<number>;
+  span: ResponsiveValue<number>;
   className?: string;
   style?: CSSProperties;
 }

packages/Grid/__tests__/Grid.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Grid from '..';
+import { Align, Justify, ResponsiveValue } from '../Grid.types';
 
 describe('Grid', () => {
   test('should match the snapshot', () => {
@@ -324,8 +325,8 @@ describe('Grid', () => {
     const { rerender } = render(
       <Grid
         gutter={[-1, -1]}
-        align={'unknown' as unknown}
-        justify={'unknown' as unknown}
+        align={'unknown' as unknown as ResponsiveValue<Align>}
+        justify={'unknown' as unknown as ResponsiveValue<Justify>}
       >
         <Grid.Col span={6}>
           <div>col-6</div>
@@ -367,8 +368,8 @@ describe('Grid', () => {
     rerender(
       <Grid
         gutter={[{ xs: -1 }, { xs: -1 }]}
-        align={{ xs: 'unknown' } as unknown}
-        justify={{ xs: 'unknown' } as unknown}
+        align={{ xs: 'unknown' } as unknown as ResponsiveValue<Align>}
+        justify={{ xs: 'unknown' } as unknown as ResponsiveValue<Justify>}
       >
         <Grid.Col span={6}>
           <div>col-6</div>

packages/Input/Input.tsx

@@ -78,7 +78,7 @@ const Input = forwardRef(
       onChange?.(event);
     };
 
-    useImperativeHandle(ref, () => inputRef.current);
+    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
 
     return (
       <>

packages/Popup/__tests__/Popup.test.tsx

@@ -117,7 +117,11 @@ describe('Popup', () => {
 
   test('should update popup position when document size change', async () => {
     render(
-      <Component visible targetRef={targetRefMock} getPopupContainer={null} />
+      <Component
+        visible
+        targetRef={targetRefMock}
+        getPopupContainer={getPopupContainerMock}
+      />
     );
     expect(mockGetPopupPosition).toHaveBeenCalledTimes(1);
     document.body.style.height = '10000px';

packages/Select/Select.tsx

@@ -197,7 +197,7 @@ const Select = forwardRef(
       ['mousedown']
     );
 
-    useImperativeHandle(ref, () => inputRef.current);
+    useImperativeHandle(ref, () => selectRef.current as HTMLDivElement);
 
     const SelectContent = (): ReactElement => {
       const selectedOptions = getValidChildren(children).filter((option) => {

packages/Select/SelectDropdown.tsx

@@ -29,7 +29,7 @@ const SelectDropdown = forwardRef(
       ? selectRect.width || selectRect.right - selectRect.left
       : 0;
 
-    useImperativeHandle(ref, () => dropdownRef.current);
+    useImperativeHandle(ref, () => dropdownRef.current as HTMLDivElement);
 
     return (
       <Popup

packages/Select/SelectInput.tsx

@@ -22,7 +22,7 @@ const SelectInput = forwardRef(
     const ref = useRef<HTMLInputElement | null>(null);
     const { selectId } = useSelectContext();
 
-    useImperativeHandle(inputRef, () => ref.current);
+    useImperativeHandle(inputRef, () => ref.current as HTMLInputElement);
 
     useEffect(() => {
       if (visible) {

packages/Select/__tests__/Select.test.tsx

@@ -56,20 +56,14 @@ describe('Select', () => {
   });
 
   test('should forward ref', () => {
-    const ref = React.createRef<HTMLInputElement>();
+    const ref = React.createRef<HTMLDivElement>();
     render(
       <Select ref={ref}>
         <Select.Option value="1">Option 1</Select.Option>
         <Select.Option value="2">Option 2</Select.Option>
       </Select>
     );
-    const selectInput = screen.getByRole('combobox');
-    act(() => {
-      ref?.current?.focus();
-      expect(selectInput).toHaveFocus();
-      ref?.current?.blur();
-      expect(selectInput).not.toHaveFocus();
-    });
+    expect(screen.getByTestId('selectContainer')).toEqual(ref.current);
   });
 
   ['warning', 'error'].forEach((item: Exclude<SelectTypes, 'default'>) => {

packages/VisuallyHidden/VisuallyHidden.tsx

@@ -13,7 +13,7 @@ const VisuallyHiddenInput = forwardRef(
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
 
-    useImperativeHandle(ref, () => inputRef.current);
+    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
 
     return (
       <>

packages/utils/common/hexToRGBA.ts

@@ -1,4 +1,4 @@
-const isValidHex = (hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+const isValidHex = (hex: string) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
 
 const getChunksFromString = (st: string, chunkSize: number) =>
   st.match(new RegExp(`.{${chunkSize}}`, 'g'));
@@ -21,7 +21,7 @@ const hexToRGBA = (hex: string, alpha: number) => {
     throw new Error('Invalid HEX');
   }
   const chunkSize = Math.floor((hex.length - 1) / 3);
-  const hexArr = getChunksFromString(hex.slice(1), chunkSize);
+  const hexArr = getChunksFromString(hex.slice(1), chunkSize) ?? [];
   const [r, g, b, a] = hexArr.map(convertHexUnitTo256);
   return `rgba(${r}, ${g}, ${b}, ${getAlphaFloat(a, alpha)})`;
 };