refactor: Layout direction js to tsx (#17853)

* refactor: layout direction js to tsx * refactor: added the required stuff --------- Co-authored-by: Nikhil Tomar <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Nov 6, 2024 · cdc8db7 · cdc8db7
1 parent 4b77a2a
commit cdc8db7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/...onents/LayoutDirection/LayoutDirection.js → ...nents/LayoutDirection/LayoutDirection.tsx b/...onents/LayoutDirection/LayoutDirection.js → ...nents/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/...LayoutDirection/LayoutDirectionContext.js → ...LayoutDirection/LayoutDirectionContext.ts b/...LayoutDirection/LayoutDirectionContext.js → ...LayoutDirection/LayoutDirectionContext.ts
diff --git a/...nts/LayoutDirection/useLayoutDirection.js → ...nts/LayoutDirection/useLayoutDirection.ts b/...nts/LayoutDirection/useLayoutDirection.js → ...nts/LayoutDirection/useLayoutDirection.ts