@carbon/react 1.103.0-rc.0 → 1.104.0-rc.0

package/es/components/UIShell/SideNavLink.js

@@ -1,90 +1,63 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 'classnames';
-import PropTypes from 'prop-types';
-import React, { useContext, forwardRef } from 'react';
-import Link, { LinkPropTypes } from './Link.js';
-import SideNavIcon from './SideNavIcon.js';
-import SideNavItem from './SideNavItem.js';
-import SideNavLinkText from './SideNavLinkText.js';
-import { SideNavContext } from './SideNavContext.js';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import Link, { LinkPropTypes } from "./Link.js";
+import { SideNavContext } from "./SideNavContext.js";
+import SideNavIcon from "./SideNavIcon.js";
+import SideNavItem from "./SideNavItem.js";
+import SideNavLinkText from "./SideNavLinkText.js";
+import classNames from "classnames";
+import React, { forwardRef, useContext } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-// First define a non-generic base component to work with forwardRef
-
-const frFn = forwardRef;
-const SideNavLink = frFn((props, ref) => {
-  const {
-    children,
-    className: customClassName,
-    renderIcon: IconElement,
-    isActive,
-    isSideNavExpanded,
-    large = false,
-    tabIndex,
-    ...rest
-  } = props;
-  const {
-    isRail,
-    isSideNavExpanded: contextIsSideNavExpanded
-  } = useContext(SideNavContext);
-  const currentIsSideNavExpanded = isSideNavExpanded ?? contextIsSideNavExpanded;
-  const prefix = usePrefix();
-  const className = cx({
-    [`${prefix}--side-nav__link`]: true,
-    [`${prefix}--side-nav__link--current`]: isActive,
-    [customClassName]: !!customClassName
-  });
-  return /*#__PURE__*/React.createElement(SideNavItem, {
-    large: large
-  }, /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
-    className: className,
-    ref: ref,
-    tabIndex: tabIndex === undefined ? !currentIsSideNavExpanded && !isRail ? -1 : 0 : tabIndex
-  }), IconElement && /*#__PURE__*/React.createElement(SideNavIcon, {
-    small: true
-  }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
-  // Cast preserves the generic call signature for consumers after forwardRef.
+//#region src/components/UIShell/SideNavLink.tsx
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const SideNavLink = forwardRef((props, ref) => {
+	const { children, className: customClassName, renderIcon: IconElement, isActive, isSideNavExpanded, large = false, tabIndex, ...rest } = props;
+	const { isRail, isSideNavExpanded: contextIsSideNavExpanded } = useContext(SideNavContext);
+	const currentIsSideNavExpanded = isSideNavExpanded ?? contextIsSideNavExpanded;
+	const prefix = usePrefix();
+	const className = classNames({
+		[`${prefix}--side-nav__link`]: true,
+		[`${prefix}--side-nav__link--current`]: isActive,
+		[customClassName]: !!customClassName
+	});
+	return /* @__PURE__ */ jsx(SideNavItem, {
+		large,
+		children: /* @__PURE__ */ jsxs(Link, {
+			...rest,
+			className,
+			ref,
+			tabIndex: tabIndex === void 0 ? !currentIsSideNavExpanded && !isRail ? -1 : 0 : tabIndex,
+			children: [IconElement && /* @__PURE__ */ jsx(SideNavIcon, {
+				small: true,
+				children: /* @__PURE__ */ jsx(IconElement, {})
+			}), /* @__PURE__ */ jsx(SideNavLinkText, { children })]
+		})
+	});
 });
-SideNavLink.displayName = 'SideNavLink';
+SideNavLink.displayName = "SideNavLink";
 SideNavLink.propTypes = {
-  ...LinkPropTypes,
-  /**
-   * Specify the text content for the link
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Provide an optional class to be applied to the containing node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the link is the current page
-   */
-  isActive: PropTypes.bool,
-  /**
-   * 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: PropTypes.bool,
-  /**
-   * Specify if this is a large variation of the SideNavLink
-   */
-  large: PropTypes.bool,
-  /**
-   * A component used to render an icon.
-   */
-  // @ts-expect-error - PropTypes are unable to cover this case.
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
-   */
-  tabIndex: PropTypes.number
+	...LinkPropTypes,
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+	isActive: PropTypes.bool,
+	isSideNavExpanded: PropTypes.bool,
+	large: PropTypes.bool,
+	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	tabIndex: PropTypes.number
 };
 
-export { SideNavLink as default };
+//#endregion
+export { SideNavLink as default };

package/es/components/UIShell/SideNavLinkText.js

@@ -1,36 +1,35 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 'classnames';
-import React from 'react';
-import { usePrefix } from '../../internal/usePrefix.js';
-import PropTypes from 'prop-types';
+import { usePrefix } from "../../internal/usePrefix.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-function SideNavLinkText({
-  className: customClassName,
-  children,
-  ...rest
-}) {
-  const prefix = usePrefix();
-  const className = cx(`${prefix}--side-nav__link-text`, customClassName);
-  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
-    className: className
-  }), children);
+//#region src/components/UIShell/SideNavLinkText.tsx
+/**
+* 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.
+*/
+function SideNavLinkText({ className: customClassName, children, ...rest }) {
+	const className = classNames(`${usePrefix()}--side-nav__link-text`, customClassName);
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		className,
+		children
+	});
 }
 SideNavLinkText.propTypes = {
-  /**
-   * Provide the content for the link text
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Provide an optional class to be applied to the containing node
-   */
-  className: PropTypes.string
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string
 };
 
-export { SideNavLinkText as default };
+//#endregion
+export { SideNavLinkText as default };

package/es/components/UIShell/SideNavMenu.js

@@ -1,160 +1,119 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 { ChevronDown } from '@carbon/icons-react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { forwardRef, useContext, useState } from 'react';
-import SideNavIcon from './SideNavIcon.js';
-import { Escape } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { SideNavContext } from './SideNavContext.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { Escape } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
+import { SideNavContext } from "./SideNavContext.js";
+import SideNavIcon from "./SideNavIcon.js";
+import classNames from "classnames";
+import React, { forwardRef, useContext, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "@carbon/icons-react";
 
-var _ChevronDown;
-const SideNavMenu = /*#__PURE__*/forwardRef(({
-  className: customClassName,
-  children,
-  defaultExpanded = false,
-  isActive = false,
-  large = false,
-  renderIcon: IconElement,
-  isSideNavExpanded,
-  tabIndex,
-  title
-}, ref) => {
-  const {
-    isRail,
-    isSideNavExpanded: contextIsSideNavExpanded
-  } = useContext(SideNavContext);
-  const currentIsSideNavExpanded = isSideNavExpanded ?? contextIsSideNavExpanded;
-  const prefix = usePrefix();
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-  const [prevExpanded, setPrevExpanded] = useState(defaultExpanded);
-  const className = cx({
-    [`${prefix}--side-nav__item`]: true,
-    [`${prefix}--side-nav__item--active`]: isActive || hasActiveDescendant(children) && !isExpanded,
-    [`${prefix}--side-nav__item--icon`]: IconElement,
-    [`${prefix}--side-nav__item--large`]: large,
-    [customClassName]: !!customClassName
-  });
-  if (!currentIsSideNavExpanded && isExpanded && isRail) {
-    setIsExpanded(false);
-    setPrevExpanded(true);
-  } else if (currentIsSideNavExpanded && prevExpanded && isRail) {
-    setIsExpanded(true);
-    setPrevExpanded(false);
-  }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("li", {
-      className: className,
-      onKeyDown: event => {
-        if (match(event, Escape)) {
-          setIsExpanded(false);
-        }
-      }
-    }, /*#__PURE__*/React.createElement("button", {
-      "aria-expanded": isExpanded,
-      className: `${prefix}--side-nav__submenu`,
-      onClick: () => {
-        setIsExpanded(!isExpanded);
-      },
-      ref: ref,
-      type: "button",
-      tabIndex: tabIndex === undefined ? !currentIsSideNavExpanded && !isRail ? -1 : 0 : tabIndex
-    }, IconElement && /*#__PURE__*/React.createElement(SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
-      className: `${prefix}--side-nav__submenu-title`
-    }, title), /*#__PURE__*/React.createElement(SideNavIcon, {
-      className: `${prefix}--side-nav__submenu-chevron`,
-      small: true
-    }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(ChevronDown, {
-      size: 20
-    })))), /*#__PURE__*/React.createElement("ul", {
-      className: `${prefix}--side-nav__menu`
-    }, children))
-  );
+//#region src/components/UIShell/SideNavMenu.tsx
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const SideNavMenu = forwardRef(({ className: customClassName, children, defaultExpanded = false, isActive = false, large = false, renderIcon: IconElement, isSideNavExpanded, tabIndex, title }, ref) => {
+	const { isRail, isSideNavExpanded: contextIsSideNavExpanded } = useContext(SideNavContext);
+	const currentIsSideNavExpanded = isSideNavExpanded ?? contextIsSideNavExpanded;
+	const prefix = usePrefix();
+	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+	const prevExpandedRef = useRef(false);
+	const className = classNames({
+		[`${prefix}--side-nav__item`]: true,
+		[`${prefix}--side-nav__item--active`]: isActive || hasActiveDescendant(children) && !isExpanded,
+		[`${prefix}--side-nav__item--icon`]: IconElement,
+		[`${prefix}--side-nav__item--large`]: large,
+		[customClassName]: !!customClassName
+	});
+	useEffect(() => {
+		if (!isRail) return;
+		if (!currentIsSideNavExpanded && isExpanded) {
+			setIsExpanded(false);
+			prevExpandedRef.current = true;
+		} else if (currentIsSideNavExpanded && prevExpandedRef.current) {
+			setIsExpanded(true);
+			prevExpandedRef.current = false;
+		}
+	}, [
+		currentIsSideNavExpanded,
+		isExpanded,
+		isRail
+	]);
+	return /* @__PURE__ */ jsxs("li", {
+		className,
+		onKeyDown: (event) => {
+			if (match(event, Escape)) setIsExpanded(false);
+		},
+		children: [/* @__PURE__ */ jsxs("button", {
+			"aria-expanded": isExpanded,
+			className: `${prefix}--side-nav__submenu`,
+			onClick: () => {
+				setIsExpanded(!isExpanded);
+			},
+			ref,
+			type: "button",
+			tabIndex: tabIndex === void 0 ? !currentIsSideNavExpanded && !isRail ? -1 : 0 : tabIndex,
+			children: [
+				IconElement && /* @__PURE__ */ jsx(SideNavIcon, { children: /* @__PURE__ */ jsx(IconElement, {}) }),
+				/* @__PURE__ */ jsx("span", {
+					className: `${prefix}--side-nav__submenu-title`,
+					children: title
+				}),
+				/* @__PURE__ */ jsx(SideNavIcon, {
+					className: `${prefix}--side-nav__submenu-chevron`,
+					small: true,
+					children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 })
+				})
+			]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: `${prefix}--side-nav__menu`,
+			children
+		})]
+	});
 });
-SideNavMenu.displayName = 'SideNavMenu';
+SideNavMenu.displayName = "SideNavMenu";
 SideNavMenu.propTypes = {
-  /**
-   * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
-   */
-  children: PropTypes.node,
-  /**
-   * Provide an optional class to be applied to the containing node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the menu should default to expanded. By default, it will
-   * be closed.
-   */
-  defaultExpanded: PropTypes.bool,
-  /**
-   * Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
-   * considered active if one of its menu items are a link for the current
-   * page.
-   */
-  isActive: PropTypes.bool,
-  /**
-   * 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: PropTypes.bool,
-  /**
-   * Specify if this is a large variation of the SideNavMenu
-   */
-  large: PropTypes.bool,
-  /**
-   * A component used to render an icon.
-   */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
-   */
-  tabIndex: PropTypes.number,
-  /**
-   * Provide the text for the overall menu name
-   */
-  title: PropTypes.string.isRequired
+	children: PropTypes.node,
+	className: PropTypes.string,
+	defaultExpanded: PropTypes.bool,
+	isActive: PropTypes.bool,
+	isSideNavExpanded: PropTypes.bool,
+	large: PropTypes.bool,
+	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	tabIndex: PropTypes.number,
+	title: PropTypes.string.isRequired
 };
-
 /**
 Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
 a single element, an array of elements, or null or undefined.
 **/
 function hasActiveDescendant(children) {
-  if (Array.isArray(children)) {
-    return children.some(child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return false;
-      }
-
-      /** Explicitly defining the expected prop types (isActive and 'aria-current) for the children to ensure type
-      safety when accessing their props.
-      **/
-      const props = child.props;
-      if (props.isActive === true || props['aria-current'] || props.children instanceof Array && hasActiveDescendant(props.children)) {
-        return true;
-      }
-      return false;
-    });
-  }
-
-  // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
-
-  if (/*#__PURE__*/React.isValidElement(children)) {
-    const props = children.props;
-    if (props.isActive === true || props['aria-current']) {
-      return true;
-    }
-  }
-  return false;
+	if (Array.isArray(children)) return children.some((child) => {
+		if (!React.isValidElement(child)) return false;
+		/** Explicitly defining the expected prop types (isActive and 'aria-current) for the children to ensure type
+		safety when accessing their props.
+		**/
+		const props = child.props;
+		if (props.isActive === true || props["aria-current"] || props.children instanceof Array && hasActiveDescendant(props.children)) return true;
+		return false;
+	});
+	if (React.isValidElement(children)) {
+		const props = children.props;
+		if (props.isActive === true || props["aria-current"]) return true;
+	}
+	return false;
 }
 
-export { SideNavMenu, SideNavMenu as default };
+//#endregion
+export { SideNavMenu as default };

package/es/components/UIShell/SideNavMenuItem.js

@@ -1,63 +1,51 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 'classnames';
-import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
-import SideNavLinkText from './SideNavLinkText.js';
-import Link from './Link.js';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import Link from "./Link.js";
+import SideNavLinkText from "./SideNavLinkText.js";
+import classNames from "classnames";
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const SideNavMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
-  const prefix = usePrefix();
-  const {
-    children,
-    className: customClassName,
-    as: Component = Link,
-    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 /*#__PURE__*/React.createElement("li", {
-    className: className
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
-    className: linkClassName,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
+//#region src/components/UIShell/SideNavMenuItem.tsx
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const SideNavMenuItem = forwardRef((props, ref) => {
+	const prefix = usePrefix();
+	const { children, className: customClassName, as: Component = Link, isActive, ...rest } = props;
+	const className = classNames(`${prefix}--side-nav__menu-item`, customClassName);
+	const linkClassName = classNames({
+		[`${prefix}--side-nav__link`]: true,
+		[`${prefix}--side-nav__link--current`]: isActive
+	});
+	return /* @__PURE__ */ jsx("li", {
+		className,
+		children: /* @__PURE__ */ jsx(Component, {
+			...rest,
+			className: linkClassName,
+			ref,
+			children: /* @__PURE__ */ jsx(SideNavLinkText, { children })
+		})
+	});
 });
-SideNavMenuItem.displayName = 'SideNavMenuItem';
+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`
-   */
-  children: PropTypes.node,
-  /**
-   * Provide an optional class to be applied to the containing node
-   */
-  className: PropTypes.string,
-  /**
-   * 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
+	as: PropTypes.elementType,
+	children: PropTypes.node,
+	className: PropTypes.string,
+	href: PropTypes.string,
+	isActive: PropTypes.bool
 };
 
-export { SideNavMenuItem as default };
+//#endregion
+export { SideNavMenuItem as default };