feat(component): replaced SideNavMenuItem.js -> SideNavMenuItem.tsx component

.all-contributorsrc

@@ -1290,6 +1290,14 @@
       ]
     },
     {
+      "login": "Nirajsah",
+      "name": "Niraj Sah",
+      "avatar_url": "https://avatars.githubusercontent.com/u/51414373?v=4",
+      "profile": "https://github.com/Nirajsah",
+      "contributions": [
+        "code"
+      ]
+    },
       "login": "allisonishida",
       "name": "Allison Ishida",
       "avatar_url": "https://avatars.githubusercontent.com/u/22247062?v=4",

README.md

@@ -258,6 +258,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/amanlajpal"><img src="https://avatars.githubusercontent.com/u/42869088?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aman Lajpal</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=amanlajpal" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=amanlajpal" title="Documentation">📖</a></td>
   </tr>
   <tr>
+    <td align="center"><a href="https://github.com/Nirajsah"><img src="https://avatars.githubusercontent.com/u/51414373?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Niraj Sah</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Nirajsah" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/allisonishida"><img src="https://avatars.githubusercontent.com/u/22247062?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Allison Ishida</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=allisonishida" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/alewitt2"><img src="https://avatars.githubusercontent.com/u/48691328?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alex Lewitt</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=alewitt2" title="Code">💻</a></td>
   </tr>

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

@@ -0,0 +1,74 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React, { ElementType, ForwardedRef, HTMLAttributes, Ref } from 'react';
+import SideNavLinkText from './SideNavLinkText';
+import Link from './Link';
+import { usePrefix } from '../../internal/usePrefix';
+
+interface SideNavMenuItemProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Specify the children to be rendered inside of the `SideNavMenuItem`
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className?: string;
+
+  /**
+   * Optionally specify whether the link is "active". An active link is one that
+   * has an href that is the same as the current page. Can also pass in
+   * `aria-current="page"`, as well.
+   */
+  isActive?: boolean;
+}
+
+const SideNavMenuItem = React.forwardRef<HTMLElement, SideNavMenuItemProps>(
+  function SideNavMenuItem(props, ref: ForwardedRef<HTMLElement>) {
+    const prefix = usePrefix();
+    const { children, className: customClassName, isActive, ...rest } = props;
+    const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
+    const linkClassName = cx({
+      [`${prefix}--side-nav__link`]: true,
+      [`${prefix}--side-nav__link--current`]: isActive,
+    });
+
+    return (
+      <li className={className}>
+        <Link {...rest} className={linkClassName} ref={ref as Ref<ElementType>}>
+          <SideNavLinkText>{children}</SideNavLinkText>
+        </Link>
+      </li>
+    );
+  }
+);
+
+SideNavMenuItem.displayName = 'SideNavMenuItem';
+SideNavMenuItem.propTypes = {
+  /**
+   * Specify the children to be rendered inside of the `SideNavMenuItem`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally specify whether the link is "active". An active link is one that
+   * has an href that is the same as the current page. Can also pass in
+   * `aria-current="page"`, as well.
+   */
+  isActive: PropTypes.bool,
+};
+
+export default SideNavMenuItem;