feat(typescript): add various typescript typings

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

@@ -8,10 +8,22 @@
 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,43 @@
+/**
+ * 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,33 @@
  * 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,

packages/react/src/components/OverflowMenuItem/OverflowMenuItem.js → packages/react/src/components/OverflowMenuItem/OverflowMenuItem.tsx

@@ -8,11 +8,73 @@
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { match, keys } from '../../internal/keyboard';
-import { warning } from '../../internal/warning';
+import { keys, match } from '../../internal/keyboard';
 import { usePrefix } from '../../internal/usePrefix';
+import { warning } from '../../internal/warning';
+import { ForwardRefReturn } from '../../types/common';
+
+export interface OverflowMenuItemProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * The CSS class name to be placed on the button element
+   */
+  className?: string;
+
+  /**
+   * A callback to tell the parent menu component that the menu should be closed.
+   */
+  closeMenu?: () => void;
+
+  /**
+   * `true` to make this menu item disabled.
+   */
+  disabled?: boolean;
+
+  handleOverflowMenuItemFocus?: (options: { currentIndex?: number; direction: number }) => void;
+
+  /**
+   * `true` to make this menu item a divider.
+   */
+  hasDivider?: boolean;
+
+  /**
+   * If given, overflow item will render as a link with the given href
+   */
+  href?: string;
+
+  index?: number;
+
+  /**
+   * The text to show for the menu item
+   */
+  itemText?: React.ReactNode;
+
+  /**
+   * `true` to make this menu item a danger button.
+   */
+  isDelete?: boolean;
+
+  /**
+   * `true` to require the title attribute.
+   */
+  requireTitle?: boolean;
+
+  /**
+   * The title attribute.
+   */
+  title?: string;
+
+  /**
+   * The CSS class name to be placed on the wrapper element
+   */
+  wrapperClassName?: string;
+}
+
+export type OverflowMenuItemComponent = ForwardRefReturn<
+  HTMLElement,
+  OverflowMenuItemProps
+>;
 
-const OverflowMenuItem = React.forwardRef(function OverflowMenuItem(
+const OverflowMenuItem: OverflowMenuItemComponent = React.forwardRef(function OverflowMenuItem(
   {
     className,
     closeMenu,
@@ -36,13 +98,13 @@ const OverflowMenuItem = React.forwardRef(function OverflowMenuItem(
 
   function setTabFocus(evt) {
     if (match(evt, keys.ArrowDown)) {
-      handleOverflowMenuItemFocus({
+      handleOverflowMenuItemFocus?.({
         currentIndex: index,
         direction: 1,
       });
     }
     if (match(evt, keys.ArrowUp)) {
-      handleOverflowMenuItemFocus({
+      handleOverflowMenuItemFocus?.({
         currentIndex: index,
         direction: -1,
       });
@@ -98,17 +160,23 @@ const OverflowMenuItem = React.forwardRef(function OverflowMenuItem(
         className={overflowMenuBtnClasses}
         disabled={disabled}
         href={href}
-        index={index}
         onClick={handleClick}
         onKeyDown={(evt) => {
           setTabFocus(evt);
           onKeyDown(evt);
         }}
         role="menuitem"
-        ref={ref}
-        tabIndex="-1"
-        title={requireTitle ? title || itemText : null}
-        {...rest}>
+        // ref as any: the type of `ref` is `ForwardedRef<HTMLButtonElement>` in `Button` component
+        // but `OverflowMenuItem` can be rendered as `a` tag as well, which is `HTMLAnchorElement`
+        // so we have to use `any` here
+        ref={ref as any}
+        tabIndex={-1}
+        // itemText as any: itemText may be a ReactNode, but `title` only accepts string
+        // to avoid compatibility issue, we use `any` here. Consider to enforce `itemText` to be `string?`
+        // in the next major release
+        title={requireTitle ? (title || (itemText as any)) : undefined}
+        {...rest}
+        >
         {OverflowMenuItemContent}
       </TagToUse>
     </li>