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

package/es/components/TreeView/TreeView.js

@@ -1,249 +1,176 @@
 /**
- * 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, { useRef, useState, useEffect, useMemo } from 'react';
-import { ArrowUp, ArrowDown, Home, End } from '../../internal/keyboard/keys.js';
-import { matches, match } from '../../internal/keyboard/match.js';
-import { useControllableState } from '../../internal/useControllableState.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { useId } from '../../internal/useId.js';
-import { useFeatureFlag } from '../FeatureFlags/index.js';
-import TreeNode from './TreeNode.js';
-import { TreeContext, DepthContext } from './TreeContext.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { ArrowDown, ArrowUp, End, Home } from "../../internal/keyboard/keys.js";
+import { match, matches } from "../../internal/keyboard/match.js";
+import { useId } from "../../internal/useId.js";
+import { useFeatureFlag } from "../FeatureFlags/index.js";
+import { useControllableState } from "../../internal/useControllableState.js";
+import { DepthContext, TreeContext } from "./TreeContext.js";
+import TreeNode from "./TreeNode.js";
+import classNames from "classnames";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
-const TreeView = ({
-  active: prespecifiedActive,
-  children,
-  className,
-  hideLabel = false,
-  label,
-  multiselect = false,
-  onActivate,
-  onSelect,
-  selected: preselected,
-  size = 'sm',
-  ...rest
-}) => {
-  const enableTreeviewControllable = useFeatureFlag('enable-treeview-controllable');
-
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const {
-    current: treeId
-  } = useRef(rest.id || useId());
-  const prefix = usePrefix();
-  const treeClasses = cx(className, `${prefix}--tree`, {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
-    // @ts-ignore - will always be false according to prop types
-
-    [`${prefix}--tree--${size}`]: size !== 'default'
-  });
-  const treeRootRef = useRef(null);
-  const treeWalker = useRef(null);
-  const controllableSelectionState = useControllableState({
-    value: preselected,
-    onChange: onSelect,
-    defaultValue: []
-  });
-  const uncontrollableSelectionState = useState(preselected ?? []);
-  const [selected, setSelected] = enableTreeviewControllable ? controllableSelectionState : uncontrollableSelectionState;
-  const controllableActiveState = useControllableState({
-    value: prespecifiedActive,
-    onChange: onActivate,
-    defaultValue: undefined
-  });
-  const uncontrollableActiveState = useState(prespecifiedActive);
-  const [active, setActive] = enableTreeviewControllable ? controllableActiveState : uncontrollableActiveState;
-  function resetNodeTabIndices() {
-    Array.prototype.forEach.call(treeRootRef?.current?.querySelectorAll('[tabIndex="0"]') ?? [], item => {
-      item.tabIndex = -1;
-    });
-  }
-
-  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  function handleTreeSelect(event, node) {
-    const nodeId = node.id;
-    if (nodeId) {
-      if (multiselect && (event.metaKey || event.ctrlKey)) {
-        if (!selected.includes(nodeId)) {
-          setSelected(selected.concat(nodeId));
-        } else {
-          setSelected(selected.filter(selectedId => selectedId !== nodeId));
-        }
-        if (!enableTreeviewControllable) {
-          onSelect?.(event, node);
-        }
-      } else {
-        setSelected([nodeId]);
-        setActive(nodeId);
-        if (!enableTreeviewControllable) {
-          onSelect?.(event, {
-            activeNodeId: nodeId,
-            ...node
-          });
-        }
-      }
-    }
-  }
-
-  // Set the first non-disabled node to be tabbable
-  useEffect(() => {
-    const firstNode = treeRootRef.current?.querySelector(`.${prefix}--tree-node:not(.${prefix}--tree-node--disabled)`);
-    if (firstNode instanceof HTMLElement) {
-      firstNode.tabIndex = 0;
-    }
-  }, [children, prefix]);
-  function handleKeyDown(event) {
-    event.stopPropagation();
-    if (matches(event, [ArrowUp, ArrowDown, Home, End])) {
-      event.preventDefault();
-    }
-    if (!treeWalker.current) {
-      return;
-    }
-    treeWalker.current.currentNode = event.target;
-    let nextFocusNode = null;
-    if (match(event, ArrowUp)) {
-      nextFocusNode = treeWalker.current.previousNode();
-    }
-    if (match(event, ArrowDown)) {
-      nextFocusNode = treeWalker.current.nextNode();
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
-    // @ts-ignore - `matches` doesn't like the object syntax without missing properties
-    if (matches(event, [Home, End, {
-      code: 'KeyA'
-    }])) {
-      const nodeIds = [];
-      if (matches(event, [Home, End])) {
-        if (multiselect && event.shiftKey && event.ctrlKey && treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled') && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) {
-          nodeIds.push(treeWalker.current.currentNode.id);
-        }
-        while (match(event, Home) ? treeWalker.current.previousNode() : treeWalker.current.nextNode()) {
-          nextFocusNode = treeWalker.current.currentNode;
-          if (multiselect && event.shiftKey && event.ctrlKey && nextFocusNode instanceof Element && !nextFocusNode.getAttribute('aria-disabled') && !nextFocusNode.classList.contains(`${prefix}--tree-node--hidden`)) {
-            nodeIds.push(nextFocusNode.id);
-          }
-        }
-      }
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
-      // @ts-ignore - `matches` doesn't like the object syntax without missing properties
-      if (match(event, {
-        code: 'KeyA'
-      }) && event.ctrlKey) {
-        treeWalker.current.currentNode = treeWalker.current.root;
-        while (treeWalker.current.nextNode()) {
-          if (treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled') && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) {
-            nodeIds.push(treeWalker.current.currentNode.id);
-          }
-        }
-      }
-      setSelected(selected.concat(nodeIds));
-    }
-    if (nextFocusNode && nextFocusNode !== event.target) {
-      resetNodeTabIndices();
-      if (nextFocusNode instanceof HTMLElement) {
-        nextFocusNode.tabIndex = 0;
-        nextFocusNode.focus();
-      }
-    }
-    rest?.onKeyDown?.(event);
-  }
-  useEffect(() => {
-    if (treeRootRef.current && !treeWalker.current) {
-      treeWalker.current = document.createTreeWalker(treeRootRef.current, NodeFilter.SHOW_ELEMENT, {
-        acceptNode: function (node) {
-          if (!(node instanceof Element)) {
-            return NodeFilter.FILTER_SKIP;
-          }
-          if (node.classList.contains(`${prefix}--tree-node--disabled`) || node.classList.contains(`${prefix}--tree-node--hidden`)) {
-            return NodeFilter.FILTER_REJECT;
-          }
-          if (node.matches(`.${prefix}--tree-node`)) {
-            return NodeFilter.FILTER_ACCEPT;
-          }
-          return NodeFilter.FILTER_SKIP;
-        }
-      });
-    }
-  }, [prefix]);
-  const labelId = `${treeId}__label`;
-  const TreeLabel = () => !hideLabel ? /*#__PURE__*/React.createElement("label", {
-    id: labelId,
-    className: `${prefix}--label`
-  }, label) : null;
-  const treeContextValue = useMemo(() => ({
-    active,
-    multiselect,
-    onActivate: setActive,
-    onTreeSelect: handleTreeSelect,
-    selected,
-    size
-  }), [active, multiselect, setActive, handleTreeSelect, selected, size]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeLabel, null), /*#__PURE__*/React.createElement(TreeContext.Provider, {
-    value: treeContextValue
-  }, /*#__PURE__*/React.createElement(DepthContext.Provider, {
-    value: 0
-  }, /*#__PURE__*/React.createElement("ul", _extends({}, rest, {
-    "aria-label": hideLabel ? label : undefined,
-    "aria-labelledby": !hideLabel ? labelId : undefined,
-    "aria-multiselectable": multiselect || undefined,
-    className: treeClasses,
-    onKeyDown: handleKeyDown,
-    ref: treeRootRef,
-    role: "tree"
-  }), children))));
+//#region src/components/TreeView/TreeView.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 TreeView = ({ active: prespecifiedActive, children, className, hideLabel = false, label, multiselect = false, onActivate, onSelect, selected: preselected, size = "sm", ...rest }) => {
+	const enableTreeviewControllable = useFeatureFlag("enable-treeview-controllable");
+	const { current: treeId } = useRef(rest.id || useId());
+	const prefix = usePrefix();
+	const treeClasses = classNames(className, `${prefix}--tree`, { [`${prefix}--tree--${size}`]: size !== "default" });
+	const treeRootRef = useRef(null);
+	const treeWalker = useRef(null);
+	const controllableSelectionState = useControllableState({
+		value: preselected,
+		onChange: onSelect,
+		defaultValue: []
+	});
+	const uncontrollableSelectionState = useState(preselected ?? []);
+	const [selected, setSelected] = enableTreeviewControllable ? controllableSelectionState : uncontrollableSelectionState;
+	const controllableActiveState = useControllableState({
+		value: prespecifiedActive,
+		onChange: onActivate,
+		defaultValue: void 0
+	});
+	const uncontrollableActiveState = useState(prespecifiedActive);
+	const [active, setActive] = enableTreeviewControllable ? controllableActiveState : uncontrollableActiveState;
+	function resetNodeTabIndices() {
+		Array.prototype.forEach.call(treeRootRef?.current?.querySelectorAll("[tabIndex=\"0\"]") ?? [], (item) => {
+			item.tabIndex = -1;
+		});
+	}
+	function handleTreeSelect(event, node) {
+		const nodeId = node.id;
+		if (nodeId) if (multiselect && (event.metaKey || event.ctrlKey)) {
+			if (!selected.includes(nodeId)) setSelected(selected.concat(nodeId));
+			else setSelected(selected.filter((selectedId) => selectedId !== nodeId));
+			if (!enableTreeviewControllable) onSelect?.(event, node);
+		} else {
+			setSelected([nodeId]);
+			setActive(nodeId);
+			if (!enableTreeviewControllable) onSelect?.(event, {
+				activeNodeId: nodeId,
+				...node
+			});
+		}
+	}
+	useEffect(() => {
+		const firstNode = treeRootRef.current?.querySelector(`.${prefix}--tree-node:not(.${prefix}--tree-node--disabled)`);
+		if (firstNode instanceof HTMLElement) firstNode.tabIndex = 0;
+	}, [children, prefix]);
+	function handleKeyDown(event) {
+		event.stopPropagation();
+		if (matches(event, [
+			ArrowUp,
+			ArrowDown,
+			Home,
+			End
+		])) event.preventDefault();
+		if (!treeWalker.current) return;
+		treeWalker.current.currentNode = event.target;
+		let nextFocusNode = null;
+		if (match(event, ArrowUp)) nextFocusNode = treeWalker.current.previousNode();
+		if (match(event, ArrowDown)) nextFocusNode = treeWalker.current.nextNode();
+		if (matches(event, [
+			Home,
+			End,
+			{ code: "KeyA" }
+		])) {
+			const nodeIds = [];
+			if (matches(event, [Home, End])) {
+				if (multiselect && event.shiftKey && event.ctrlKey && treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute("aria-disabled") && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) nodeIds.push(treeWalker.current.currentNode.id);
+				while (match(event, Home) ? treeWalker.current.previousNode() : treeWalker.current.nextNode()) {
+					nextFocusNode = treeWalker.current.currentNode;
+					if (multiselect && event.shiftKey && event.ctrlKey && nextFocusNode instanceof Element && !nextFocusNode.getAttribute("aria-disabled") && !nextFocusNode.classList.contains(`${prefix}--tree-node--hidden`)) nodeIds.push(nextFocusNode.id);
+				}
+			}
+			if (match(event, { code: "KeyA" }) && event.ctrlKey) {
+				treeWalker.current.currentNode = treeWalker.current.root;
+				while (treeWalker.current.nextNode()) if (treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute("aria-disabled") && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) nodeIds.push(treeWalker.current.currentNode.id);
+			}
+			setSelected(selected.concat(nodeIds));
+		}
+		if (nextFocusNode && nextFocusNode !== event.target) {
+			resetNodeTabIndices();
+			if (nextFocusNode instanceof HTMLElement) {
+				nextFocusNode.tabIndex = 0;
+				nextFocusNode.focus();
+			}
+		}
+		rest?.onKeyDown?.(event);
+	}
+	useEffect(() => {
+		if (treeRootRef.current && !treeWalker.current) treeWalker.current = document.createTreeWalker(treeRootRef.current, NodeFilter.SHOW_ELEMENT, { acceptNode: function(node) {
+			if (!(node instanceof Element)) return NodeFilter.FILTER_SKIP;
+			if (node.classList.contains(`${prefix}--tree-node--disabled`) || node.classList.contains(`${prefix}--tree-node--hidden`)) return NodeFilter.FILTER_REJECT;
+			if (node.matches(`.${prefix}--tree-node`)) return NodeFilter.FILTER_ACCEPT;
+			return NodeFilter.FILTER_SKIP;
+		} });
+	}, [prefix]);
+	const labelId = `${treeId}__label`;
+	const TreeLabel = () => !hideLabel ? /* @__PURE__ */ jsx("label", {
+		id: labelId,
+		className: `${prefix}--label`,
+		children: label
+	}) : null;
+	const treeContextValue = useMemo(() => ({
+		active,
+		multiselect,
+		onActivate: setActive,
+		onTreeSelect: handleTreeSelect,
+		selected,
+		size
+	}), [
+		active,
+		multiselect,
+		setActive,
+		handleTreeSelect,
+		selected,
+		size
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TreeLabel, {}), /* @__PURE__ */ jsx(TreeContext.Provider, {
+		value: treeContextValue,
+		children: /* @__PURE__ */ jsx(DepthContext.Provider, {
+			value: 0,
+			children: /* @__PURE__ */ jsx("ul", {
+				...rest,
+				"aria-label": hideLabel ? label : void 0,
+				"aria-labelledby": !hideLabel ? labelId : void 0,
+				"aria-multiselectable": multiselect || void 0,
+				className: treeClasses,
+				onKeyDown: handleKeyDown,
+				ref: treeRootRef,
+				role: "tree",
+				children
+			})
+		})
+	})] });
 };
 TreeView.propTypes = {
-  /**
-   * Mark the active node in the tree, represented by its ID
-   */
-  active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Specify the children of the TreeView
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the TreeView
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether or not the label should be hidden
-   */
-  hideLabel: PropTypes.bool,
-  /**
-   * Provide the label text that will be read by a screen reader
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * **[Experimental]** Specify the selection mode of the tree.
-   * If `multiselect` is `false` then only one node can be selected at a time
-   */
-  multiselect: PropTypes.bool,
-  /**
-   * **[Experimental]** Callback function that is called when any node is activated.
-   * *This is only supported with the `enable-treeview-controllable` feature flag!*
-   */
-  onActivate: PropTypes.func,
-  /**
-   * Callback function that is called when any node is selected
-   */
-  onSelect: PropTypes.func,
-  /**
-   * Array representing all selected node IDs in the tree
-   */
-  selected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-  /**
-   * Specify the size of the tree from a list of available sizes.
-   */
-  size: PropTypes.oneOf(['xs', 'sm'])
+	active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	children: PropTypes.node,
+	className: PropTypes.string,
+	hideLabel: PropTypes.bool,
+	label: PropTypes.string.isRequired,
+	multiselect: PropTypes.bool,
+	onActivate: PropTypes.func,
+	onSelect: PropTypes.func,
+	selected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+	size: PropTypes.oneOf(["xs", "sm"])
 };
 TreeView.TreeNode = TreeNode;
 
-export { TreeView as default };
+//#endregion
+export { TreeView as default };

package/es/components/UIShell/Content.js

@@ -1,41 +1,34 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-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";
 
-const Content = ({
-  className: customClassName,
-  children,
-  tagName = 'main',
-  ...rest
-}) => {
-  const prefix = usePrefix();
-  const className = cx(`${prefix}--content`, customClassName);
-  return /*#__PURE__*/React.createElement(tagName, {
-    ...rest,
-    className
-  }, children);
+//#region src/components/UIShell/Content.ts
+/**
+* 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.
+*/
+const Content = ({ className: customClassName, children, tagName = "main", ...rest }) => {
+	const className = classNames(`${usePrefix()}--content`, customClassName);
+	return React.createElement(tagName, {
+		...rest,
+		className
+	}, children);
 };
 Content.propTypes = {
-  /**
-   * Provide children nodes to be rendered in the content container
-   */
-  children: PropTypes.node,
-  /**
-   * Optionally provide a custom class name that is applied to the container
-   */
-  className: PropTypes.string,
-  /**
-   * Optionally specify the tag of the content node. Defaults to `main`
-   */
-  tagName: PropTypes.string
+	children: PropTypes.node,
+	className: PropTypes.string,
+	tagName: PropTypes.string
 };
 
-export { Content as default };
+//#endregion
+export { Content as default };

package/es/components/UIShell/Header.js

@@ -1,40 +1,36 @@
 /**
- * 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 from 'react';
-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";
 
-const Header = ({
-  className: customClassName,
-  children,
-  ...rest
-}) => {
-  const prefix = usePrefix();
-  const className = cx(`${prefix}--header`, customClassName);
-  return /*#__PURE__*/React.createElement("header", _extends({}, rest, {
-    className: className
-  }), children);
+//#region src/components/UIShell/Header.tsx
+/**
+* Copyright IBM Corp. 2016, 2025
+*
+* 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 Header = ({ className: customClassName, children, ...rest }) => {
+	const className = classNames(`${usePrefix()}--header`, customClassName);
+	return /* @__PURE__ */ jsx("header", {
+		...rest,
+		className,
+		children
+	});
 };
 Header.propTypes = {
-  /**
-   * Optionally provide aria-label
-   */
-  'aria-label': PropTypes.string,
-  /**
-   * Optionally provide aria-labelledby
-   */
-  'aria-labelledby': PropTypes.string,
-  /**
-   * Optionally provide a custom class name that is applied to the underlying header
-   */
-  className: PropTypes.string
+	"aria-label": PropTypes.string,
+	"aria-labelledby": PropTypes.string,
+	className: PropTypes.string
 };
 
-export { Header as default };
+//#endregion
+export { Header as default };

package/es/components/UIShell/HeaderContainer.js

@@ -1,51 +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, { useState, useCallback } from 'react';
-import { Escape } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
-import { useWindowEvent } from '../../internal/useEvent.js';
+import { Escape } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
+import { useWindowEvent } from "../../internal/useEvent.js";
+import React, { useCallback, useState } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-function HeaderContainer({
-  render: Children,
-  isSideNavExpanded = false,
-  ...rest
-}) {
-  //state for expandable sidenav
-  const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
-  useWindowEvent('keydown', event => {
-    if (match(event, Escape)) {
-      setIsSideNavExpandedState(false);
-    }
-  });
-  const handleHeaderMenuButtonClick = useCallback(() => {
-    setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
-  }, [setIsSideNavExpandedState]);
-  return /*#__PURE__*/React.createElement(Children
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-  , _extends({}, rest, {
-    isSideNavExpanded: isSideNavExpandedState,
-    onClickSideNavExpand: handleHeaderMenuButtonClick
-  }));
+//#region src/components/UIShell/HeaderContainer.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 HeaderContainer({ render: Children, isSideNavExpanded = false, ...rest }) {
+	const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
+	useWindowEvent("keydown", (event) => {
+		if (match(event, Escape)) setIsSideNavExpandedState(false);
+	});
+	const handleHeaderMenuButtonClick = useCallback(() => {
+		setIsSideNavExpandedState((prevIsSideNavExpanded) => !prevIsSideNavExpanded);
+	}, [setIsSideNavExpandedState]);
+	return /* @__PURE__ */ jsx(Children, {
+		...rest,
+		isSideNavExpanded: isSideNavExpandedState,
+		onClickSideNavExpand: handleHeaderMenuButtonClick
+	});
 }
 HeaderContainer.propTypes = {
-  /**
-   * Optionally provide a custom class name that is applied to the underlying <header>
-   */
-  isSideNavExpanded: PropTypes.bool,
-  /**
-   * A function or a component that is invoked with `isSideNavExpanded` and `onClickSideNavExpand`.
-   * The function or component can then use those properties to within the components it
-   * returns, such as with the HeaderMenuButton and SideNav components. Additional props will also be passed
-   * into this component for convenience.
-   */
-  render: PropTypes.elementType.isRequired
+	isSideNavExpanded: PropTypes.bool,
+	render: PropTypes.elementType.isRequired
 };
 
-export { HeaderContainer as default };
+//#endregion
+export { HeaderContainer as default };