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

package/es/components/UIShell/HeaderSideNavItems.js

@@ -1,44 +1,38 @@
 /**
- * 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 cx from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { usePrefix } from '../../internal/usePrefix.js';
+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 HeaderSideNavItems({
-  className: customClassName,
-  children,
-  hasDivider = false
-}) {
-  const prefix = usePrefix();
-  const className = cx({
-    [`${prefix}--side-nav__header-navigation`]: true,
-    [`${prefix}--side-nav__header-divider`]: hasDivider
-  }, customClassName);
-  return /*#__PURE__*/React.createElement("ul", {
-    className: className
-  }, children);
+//#region src/components/UIShell/HeaderSideNavItems.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 HeaderSideNavItems({ className: customClassName, children, hasDivider = false }) {
+	const prefix = usePrefix();
+	return /* @__PURE__ */ jsx("ul", {
+		className: classNames({
+			[`${prefix}--side-nav__header-navigation`]: true,
+			[`${prefix}--side-nav__header-divider`]: hasDivider
+		}, customClassName),
+		children
+	});
 }
 HeaderSideNavItems.propTypes = {
-  /**
-   * The child nodes to be rendered
-   */
-  children: PropTypes.node,
-  /**
-   * Optionally provide a custom class name that is applied to the underlying
-   * button
-   */
-  className: PropTypes.string,
-  /**
-   * Optionally specify if container will have a bottom divider to differentiate
-   * between original sidenav items and header menu items. False by default.
-   */
-  hasDivider: PropTypes.bool
+	children: PropTypes.node,
+	className: PropTypes.string,
+	hasDivider: PropTypes.bool
 };
 
-export { HeaderSideNavItems as default };
+//#endregion
+export { HeaderSideNavItems as default };

package/es/components/UIShell/Link.js

@@ -1,63 +1,42 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
-import { deprecate } from '../../prop-types/deprecate.js';
+import { deprecate } from "../../prop-types/deprecate.js";
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-// First define the component without generics
-
-const frFn = forwardRef;
-const Link = frFn((props, ref) => {
-  const {
-    element,
-    as: BaseComponent,
-    // Captured here to prevent it from being passed into the created element.
-    // See https://github.com/carbon-design-system/carbon/issues/3970
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-    isSideNavExpanded: _isSideNavExpanded,
-    ...rest
-  } = props;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-  const BaseComponentAsAny = BaseComponent ?? element ?? 'a';
-  return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
-    ref: ref
-  }, rest));
+//#region src/components/UIShell/Link.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 Link = forwardRef((props, ref) => {
+	const { element, as: BaseComponent, isSideNavExpanded: _isSideNavExpanded, ...rest } = props;
+	return /* @__PURE__ */ jsx(BaseComponent ?? element ?? "a", {
+		ref,
+		...rest
+	});
 });
-
 /**
- * Link is a custom component that allows us to supporting rendering elements
- * other than `a` in our markup. The goal is to allow users to support passing
- * in their own components to support use-cases like `react-router` or
- * `@reach/router`
- */
-
+* Link is a custom component that allows us to supporting rendering elements
+* other than `a` in our markup. The goal is to allow users to support passing
+* in their own components to support use-cases like `react-router` or
+* `@reach/router`
+*/
 const LinkPropTypes = {
-  /**
-   * Provide a custom element or component to render the top-level node for the
-   * component.
-   */
-  as: PropTypes.elementType,
-  /**
-   * The base element to use to build the link. Defaults to `a`, can also accept
-   * alternative tag names or custom components like `Link` from `react-router`.
-   * @deprecated Use `as` instead
-   *
-   */
-  element: deprecate(PropTypes.elementType, 'The `element` prop for `Link` has been deprecated. Please use `as` ' + 'instead. This will be removed in the next major release.'),
-  /**
-   * 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
+	as: PropTypes.elementType,
+	element: deprecate(PropTypes.elementType, "The `element` prop for `Link` has been deprecated. Please use `as` instead. This will be removed in the next major release."),
+	isSideNavExpanded: PropTypes.bool
 };
-Link.displayName = 'Link';
+Link.displayName = "Link";
 Link.propTypes = LinkPropTypes;
 
-export { LinkPropTypes, Link as default };
+//#endregion
+export { LinkPropTypes, Link as default };

package/es/components/UIShell/SideNav.js

@@ -1,252 +1,143 @@
 /**
- * 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 React, { useRef, useEffect, forwardRef } from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { Tab, Escape } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import { useWindowEvent } from '../../internal/useEvent.js';
-import { useDelayedState } from '../../internal/useDelayedState.js';
-import { SideNavContextProvider } from './SideNavContext.js';
-export { SideNavContext } from './SideNavContext.js';
-import { breakpoints } from '@carbon/layout';
-import { useMatchMedia } from '../../internal/useMatchMedia.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { Escape, Tab } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
+import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { useWindowEvent } from "../../internal/useEvent.js";
+import { useDelayedState } from "../../internal/useDelayedState.js";
+import { useMatchMedia } from "../../internal/useMatchMedia.js";
+import { AriaLabelPropType } from "../../prop-types/AriaPropTypes.js";
+import { SideNavContext, SideNavContextProvider } from "./SideNavContext.js";
+import classNames from "classnames";
+import React, { forwardRef, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { breakpoints } from "@carbon/layout";
 
-// TODO: comment back in when footer is added for rails
-// import SideNavFooter from './SideNavFooter';
-
-const frFn = forwardRef;
-const SideNav = frFn((props, ref) => {
-  const {
-    expanded: expandedProp,
-    defaultExpanded = false,
-    isChildOfHeader = true,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    children,
-    onToggle,
-    className: customClassName,
-    // TODO: comment back in when footer is added for rails
-    // translateById: t = (id) => translations[id],
-    href,
-    isFixedNav = false,
-    isRail,
-    isPersistent = true,
-    addFocusListeners = true,
-    addMouseListeners = true,
-    onOverlayClick,
-    onSideNavBlur,
-    enterDelayMs = 100,
-    ...other
-  } = props;
-  const prefix = usePrefix();
-  const {
-    current: controlled
-  } = useRef(expandedProp !== undefined);
-  const [expandedState, setExpandedState] = useDelayedState(defaultExpanded);
-  const [expandedViaHoverState, setExpandedViaHoverState] = useDelayedState(defaultExpanded);
-  const expanded = controlled ? expandedProp : expandedState;
-  const sideNavRef = useRef(null);
-  const navRef = useMergedRefs([sideNavRef, ref]);
-  const handleToggle = (event, value = !expanded) => {
-    if (!controlled) {
-      setExpandedState(value, enterDelayMs);
-    }
-    if (onToggle) {
-      onToggle(event, value);
-    }
-    if (controlled || isRail) {
-      setExpandedViaHoverState(value, enterDelayMs);
-    }
-  };
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
-  };
-
-  // TODO: comment back in when footer is added for rails
-  // const assistiveText = expanded
-  //   ? t('carbon.sidenav.state.open')
-  //   : t('carbon.sidenav.state.closed');
-
-  const className = cx(customClassName, {
-    [`${prefix}--side-nav`]: true,
-    [`${prefix}--side-nav--expanded`]: expanded || expandedViaHoverState,
-    [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
-    [`${prefix}--side-nav--rail`]: isRail,
-    [`${prefix}--side-nav--ux`]: isChildOfHeader,
-    [`${prefix}--side-nav--hidden`]: !isPersistent
-  });
-  const overlayClassName = cx({
-    [`${prefix}--side-nav__overlay`]: true,
-    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState
-  });
-
-  // In controlled mode, rail hover can temporarily expand SideNav.
-  const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
-  const eventHandlers = {};
-  if (addFocusListeners) {
-    eventHandlers.onFocus = event => {
-      if (!event.currentTarget.contains(event.relatedTarget) && isRail) {
-        handleToggle(event, true);
-      }
-    };
-    eventHandlers.onBlur = event => {
-      if (!event.currentTarget.contains(event.relatedTarget)) {
-        handleToggle(event, false);
-      }
-      if (!event.currentTarget.contains(event.relatedTarget) && expanded && !isFixedNav) {
-        if (onSideNavBlur) {
-          onSideNavBlur();
-        }
-      }
-    };
-    eventHandlers.onKeyDown = event => {
-      if (match(event, Escape)) {
-        handleToggle(event, false);
-        if (href) {
-          window.location.href = href;
-        }
-      }
-    };
-  }
-  if (addMouseListeners && isRail) {
-    eventHandlers.onMouseEnter = () => {
-      handleToggle(true, true);
-    };
-    eventHandlers.onMouseLeave = () => {
-      setExpandedState(false);
-      setExpandedViaHoverState(false);
-      handleToggle(false, false);
-    };
-    eventHandlers.onClick = () => {
-      //if delay is enabled, and user intentionally clicks it to see it expanded immediately
-      setExpandedState(true);
-      setExpandedViaHoverState(true);
-      handleToggle(true, true);
-    };
-  }
-  useWindowEvent('keydown', event => {
-    const focusedElement = document.activeElement;
-    if (match(event, Tab) && expanded && !isFixedNav && sideNavRef.current && focusedElement?.classList.contains(`${prefix}--header__menu-toggle`) && !focusedElement.closest('nav')) {
-      sideNavRef.current.focus();
-    }
-  });
-  const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
-  const isLg = useMatchMedia(lgMediaQuery);
-  const inertEnabled = !isRail ? !(expanded || isLg) : false;
-  useEffect(() => {
-    const node = sideNavRef.current;
-    if (!node) return;
-    if (inertEnabled) {
-      node.setAttribute('inert', '');
-    } else {
-      node.removeAttribute('inert');
-    }
-  }, [inertEnabled]);
-  return /*#__PURE__*/React.createElement(SideNavContextProvider, {
-    isRail: isRail,
-    isSideNavExpanded: currentExpansionState
-  }, isFixedNav ? null :
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-  React.createElement("div", {
-    className: overlayClassName,
-    onClick: onOverlayClick
-  }), /*#__PURE__*/React.createElement("nav", _extends({
-    tabIndex: -1,
-    ref: navRef,
-    className: `${prefix}--side-nav__navigation ${className}`
-  }, accessibilityLabel, eventHandlers, other), children));
+//#region src/components/UIShell/SideNav.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 SideNav = forwardRef((props, ref) => {
+	const { expanded: expandedProp, defaultExpanded = false, isChildOfHeader = true, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, onToggle, className: customClassName, href, isFixedNav = false, isRail, isPersistent = true, addFocusListeners = true, addMouseListeners = true, onOverlayClick, onSideNavBlur, enterDelayMs = 100, ...other } = props;
+	const prefix = usePrefix();
+	const { current: controlled } = useRef(expandedProp !== void 0);
+	const [expandedState, setExpandedState] = useDelayedState(defaultExpanded);
+	const [expandedViaHoverState, setExpandedViaHoverState] = useDelayedState(defaultExpanded);
+	const expanded = controlled ? expandedProp : expandedState;
+	const sideNavRef = useRef(null);
+	const navRef = useMergedRefs([sideNavRef, ref]);
+	const handleToggle = (event, value = !expanded) => {
+		if (!controlled) setExpandedState(value, enterDelayMs);
+		if (onToggle) onToggle(event, value);
+		if (controlled || isRail) setExpandedViaHoverState(value, enterDelayMs);
+	};
+	const accessibilityLabel = {
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy
+	};
+	const className = classNames(customClassName, {
+		[`${prefix}--side-nav`]: true,
+		[`${prefix}--side-nav--expanded`]: expanded || expandedViaHoverState,
+		[`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
+		[`${prefix}--side-nav--rail`]: isRail,
+		[`${prefix}--side-nav--ux`]: isChildOfHeader,
+		[`${prefix}--side-nav--hidden`]: !isPersistent
+	});
+	const overlayClassName = classNames({
+		[`${prefix}--side-nav__overlay`]: true,
+		[`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState
+	});
+	const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
+	const eventHandlers = {};
+	if (addFocusListeners) {
+		eventHandlers.onFocus = (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget) && isRail) handleToggle(event, true);
+		};
+		eventHandlers.onBlur = (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) handleToggle(event, false);
+			if (!event.currentTarget.contains(event.relatedTarget) && expanded && !isFixedNav) {
+				if (onSideNavBlur) onSideNavBlur();
+			}
+		};
+		eventHandlers.onKeyDown = (event) => {
+			if (match(event, Escape)) {
+				handleToggle(event, false);
+				if (href) window.location.href = href;
+			}
+		};
+	}
+	if (addMouseListeners && isRail) {
+		eventHandlers.onMouseEnter = () => {
+			handleToggle(true, true);
+		};
+		eventHandlers.onMouseLeave = () => {
+			setExpandedState(false);
+			setExpandedViaHoverState(false);
+			handleToggle(false, false);
+		};
+		eventHandlers.onClick = () => {
+			setExpandedState(true);
+			setExpandedViaHoverState(true);
+			handleToggle(true, true);
+		};
+	}
+	useWindowEvent("keydown", (event) => {
+		const focusedElement = document.activeElement;
+		if (match(event, Tab) && expanded && !isFixedNav && sideNavRef.current && focusedElement?.classList.contains(`${prefix}--header__menu-toggle`) && !focusedElement.closest("nav")) sideNavRef.current.focus();
+	});
+	const isLg = useMatchMedia(`(min-width: ${breakpoints.lg.width})`);
+	const inertEnabled = !isRail ? !(expanded || isLg) : false;
+	useEffect(() => {
+		const node = sideNavRef.current;
+		if (!node) return;
+		if (inertEnabled) node.setAttribute("inert", "");
+		else node.removeAttribute("inert");
+	}, [inertEnabled]);
+	return /* @__PURE__ */ jsxs(SideNavContextProvider, {
+		isRail,
+		isSideNavExpanded: currentExpansionState,
+		children: [isFixedNav ? null : /* @__PURE__ */ jsx("div", {
+			className: overlayClassName,
+			onClick: onOverlayClick
+		}), /* @__PURE__ */ jsx("nav", {
+			tabIndex: -1,
+			ref: navRef,
+			className: `${prefix}--side-nav__navigation ${className}`,
+			...accessibilityLabel,
+			...eventHandlers,
+			...other,
+			children
+		})]
+	});
 });
-SideNav.displayName = 'SideNav';
+SideNav.displayName = "SideNav";
 SideNav.propTypes = {
-  /**
-   * Required props for accessibility label on the underlying menu
-   */
-  ...AriaLabelPropType,
-  /**
-   * Specify whether focus and blur listeners are added. They are by default.
-   */
-  addFocusListeners: PropTypes.bool,
-  /**
-   * Specify whether mouse entry/exit listeners are added. They are by default.
-   */
-  addMouseListeners: PropTypes.bool,
-  /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
-   */
-  className: PropTypes.string,
-  /**
-   * If `true`, the SideNav will be open on initial render.
-   */
-  defaultExpanded: PropTypes.bool,
-  /**
-   * Specify the duration in milliseconds to delay before displaying the side navigation
-   */
-  enterDelayMs: PropTypes.number,
-  /**
-   * If `true`, the SideNav will be expanded, otherwise it will be collapsed.
-   * Using this prop causes SideNav to become a controlled component.
-   */
-  expanded: PropTypes.bool,
-  /**
-   * Provide the `href` to the id of the element on your package that is the
-   * main content.
-   */
-  href: PropTypes.string,
-  /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
-   */
-  isChildOfHeader: PropTypes.bool,
-  /**
-   * Specify if sideNav is standalone
-   */
-  isFixedNav: PropTypes.bool,
-  /**
-   * Specify if the sideNav will be persistent above the lg breakpoint
-   */
-  isPersistent: PropTypes.bool,
-  /**
-   * Optional prop to display the side nav rail.
-   */
-  isRail: PropTypes.bool,
-  /**
-   * An optional listener that is called when the SideNav overlay is clicked
-   *
-   * @param {object} event
-   */
-  onOverlayClick: PropTypes.func,
-  /**
-   * An optional listener that is called a callback to collapse the SideNav
-   */
-
-  onSideNavBlur: PropTypes.func,
-  /**
-   * An optional listener that is called when an event that would cause
-   * toggling the SideNav occurs.
-   *
-   * @param {object} event
-   * @param {boolean} value
-   */
-  onToggle: PropTypes.func
-
-  /**
-   * Provide a custom function for translating all message ids within this
-   * component. This function will take in two arguments: the message Id and the
-   * state of the component. From this, you should return a string representing
-   * the label you want displayed or read by screen readers.
-   */
-  // translateById: PropTypes.func,
+	...AriaLabelPropType,
+	addFocusListeners: PropTypes.bool,
+	addMouseListeners: PropTypes.bool,
+	className: PropTypes.string,
+	defaultExpanded: PropTypes.bool,
+	enterDelayMs: PropTypes.number,
+	expanded: PropTypes.bool,
+	href: PropTypes.string,
+	isChildOfHeader: PropTypes.bool,
+	isFixedNav: PropTypes.bool,
+	isPersistent: PropTypes.bool,
+	isRail: PropTypes.bool,
+	onOverlayClick: PropTypes.func,
+	onSideNavBlur: PropTypes.func,
+	onToggle: PropTypes.func
 };
 
-export { SideNav as default };
+//#endregion
+export { SideNav as default };

package/es/components/UIShell/SideNavContext.js

@@ -1,24 +1,30 @@
 /**
- * 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 React, { createContext } from 'react';
+import React, { createContext } from "react";
+import { jsx } from "react/jsx-runtime";
 
-const SideNavContext = /*#__PURE__*/createContext({});
-const SideNavContextProvider = ({
-  children,
-  isRail,
-  isSideNavExpanded
-}) => {
-  return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
-    value: {
-      isRail,
-      isSideNavExpanded
-    }
-  }, children);
+//#region src/components/UIShell/SideNavContext.tsx
+/**
+* Copyright IBM Corp. 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 SideNavContext = createContext({});
+const SideNavContextProvider = ({ children, isRail, isSideNavExpanded }) => {
+	return /* @__PURE__ */ jsx(SideNavContext.Provider, {
+		value: {
+			isRail,
+			isSideNavExpanded
+		},
+		children
+	});
 };
 
-export { SideNavContext, SideNavContextProvider };
+//#endregion
+export { SideNavContext, SideNavContextProvider };