@carbon-labs/react-ui-shell 0.19.0 → 0.20.0

package/es/components/SideNavMenu.js

@@ -96,23 +96,6 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
 
     // if depth is more than 0, that means its nested, thus we set treeview mode
     setIsTreeview?.(true);
-    if (isTreeview) {
-      const calcButtonOffset = () => {
-        // menu with icon
-        if (children && IconElement) {
-          return depth + 3;
-        }
-
-        // menu without icon
-        if (children) {
-          return depth * 4;
-        }
-        return depth;
-      };
-      if (buttonRef.current) {
-        buttonRef.current.style.paddingLeft = `${calcButtonOffset()}rem`;
-      }
-    }
   }, [isTreeview]);
 
   /**

package/es/components/SideNavMenuItem.d.ts

@@ -4,7 +4,7 @@
  * 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 React, { ElementType, ComponentProps } from 'react';
+import React, { ElementType, ComponentProps, ComponentType } from 'react';
 import Link from './Link';
 export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
     /**
@@ -15,11 +15,6 @@ export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
      * Provide an optional class to be applied to the containing node
      */
     className?: string;
-    /**
-     * **Note:** this is controlled by the parent SideNavMenu component, do not set manually.
-     * SideNavMenu depth to determine spacing
-     */
-    depth?: number;
     /**
      * 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
@@ -34,5 +29,9 @@ export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
      * Optional component to render instead of default Link
      */
     as?: ElementType;
+    /**
+     * Provide an icon to render in the side navigation link. Should be a React class.
+     */
+    renderIcon?: ComponentType;
 }
 export declare const SideNavMenuItem: React.ForwardRefExoticComponent<Omit<SideNavMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/es/components/SideNavMenuItem.js

@@ -8,11 +8,10 @@
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import cx from '../_virtual/index.js';
 import PropTypes from 'prop-types';
-import React, { useContext, useRef, useEffect } from 'react';
-import { SideNavLinkText } from '@carbon/react';
+import React, { useContext } from 'react';
+import { SideNavIcon, SideNavLinkText } from '@carbon/react';
 import Link from './Link.js';
 import { usePrefix } from '../internal/usePrefix.js';
-import { useMergedRefs } from '../internal/useMergedRefs.js';
 import { SideNavContext } from './SideNav.js';
 
 const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
@@ -20,30 +19,19 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
   const {
     children,
     className: customClassName,
-    depth: propDepth,
     as: Component = Link,
     isActive,
+    renderIcon: IconElement,
     ...rest
   } = props;
   const {
     isTreeview
   } = useContext(SideNavContext);
   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`;
-    }
-  }, [isTreeview]);
   return /*#__PURE__*/React.createElement("li", {
     className: className
   }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
@@ -51,11 +39,17 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     role: isTreeview ? 'treeitem' : undefined,
     className: linkClassName,
     tabIndex: isTreeview ? -1 : 0,
-    ref: itemRef
-  }), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
+    ref: ref
+  }), IconElement && /*#__PURE__*/React.createElement(SideNavIcon, {
+    small: true
+  }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
 });
 SideNavMenuItem.displayName = 'SideNavMenuItem';
 SideNavMenuItem.propTypes = {
+  /**
+   * Optional component to render instead of default Link
+   */
+  as: PropTypes.elementType,
   /**
    * Specify the children to be rendered inside of the `SideNavMenuItem`
    */
@@ -64,11 +58,6 @@ SideNavMenuItem.propTypes = {
    * 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`
    */
@@ -80,9 +69,9 @@ SideNavMenuItem.propTypes = {
    */
   isActive: PropTypes.bool,
   /**
-   * Optional component to render instead of default Link
+   * Provide an icon to render in the side navigation link. Should be a React class.
    */
-  as: PropTypes.elementType
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 
 export { SideNavMenuItem };

package/lib/components/SideNavMenu.js

@@ -98,23 +98,6 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
 
     // if depth is more than 0, that means its nested, thus we set treeview mode
     setIsTreeview?.(true);
-    if (isTreeview) {
-      const calcButtonOffset = () => {
-        // menu with icon
-        if (children && IconElement) {
-          return depth + 3;
-        }
-
-        // menu without icon
-        if (children) {
-          return depth * 4;
-        }
-        return depth;
-      };
-      if (buttonRef.current) {
-        buttonRef.current.style.paddingLeft = `${calcButtonOffset()}rem`;
-      }
-    }
   }, [isTreeview]);
 
   /**

package/lib/components/SideNavMenuItem.d.ts

@@ -4,7 +4,7 @@
  * 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 React, { ElementType, ComponentProps } from 'react';
+import React, { ElementType, ComponentProps, ComponentType } from 'react';
 import Link from './Link';
 export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
     /**
@@ -15,11 +15,6 @@ export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
      * Provide an optional class to be applied to the containing node
      */
     className?: string;
-    /**
-     * **Note:** this is controlled by the parent SideNavMenu component, do not set manually.
-     * SideNavMenu depth to determine spacing
-     */
-    depth?: number;
     /**
      * 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
@@ -34,5 +29,9 @@ export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
      * Optional component to render instead of default Link
      */
     as?: ElementType;
+    /**
+     * Provide an icon to render in the side navigation link. Should be a React class.
+     */
+    renderIcon?: ComponentType;
 }
 export declare const SideNavMenuItem: React.ForwardRefExoticComponent<Omit<SideNavMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/lib/components/SideNavMenuItem.js

@@ -14,7 +14,6 @@ var React = require('react');
 var react = require('@carbon/react');
 var Link = require('./Link.js');
 var usePrefix = require('../internal/usePrefix.js');
-var useMergedRefs = require('../internal/useMergedRefs.js');
 var SideNav = require('./SideNav.js');
 
 const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
@@ -22,30 +21,19 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
   const {
     children,
     className: customClassName,
-    depth: propDepth,
     as: Component = Link.default,
     isActive,
+    renderIcon: IconElement,
     ...rest
   } = props;
   const {
     isTreeview
   } = React.useContext(SideNav.SideNavContext);
   const className = index.default(`${prefix}--side-nav__menu-item`, customClassName);
-  const depth = propDepth;
   const linkClassName = index.default({
     [`${prefix}--side-nav__link`]: true,
     [`${prefix}--side-nav__link--current`]: isActive
   });
-  const linkRef = React.useRef(null);
-  const itemRef = useMergedRefs.useMergedRefs([linkRef, ref]);
-  React.useEffect(() => {
-    const calcLinkOffset = () => {
-      return 4 + Math.max(0, depth - 1) * 1;
-    };
-    if (linkRef.current) {
-      linkRef.current.style.paddingLeft = `${calcLinkOffset()}rem`;
-    }
-  }, [isTreeview]);
   return /*#__PURE__*/React.createElement("li", {
     className: className
   }, /*#__PURE__*/React.createElement(Component, _rollupPluginBabelHelpers.extends({}, rest, {
@@ -53,11 +41,17 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     role: isTreeview ? 'treeitem' : undefined,
     className: linkClassName,
     tabIndex: isTreeview ? -1 : 0,
-    ref: itemRef
-  }), /*#__PURE__*/React.createElement(react.SideNavLinkText, null, children)));
+    ref: ref
+  }), IconElement && /*#__PURE__*/React.createElement(react.SideNavIcon, {
+    small: true
+  }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(react.SideNavLinkText, null, children)));
 });
 SideNavMenuItem.displayName = 'SideNavMenuItem';
 SideNavMenuItem.propTypes = {
+  /**
+   * Optional component to render instead of default Link
+   */
+  as: PropTypes.elementType,
   /**
    * Specify the children to be rendered inside of the `SideNavMenuItem`
    */
@@ -66,11 +60,6 @@ SideNavMenuItem.propTypes = {
    * 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`
    */
@@ -82,9 +71,9 @@ SideNavMenuItem.propTypes = {
    */
   isActive: PropTypes.bool,
   /**
-   * Optional component to render instead of default Link
+   * Provide an icon to render in the side navigation link. Should be a React class.
    */
-  as: PropTypes.elementType
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 
 exports.SideNavMenuItem = SideNavMenuItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -33,5 +33,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "91dde120d99da5e4454f7411733aeabe037e222f"
+  "gitHead": "475eccc3c775b4dd4e087e823d4e5109653d2b11"
 }

package/scss/styles/_side-nav.scss

@@ -38,6 +38,7 @@ div:has(.#{$prefix}--header)
 //----------------------------------------------------------------------------
 // Treeview Side-nav
 //----------------------------------------------------------------------------
+
 .#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron) {
   margin-inline-end: $spacing-05;
 }
@@ -62,6 +63,54 @@ div:has(.#{$prefix}--header)
   }
 }
 
+// SideNavMenu
+// Level 2
+// without icon
+.#{$prefix}--side-nav__submenu
+  + .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item
+  .#{$prefix}--side-nav__submenu {
+  padding-inline-start: $spacing-10;
+}
+
+// with icon
+.#{$prefix}--side-nav__submenu
+  + .#{$prefix}--side-nav__menu
+  > .#{$prefix}--side-nav__item--icon
+  .#{$prefix}--side-nav__submenu {
+  padding-inline-start: $spacing-09;
+}
+
+// Nested SideNavMenuItem
+// Level 2
+// without icon
+.#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
+  a.#{$prefix}--side-nav__link {
+  padding-inline-start: $spacing-10;
+}
+
+// with icon
+.#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
+  a.#{$prefix}--side-nav__link:has(.#{$prefix}--side-nav__icon) {
+  padding-inline-start: $spacing-09;
+}
+
+// Level 3
+// without icon parent
+.#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__menu
+  a.#{$prefix}--side-nav__link {
+  padding-inline-start: $spacing-11;
+}
+
+// with icon parent
+.#{$prefix}--side-nav__menu
+  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
+  a.#{$prefix}--side-nav__link {
+  padding-inline-start: $spacing-12;
+}
+
+//----------------------------------------------------------------------------
 // Side-nav Panel
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--panel {