Refactor/add misc header types (#15768)

* refactor: type out Header component

* refactor: type out rest of header components

* refactor: typed out SideNavLink

* refactor: add LinkPropTypes to SideNavLinkProps

* refactor: headermenu failing tests, reverting

packages/react/src/components/UIShell/Header.js → packages/react/src/components/UIShell/Header.tsx

@@ -7,13 +7,33 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 import { usePrefix } from '../../internal/usePrefix';
 
-const Header = ({ className: customClassName, children, ...rest }) => {
+interface HeaderProps {
+  children?: ReactNode;
+  /**
+   * Required props for the accessibility label of the header
+   */
+  'aria-label'?: string;
+  /**
+   * Required props for the accessibility label of the header
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Optionally provide a custom class name that is applied to the underlying <header>
+   */
+  className?: string;
+}
+
+const Header: React.FC<HeaderProps> = ({
+  className: customClassName,
+  children,
+  ...rest
+}) => {
   const prefix = usePrefix();
-  const className = cx(`${prefix}--header`, customClassName);
+  const className = cx(`${prefix}--header`, customClassName as string);
 
   return (
     <header {...rest} className={className}>

packages/react/src/components/UIShell/HeaderGlobalAction.tsx

@@ -0,0 +1,136 @@
+/**
+ * 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 cx from 'classnames';
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
+import Button from '../Button';
+import { usePrefix } from '../../internal/usePrefix';
+
+interface HeaderGlobalActionProps {
+  /**
+   * Required props for the accessibility label of the button
+   */
+  'aria-label'?: string;
+  /**
+   * Required props for the accessibility label of the button
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Provide a custom icon for this global action
+   */
+  children: ReactNode;
+  /**
+   * Optionally provide a custom class name that is applied to the underlying
+   * button
+   */
+  className?: string;
+  /**
+   * Specify whether the action is currently active
+   */
+  isActive?: boolean;
+  /**
+   * Optionally provide an onClick handler that is called when the underlying
+   * button fires it's onclick event
+   */
+  onClick?: () => void;
+  /**
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment?: 'start' | 'center' | 'end';
+}
+
+/**
+ * HeaderGlobalAction is used as a part of the `HeaderGlobalBar`. It is
+ * essentially an Icon Button with an additional state to indicate whether it is
+ * "active". The active state comes from when a user clicks on the global action
+ * which should trigger a panel to appear.
+ *
+ * Note: children passed to this component should be an Icon.
+ */
+const HeaderGlobalAction: React.FC<HeaderGlobalActionProps> = React.forwardRef(
+  function HeaderGlobalAction(
+    {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      children,
+      className: customClassName,
+      onClick,
+      isActive,
+      tooltipAlignment,
+      ...rest
+    },
+    ref
+  ) {
+    const prefix = usePrefix();
+    const className = cx({
+      [customClassName as string]: !!customClassName,
+      [`${prefix}--header__action`]: true,
+      [`${prefix}--header__action--active`]: isActive,
+    });
+    const accessibilityLabel = {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+    };
+    return (
+      <Button
+        {...rest}
+        {...accessibilityLabel}
+        className={className}
+        onClick={onClick}
+        type="button"
+        hasIconOnly
+        iconDescription={ariaLabel}
+        tooltipPosition="bottom"
+        tooltipAlignment={tooltipAlignment}
+        ref={ref}>
+        {children}
+      </Button>
+    );
+  }
+);
+
+HeaderGlobalAction.propTypes = {
+  /**
+   * Required props for the accessibility label of the button
+   */
+  ...AriaLabelPropType,
+
+  /**
+   * Provide a custom icon for this global action
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Optionally provide a custom class name that is applied to the underlying
+   * button
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the action is currently active
+   */
+  isActive: PropTypes.bool,
+
+  /**
+   * Optionally provide an onClick handler that is called when the underlying
+   * button fires it's onclick event
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+};
+
+HeaderGlobalAction.displayName = 'HeaderGlobalAction';
+
+export default HeaderGlobalAction;

packages/react/src/components/UIShell/HeaderGlobalBar.js → packages/react/src/components/UIShell/HeaderGlobalBar.tsx

@@ -10,8 +10,11 @@ import wrapComponent from '../../tools/wrapComponent';
 /**
  * Generic container for `HeaderGlobalAction` components
  */
-export default wrapComponent({
+
+const HeaderGlobalBar = wrapComponent({
   name: 'HeaderGlobalBar',
   className: (prefix) => `${prefix}--header__global`,
   type: 'div',
 });
+
+export default HeaderGlobalBar;

packages/react/src/components/UIShell/SideNavLink.js → packages/react/src/components/UIShell/SideNavLink.tsx

@@ -7,15 +7,79 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
-import Link, { LinkPropTypes } from './Link';
+import React, {
+  ComponentType,
+  ElementType,
+  ForwardedRef,
+  ReactNode,
+  WeakValidationMap,
+  forwardRef,
+  useContext,
+} from 'react';
+import Link, { LinkProps, LinkPropTypes } from './Link';
 import SideNavIcon from './SideNavIcon';
 import SideNavItem from './SideNavItem';
 import SideNavLinkText from './SideNavLinkText';
 import { usePrefix } from '../../internal/usePrefix';
 import { SideNavContext } from './SideNav';
 
-const SideNavLink = React.forwardRef(function SideNavLink(
+export type SideNavLinkProps<E extends ElementType> = LinkProps<E> & {
+  /**
+   * Required props for the accessibility label
+   */
+  'aria-label'?: string;
+  /**
+   * Required props for the accessibility label
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Specify the text content for the link
+   */
+  children: ReactNode;
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className?: string;
+
+  /**
+   * Specify whether the link is the current page
+   */
+  isActive?: boolean;
+
+  /**
+   * Property to indicate if the side nav container is open (or not). Use to
+   * keep local state and styling in step with the SideNav expansion state.
+   */
+  isSideNavExpanded?: boolean;
+
+  /**
+   * Specify if this is a large variation of the SideNavLink
+   */
+  large?: boolean;
+
+  /**
+   * Provide an icon to render in the side navigation link. Should be a React class.
+   */
+  renderIcon?: ComponentType;
+
+  /**
+   * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
+   */
+  tabIndex?: number;
+};
+
+export interface SideNavLinkComponent {
+  <E extends ElementType = 'a'>(
+    props: SideNavLinkProps<E> & { ref?: ForwardedRef<ElementType> }
+  ): JSX.Element | null;
+  displayName?: string;
+  propTypes?: WeakValidationMap<SideNavLinkProps<any>>;
+}
+
+const SideNavLink: SideNavLinkComponent = forwardRef(function SideNavLink<
+  E extends ElementType = 'a'
+>(
   {
     children,
     className: customClassName,
@@ -25,16 +89,16 @@ const SideNavLink = React.forwardRef(function SideNavLink(
     large = false,
     tabIndex,
     ...rest
-  },
-  ref
+  }: SideNavLinkProps<E>,
+  ref: ForwardedRef<ElementType>
 ) {
   const isRail = useContext(SideNavContext);
 
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__link`]: true,
     [`${prefix}--side-nav__link--current`]: isActive,
-    [customClassName]: !!customClassName,
+    [customClassName as string]: !!customClassName,
   });
 
   return (
@@ -94,6 +158,7 @@ SideNavLink.propTypes = {
   /**
    * Provide an icon to render in the side navigation link. Should be a React class.
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**