refactor: add typescript types to togglesmall and portal

packages/react/src/components/Portal/index.js → packages/react/src/components/Portal/index.ts

@@ -5,18 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState, ReactNode } from 'react';
 import ReactDOM from 'react-dom';
 
+interface PortalProps {
+  /**
+   * Specify the children elements to be rendered inside of the <Portal>
+   */
+  children: ReactNode;
+  /**
+   * Provide a ref for a container node to render the portal
+   */
+  container?: React.RefObject<HTMLElement>;
+}
+
 /**
  * Helper component for rendering content within a portal. By default, the
  * portal will render into document.body. You can customize this behavior with
  * the `container` prop. Any `children` provided to this component will be
  * rendered inside of the container.
  */
-function Portal({ container, children }) {
-  const [mountNode, setMountNode] = useState(null);
+function Portal({
+  container,
+  children,
+}: PortalProps): React.ReactPortal | null {
+  const [mountNode, setMountNode] = useState<HTMLElement | null>(null);
 
   useEffect(() => {
     setMountNode(container ? container.current : document.body);
@@ -29,20 +42,4 @@ function Portal({ container, children }) {
   return null;
 }
 
-Portal.propTypes = {
-  /**
-   * Specify the children elements to be rendered inside of the <Portal>
-   */
-  children: PropTypes.node,
-
-  /**
-   * Provide a ref for a container node to render the portal
-   */
-  container: PropTypes.oneOfType([
-    PropTypes.shape({
-      current: PropTypes.any,
-    }),
-  ]),
-};
-
 export { Portal };

packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.js → packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.tsx

@@ -4,16 +4,33 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { PrefixContext } from '../../internal/usePrefix';
 
-class ToggleSmallSkeleton extends React.Component {
+interface ToggleSmallSkeletonProps {
+  ['aria-label']: string;
+  /**
+   * Specify an optional className to add to the form item wrapper.
+   */
+  className?: string;
+  /**
+   * Provide an id that unique represents the underlying `<input>`
+   */
+  id?: string;
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   * `aria-label` is always required but will be null if `labelText` is also
+   * provided
+   */
+  labelText?: string;
+}
+
+class ToggleSmallSkeleton extends React.Component<ToggleSmallSkeletonProps> {
   static propTypes = {
     ['aria-label']: PropTypes.string.isRequired,
-
     /**
      * Specify an optional className to add to the form item wrapper.
      */
@@ -22,7 +39,6 @@ class ToggleSmallSkeleton extends React.Component {
      * Provide an id that unique represents the underlying `<input>`
      */
     id: PropTypes.string,
-
     /**
      * Provide the text that will be read by a screen reader when visiting this
      * control
@@ -44,7 +60,6 @@ class ToggleSmallSkeleton extends React.Component {
                 id={id}
                 className={`${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`}
               />
-
               <label
                 className={`${prefix}--toggle__label ${prefix}--skeleton`}
                 htmlFor={id}>