@carbon-labs/react-ui-shell 0.23.0 → 0.25.0

package/es/components/HeaderContainer.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+export interface HeaderContainerRenderProps {
+    isSideNavExpanded: boolean;
+    isSwitcherExpanded: boolean;
+    onClickSideNavExpand: () => void;
+    onClickSwitcherExpand: () => void;
+}
+export type HeaderContainerProps<P extends HeaderContainerRenderProps> = {
+    isSideNavExpanded?: boolean;
+    isSwitcherExpanded?: boolean;
+    render: React.ComponentType<P>;
+} & {
+    [K in keyof Omit<P, keyof HeaderContainerRenderProps>]: P[K];
+};
+export declare function HeaderContainer<P extends HeaderContainerRenderProps>({ render: Children, isSideNavExpanded, isSwitcherExpanded, ...rest }: HeaderContainerProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeaderContainer {
+    var propTypes: {
+        /**
+         * `true` if the side navigation is expanded.
+         */
+        isSideNavExpanded: PropTypes.Requireable<boolean>;
+        /**
+         * `true` if the switcher is expanded.
+         */
+        isSwitcherExpanded: PropTypes.Requireable<boolean>;
+        /**
+         * 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.Validator<NonNullable<PropTypes.ReactComponentLike>>;
+    };
+    var displayName: string;
+}
+export default HeaderContainer;

package/es/components/HeaderContainer.js

@@ -0,0 +1,62 @@
+/**
+ * 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 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';
+
+function HeaderContainer(_ref) {
+  let {
+    render: Children,
+    isSideNavExpanded = false,
+    isSwitcherExpanded = false,
+    ...rest
+  } = _ref;
+  const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
+  const [isSwitcherExpandedState, setSwitcherExpandedState] = useState(isSwitcherExpanded);
+  useWindowEvent('keydown', event => {
+    if (match(event, Escape)) {
+      setIsSideNavExpandedState(false);
+      setSwitcherExpandedState(false);
+    }
+  });
+  const handleHeaderMenuButtonClick = useCallback(() => {
+    setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
+  }, [setIsSideNavExpandedState]);
+  const handleSwitcherClick = useCallback(() => {
+    setSwitcherExpandedState(prevIsSwitcherExpanded => !prevIsSwitcherExpanded);
+  }, [setSwitcherExpandedState]);
+  return /*#__PURE__*/React.createElement(Children, _extends({}, rest, {
+    isSideNavExpanded: isSideNavExpandedState,
+    isSwitcherExpanded: isSwitcherExpandedState,
+    onClickSideNavExpand: handleHeaderMenuButtonClick,
+    onClickSwitcherExpand: handleSwitcherClick
+  }));
+}
+HeaderContainer.propTypes = {
+  /**
+   * `true` if the side navigation is expanded.
+   */
+  isSideNavExpanded: PropTypes.bool,
+  /**
+   * `true` if the switcher is expanded.
+   */
+  isSwitcherExpanded: 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
+};
+HeaderContainer.displayName = 'HeaderContainer';
+
+export { HeaderContainer, HeaderContainer as default };

package/es/components/SideNav.js

@@ -144,12 +144,16 @@ function SideNavRenderFunction(_ref, ref) {
         }
       });
       resetNodeTabIndices();
+    }
+  }, [prefix, internalIsTreeview]);
+  useEffect(() => {
+    if (sideNavRef.current) {
       const firstElement = sideNavRef?.current?.querySelector('a, button');
-      if (firstElement) {
+      if (firstElement && (navType == SIDE_NAV_TYPE.PANEL || expanded)) {
         firstElement.tabIndex = 0;
       }
     }
-  }, [prefix, internalIsTreeview]);
+  }, [expanded]);
 
   /**
    * Returns the parent SideNavMenu, if node is actually inside one.

package/es/index.d.ts

@@ -12,4 +12,5 @@ export { SideNavLink } from './components/SideNavLink.js';
 export { SideNavLinkPopover } from './components/SideNavLinkPopover.js';
 export { SideNavMenu } from './components/SideNavMenu.js';
 export { SideNavMenuItem } from './components/SideNavMenuItem.js';
+export { HeaderContainer } from './components/HeaderContainer';
 export { HeaderPanel } from './components/HeaderPanel';

package/es/index.js

@@ -11,4 +11,5 @@ export { SideNavLink } from './components/SideNavLink.js';
 export { SideNavLinkPopover } from './components/SideNavLinkPopover.js';
 export { SideNavMenu } from './components/SideNavMenu.js';
 export { SideNavMenuItem } from './components/SideNavMenuItem.js';
+export { HeaderContainer } from './components/HeaderContainer.js';
 export { HeaderPanel } from './components/HeaderPanel.js';

package/es/node_modules/@carbon/icons-react/es/Icon.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { getAttributes } from '../node_modules/@carbon/icon-helpers/es/index.js';
+import { getAttributes } from '../../icon-helpers/es/index.js';
 import PropTypes from 'prop-types';
 import React from 'react';
 

package/lib/components/HeaderContainer.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+export interface HeaderContainerRenderProps {
+    isSideNavExpanded: boolean;
+    isSwitcherExpanded: boolean;
+    onClickSideNavExpand: () => void;
+    onClickSwitcherExpand: () => void;
+}
+export type HeaderContainerProps<P extends HeaderContainerRenderProps> = {
+    isSideNavExpanded?: boolean;
+    isSwitcherExpanded?: boolean;
+    render: React.ComponentType<P>;
+} & {
+    [K in keyof Omit<P, keyof HeaderContainerRenderProps>]: P[K];
+};
+export declare function HeaderContainer<P extends HeaderContainerRenderProps>({ render: Children, isSideNavExpanded, isSwitcherExpanded, ...rest }: HeaderContainerProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeaderContainer {
+    var propTypes: {
+        /**
+         * `true` if the side navigation is expanded.
+         */
+        isSideNavExpanded: PropTypes.Requireable<boolean>;
+        /**
+         * `true` if the switcher is expanded.
+         */
+        isSwitcherExpanded: PropTypes.Requireable<boolean>;
+        /**
+         * 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.Validator<NonNullable<PropTypes.ReactComponentLike>>;
+    };
+    var displayName: string;
+}
+export default HeaderContainer;

package/lib/components/HeaderContainer.js

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var keys = require('../internal/keyboard/keys.js');
+var match = require('../internal/keyboard/match.js');
+var useEvent = require('../internal/useEvent.js');
+
+function HeaderContainer(_ref) {
+  let {
+    render: Children,
+    isSideNavExpanded = false,
+    isSwitcherExpanded = false,
+    ...rest
+  } = _ref;
+  const [isSideNavExpandedState, setIsSideNavExpandedState] = React.useState(isSideNavExpanded);
+  const [isSwitcherExpandedState, setSwitcherExpandedState] = React.useState(isSwitcherExpanded);
+  useEvent.useWindowEvent('keydown', event => {
+    if (match.match(event, keys.Escape)) {
+      setIsSideNavExpandedState(false);
+      setSwitcherExpandedState(false);
+    }
+  });
+  const handleHeaderMenuButtonClick = React.useCallback(() => {
+    setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
+  }, [setIsSideNavExpandedState]);
+  const handleSwitcherClick = React.useCallback(() => {
+    setSwitcherExpandedState(prevIsSwitcherExpanded => !prevIsSwitcherExpanded);
+  }, [setSwitcherExpandedState]);
+  return /*#__PURE__*/React.createElement(Children, _rollupPluginBabelHelpers.extends({}, rest, {
+    isSideNavExpanded: isSideNavExpandedState,
+    isSwitcherExpanded: isSwitcherExpandedState,
+    onClickSideNavExpand: handleHeaderMenuButtonClick,
+    onClickSwitcherExpand: handleSwitcherClick
+  }));
+}
+HeaderContainer.propTypes = {
+  /**
+   * `true` if the side navigation is expanded.
+   */
+  isSideNavExpanded: PropTypes.bool,
+  /**
+   * `true` if the switcher is expanded.
+   */
+  isSwitcherExpanded: 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
+};
+HeaderContainer.displayName = 'HeaderContainer';
+
+exports.HeaderContainer = HeaderContainer;
+exports.default = HeaderContainer;

package/lib/components/SideNav.js

@@ -146,12 +146,16 @@ function SideNavRenderFunction(_ref, ref) {
         }
       });
       resetNodeTabIndices();
+    }
+  }, [prefix, internalIsTreeview]);
+  React.useEffect(() => {
+    if (sideNavRef.current) {
       const firstElement = sideNavRef?.current?.querySelector('a, button');
-      if (firstElement) {
+      if (firstElement && (navType == SIDE_NAV_TYPE.PANEL || expanded)) {
         firstElement.tabIndex = 0;
       }
     }
-  }, [prefix, internalIsTreeview]);
+  }, [expanded]);
 
   /**
    * Returns the parent SideNavMenu, if node is actually inside one.

package/lib/index.d.ts

@@ -12,4 +12,5 @@ export { SideNavLink } from './components/SideNavLink.js';
 export { SideNavLinkPopover } from './components/SideNavLinkPopover.js';
 export { SideNavMenu } from './components/SideNavMenu.js';
 export { SideNavMenuItem } from './components/SideNavMenuItem.js';
+export { HeaderContainer } from './components/HeaderContainer';
 export { HeaderPanel } from './components/HeaderPanel';

package/lib/index.js

@@ -13,6 +13,7 @@ var SideNavLink = require('./components/SideNavLink.js');
 var SideNavLinkPopover = require('./components/SideNavLinkPopover.js');
 var SideNavMenu = require('./components/SideNavMenu.js');
 var SideNavMenuItem = require('./components/SideNavMenuItem.js');
+var HeaderContainer = require('./components/HeaderContainer.js');
 var HeaderPanel = require('./components/HeaderPanel.js');
 
 
@@ -24,4 +25,5 @@ exports.SideNavLink = SideNavLink.SideNavLink;
 exports.SideNavLinkPopover = SideNavLinkPopover.SideNavLinkPopover;
 exports.SideNavMenu = SideNavMenu.SideNavMenu;
 exports.SideNavMenuItem = SideNavMenuItem.SideNavMenuItem;
+exports.HeaderContainer = HeaderContainer.HeaderContainer;
 exports.HeaderPanel = HeaderPanel.HeaderPanel;

package/lib/node_modules/@carbon/icons-react/es/Icon.js

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../node_modules/@carbon/icon-helpers/es/index.js');
+var index = require('../../icon-helpers/es/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -33,5 +33,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "f1c83d27e009fdaee0b67e09862524d0185a2dcf"
+  "gitHead": "787747477de6fb9f6b8d775082cf9872b3317565"
 }