From 87e0fd2881e71403256fd2d39a5d08a814b26de0 Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Wed, 23 Oct 2024 20:16:50 +0530
Subject: [PATCH 1/2] refactor: layout direction js to tsx

---
 .../LayoutDirection/{LayoutDirection.js => LayoutDirection.tsx}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/react/src/components/LayoutDirection/{LayoutDirection.js => LayoutDirection.tsx} (100%)

diff --git a/packages/react/src/components/LayoutDirection/LayoutDirection.js b/packages/react/src/components/LayoutDirection/LayoutDirection.tsx
similarity index 100%
rename from packages/react/src/components/LayoutDirection/LayoutDirection.js
rename to packages/react/src/components/LayoutDirection/LayoutDirection.tsx

From 56f3a3a08a8ed260f0a494081d884ca7b945c00e Mon Sep 17 00:00:00 2001
From: Gururajj77 <gururajtakeshi@gmail.com>
Date: Wed, 23 Oct 2024 20:20:17 +0530
Subject: [PATCH 2/2] refactor: added the required stuff

---
 .../LayoutDirection/LayoutDirection.tsx       | 26 +++++++++++++++++--
 ...onContext.js => LayoutDirectionContext.ts} |  0
 ...youtDirection.js => useLayoutDirection.ts} |  0
 3 files changed, 24 insertions(+), 2 deletions(-)
 rename packages/react/src/components/LayoutDirection/{LayoutDirectionContext.js => LayoutDirectionContext.ts} (100%)
 rename packages/react/src/components/LayoutDirection/{useLayoutDirection.js => useLayoutDirection.ts} (100%)

diff --git a/packages/react/src/components/LayoutDirection/LayoutDirection.tsx b/packages/react/src/components/LayoutDirection/LayoutDirection.tsx
index 6c999718788d..f2ac0551a9b9 100644
--- a/packages/react/src/components/LayoutDirection/LayoutDirection.tsx
+++ b/packages/react/src/components/LayoutDirection/LayoutDirection.tsx
@@ -6,15 +6,37 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { LayoutDirectionContext } from './LayoutDirectionContext';
 
+type Direction = 'ltr' | 'rtl';
+
+interface LayoutDirectionContextValue {
+  direction: Direction;
+}
+
+interface LayoutDirectionProps {
+  /**
+   * Customize the element type used to render the outermost node
+   */
+  as?: ElementType;
+  /**
+   * Provide child elements or components to be rendered inside of this
+   * component
+   */
+  children?: ReactNode;
+  /**
+   * Specify the layout direction of this part of the page
+   */
+  dir: Direction;
+}
+
 function LayoutDirection({
   as: BaseComponent = 'div',
   children,
   dir,
   ...rest
-}) {
+}: LayoutDirectionProps) {
   const value = React.useMemo(() => {
     return {
       direction: dir,
diff --git a/packages/react/src/components/LayoutDirection/LayoutDirectionContext.js b/packages/react/src/components/LayoutDirection/LayoutDirectionContext.ts
similarity index 100%
rename from packages/react/src/components/LayoutDirection/LayoutDirectionContext.js
rename to packages/react/src/components/LayoutDirection/LayoutDirectionContext.ts
diff --git a/packages/react/src/components/LayoutDirection/useLayoutDirection.js b/packages/react/src/components/LayoutDirection/useLayoutDirection.ts
similarity index 100%
rename from packages/react/src/components/LayoutDirection/useLayoutDirection.js
rename to packages/react/src/components/LayoutDirection/useLayoutDirection.ts