@carbon-labs/react-ui-shell 0.7.0 → 0.9.0

package/es/components/SideNavMenuItem.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import cx from '../_virtual/index.js';
+import PropTypes from 'prop-types';
+import React, { useRef, useEffect } from 'react';
+import SideNavLinkText from '@carbon/react/lib/components/UIShell/SideNavLinkText';
+import Link from '@carbon/react/lib/components/UIShell/Link';
+import { usePrefix } from '@carbon/react/lib/internal/usePrefix';
+import { useMergedRefs } from '@carbon/react/lib/internal/useMergedRefs';
+
+const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
+  const prefix = usePrefix();
+  const {
+    children,
+    className: customClassName,
+    depth: propDepth,
+    as: Component = Link,
+    isActive,
+    ...rest
+  } = props;
+  const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
+  const depth = propDepth;
+  const linkClassName = cx({
+    [`${prefix}--side-nav__link`]: true,
+    [`${prefix}--side-nav__link--current`]: isActive
+  });
+  const linkRef = useRef(null);
+  const itemRef = useMergedRefs([linkRef, ref]);
+  useEffect(() => {
+    const calcLinkOffset = () => {
+      return 4 + Math.max(0, depth - 1) * 1;
+    };
+    if (linkRef.current) {
+      linkRef.current.style.paddingLeft = `${calcLinkOffset()}rem`;
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("li", {
+    role: "treeitem",
+    "aria-selected": isActive ? 'true' : 'false',
+    className: className
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    className: linkClassName,
+    tabIndex: -1,
+    ref: itemRef
+  }), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
+});
+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,
+  /**
+   * **Note:** this is controlled by the parent SideNavMenu component, do not set manually.
+   * SideNavMenu depth to determine spacing
+   */
+  depth: PropTypes.number,
+  /**
+   * Optionally provide an href for the underlying li`
+   */
+  href: 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,
+  /**
+   * Optional component to render instead of default Link
+   */
+  as: PropTypes.elementType
+};
+
+export { SideNavMenuItem };

package/es/index.d.ts

@@ -6,5 +6,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { SideNav } from './components/SideNav.js';
+export { SideNav, SIDE_NAV_TYPE } from './components/SideNav.js';
+export { SideNavItems } from './components/SideNavItems.js';
+export { SideNavMenu } from './components/SideNavMenu.js';
+export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderPanel } from './components/HeaderPanel';

package/es/index.js

@@ -5,5 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { SideNav } from './components/SideNav.js';
+export { SIDE_NAV_TYPE, SideNav } from './components/SideNav.js';
+export { SideNavItems } from './components/SideNavItems.js';
+export { SideNavMenu } from './components/SideNavMenu.js';
+export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderPanel } from './components/HeaderPanel.js';