feat(typescript): add various typescript typings (#13234)

* feat(TableToolbar): add typescript typings

* feat(TableToolbarAction): add typescript typings

* feat(TableToolbarContent): change to `tsx`

* feat(TableToolbarMenu): add typescript typings

* feat(OverflowMenuItem): add typescript typings

* fix: format

---------

Co-authored-by: Francine Lucca <[email protected]>
Co-authored-by: Francine Lucca <[email protected]>

packages/react/src/components/DataTable/TableToolbar.js → packages/react/src/components/DataTable/TableToolbar.tsx

@@ -8,10 +8,27 @@
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 import { usePrefix } from '../../internal/usePrefix';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
+
+export interface TableToolbarProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Pass in the children that will be rendered inside the TableToolbar
+   */
+  children: React.ReactNode;
+
+  /**
+   * `lg` Change the row height of table
+   */
+  size?: 'sm' | 'lg';
+}
 
-const TableToolbar = ({ children, size, ...rest }) => {
+const TableToolbar: React.FC<TableToolbarProps> = ({
+  children,
+  size,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--table-toolbar`]: true,

packages/react/src/components/DataTable/TableToolbarAction.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 OverflowMenuItem from '../OverflowMenuItem';
+import { ForwardRefReturn } from '../../types/common';
+
+export interface TableToolbarActionProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
+  /**
+   * Pass in the children that will be rendered inside the TableToolbarAction
+   */
+  children?: React.ReactNode;
+
+  /**
+   * onClick handler for the TableToolbarAction
+   */
+  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+export type TableToolbarActionComponent = ForwardRefReturn<
+  HTMLDivElement,
+  TableToolbarActionProps
+>;
+
+const TableToolbarAction: TableToolbarActionComponent = React.forwardRef(
+  ({ children, ...rest }, ref) => {
+    return <OverflowMenuItem ref={ref} itemText={children} {...rest} />;
+  }
+);
+
+TableToolbarAction.displayName = 'TableToolbarAction';
+TableToolbarAction.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default TableToolbarAction;

packages/react/src/components/DataTable/TableToolbarMenu.js → packages/react/src/components/DataTable/TableToolbarMenu.tsx

@@ -5,14 +5,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { Settings } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import OverflowMenu from '../OverflowMenu';
-import { Settings } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix';
+import OverflowMenu from '../OverflowMenu';
+
+export interface TableToolbarMenuProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+
+  /**
+   * Provide an optional class name for the toolbar menu
+   */
+  className?: string;
+
+  /**
+   * The description of the menu icon.
+   */
+  iconDescription: string;
+
+  /**
+   * Optional prop to allow overriding the default menu icon
+   */
+  renderIcon?: React.ReactNode;
+}
 
-const TableToolbarMenu = ({
+const TableToolbarMenu: React.FC<TableToolbarMenuProps> = ({
   className,
   renderIcon,
   iconDescription,