Likhith/74169/ts migration scrollbar container

packages/account/src/Components/form-body/form-body.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { ScrollbarsContainer } from 'Components/scrollbars-container/scrollbars-container';
 import { Div100vhContainer, DesktopWrapper, MobileWrapper } from '@deriv/components';
-import { ScrollbarsContainer } from 'Components/scrollbars-container/scrollbars-container.jsx';
 
 type TFormBody = {
     scroll_offset?: string;

packages/account/src/Components/scrollbars-container/__tests__/scrollbars-container.spec.js → packages/account/src/Components/scrollbars-container/__tests__/scrollbars-container.spec.tsx

@@ -10,45 +10,43 @@ jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
 
 describe('<ScrollbarsContainer />', () => {
     it('should render children with ScrollbarsContainer component for desktop without scroll_offset for desktop ', () => {
-        const { container } = render(
+        render(
             <ScrollbarsContainer>
                 <div>Test children</div>
             </ScrollbarsContainer>
         );
 
-        expect(container.firstChild).not.toHaveClass('account__scrollbars_container');
-        expect(container.firstChild.style.maxHeight).toBe('100%');
+        const el_child_div = screen.getByText('Test children');
 
-        const child_div_el = screen.getByText('Test children');
-        expect(child_div_el).toBeInTheDocument();
-        expect(child_div_el.parentElement).toHaveClass('account__scrollbars_container');
+        expect(el_child_div).toBeInTheDocument();
+        expect(screen.getByTestId('dt_themed_scrollbars')).toHaveStyle('max-height: 100%');
     });
+
     it('should render children with ScrollbarsContainer component for desktop with scroll_offset and extra className for desktop ', () => {
-        const { container } = render(
+        render(
             <ScrollbarsContainer scroll_offset='33%' className='test__class-name'>
                 <div>Test children</div>
             </ScrollbarsContainer>
         );
 
-        expect(container.firstChild.style.maxHeight).toBe('calc(100% - 33%)');
+        const el_child_div = screen.getByText('Test children');
 
-        const child_div_el = screen.getByText('Test children');
-        expect(child_div_el).toBeInTheDocument();
-        expect(child_div_el.parentElement).toHaveClass('account__scrollbars_container test__class-name');
+        expect(el_child_div).toBeInTheDocument();
+        expect(screen.getByTestId('dt_themed_scrollbars')).toHaveStyle('max-height: calc(100% - 33%)');
     });
+
     it('should render children with ScrollbarsContainer component with scroll_offset and extra className for mobile', () => {
-        isMobile.mockReturnValue(true);
+        (isMobile as jest.Mock).mockReturnValue(true);
 
-        const { container } = render(
+        render(
             <ScrollbarsContainer scroll_offset='33%' className='test__class-name'>
                 <div>Test children</div>
             </ScrollbarsContainer>
         );
-        expect(container.firstChild).toHaveClass('account__scrollbars_container');
-        expect(container.firstChild.style.maxHeight).not.toBe('calc(100% - 33%)');
 
-        const child_div_el = screen.getByText('Test children');
-        expect(child_div_el).toBeInTheDocument();
-        expect(child_div_el.parentElement).toHaveClass('account__scrollbars_container test__class-name');
+        const el_child_div = screen.getByText('Test children');
+
+        expect(el_child_div).toBeInTheDocument();
+        expect(screen.queryByTestId('dt_themed_scrollbars')).not.toBeInTheDocument();
     });
 });

packages/account/src/Components/scrollbars-container/index.ts

@@ -0,0 +1,3 @@
+import { ScrollbarsContainer } from './scrollbars-container';
+
+export default ScrollbarsContainer;

packages/account/src/Components/scrollbars-container/scrollbars-container.jsx → packages/account/src/Components/scrollbars-container/scrollbars-container.tsx

@@ -3,7 +3,16 @@ import React from 'react';
 import { ThemedScrollbars } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 
-export const ScrollbarsContainer = ({ children, className, scroll_offset }) => (
+type TScrollbarsContainer = {
+    className?: string;
+    scroll_offset?: string;
+};
+
+export const ScrollbarsContainer = ({
+    children,
+    className,
+    scroll_offset,
+}: React.PropsWithChildren<TScrollbarsContainer>) => (
     <ThemedScrollbars is_bypassed={isMobile()} height={scroll_offset ? `calc(100% - ${scroll_offset})` : '100%'}>
         <div
             className={classNames('account__scrollbars_container', className)}

packages/components/src/components/div100vh-container/div100vh-container.tsx

@@ -17,8 +17,8 @@ import Div100vh from 'react-div-100vh';
 type TDiv100vhContainer = {
     id: string;
     height_offset: string;
-    is_bypassed: boolean;
-    is_disabled: boolean;
+    is_bypassed?: boolean;
+    is_disabled?: boolean;
     max_height_offset: string;
     className: string;
     max_autoheight_offset: string;