@carbon-labs/react-ui-shell 0.28.0 → 0.30.0

package/README.md

@@ -26,7 +26,7 @@ yarn add @carbon-labs/react-ui-shell @carbon/react
 ## ⚡ Usage
 
 To use this package you will need to import components from both `@carbon/react`
-and `@carbon-labs/react-ui-shell`o compose the UI Shell. The following
+and `@carbon-labs/react-ui-shell` to compose the UI Shell. The following
 components are provided by `@carbon-labs/react-ui-shell`:
 
 - `SideNav`
@@ -34,7 +34,13 @@ components are provided by `@carbon-labs/react-ui-shell`:
 - `SideNavLink`
 - `SideNavMenu`
 - `SideNavMenuItem`
+- `HeaderPopover`
+- `HeaderPopoverActions`
+- `HeaderPopoverButton`
+- `HeaderPopoverContent`
 - `HeaderPanel`
+- `HeaderDivider`
+- `SharkFinIcon`
 
 ```jsx
 import { SideNav } from '@carbon-labs/react-ui-shell/es/index';

package/es/components/HeaderDivider.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 React from 'react';
+export interface HeaderDividerProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+}
+export declare const HeaderDivider: React.FC<HeaderDividerProps>;

package/es/components/HeaderDivider.js

@@ -0,0 +1,30 @@
+/**
+ * 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 cx from '../_virtual/index.js';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { usePrefix } from '../internal/usePrefix.js';
+
+const HeaderDivider = _ref => {
+  let {
+    className
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--header__divider`, className);
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames
+  });
+};
+HeaderDivider.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string
+};
+
+export { HeaderDivider };

package/es/components/HeaderPopover.d.ts

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ToggletipActions, ToggleTipButtonProps, ToggletipContentProps, ToggletipProps } from '@carbon/react';
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+export declare function HeaderPopover({ align, as, autoAlign, className: customClassName, children, defaultOpen, ...rest }: ToggletipProps<any>): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeaderPopover {
+    var propTypes: {
+        /**
+         * Specify how the toggletip should align with the button
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Provide an offset value for alignment axis.
+         */
+        alignmentAxisOffset: PropTypes.Requireable<number>;
+        /**
+         * Provide a custom element or component to render the top-level node for the
+         * component.
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the toggletip should be open by default
+         */
+        defaultOpen: PropTypes.Requireable<boolean>;
+    };
+}
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+export declare function HeaderPopoverButton<T extends React.ElementType>({ children, className: customClassName, label, as: BaseComponent, ...rest }: ToggleTipButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeaderPopoverButton {
+    var propTypes: {
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide an accessible label for this button
+         */
+        label: PropTypes.Requireable<string>;
+    };
+}
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+export declare function HeaderPopoverContent({ children, className, ...rest }: ToggletipContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+declare const HeaderPopoverActions: typeof ToggletipActions;
+export { HeaderPopoverActions };

package/es/components/HeaderPopover.js

@@ -0,0 +1,219 @@
+/**
+ * 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 cx from '../_virtual/index.js';
+import PropTypes from 'prop-types';
+import React, { useRef, useState, useContext } from 'react';
+import { Popover, ToggletipContent, ToggletipActions, IconButton } from '@carbon/react';
+import { Escape } from '../internal/keyboard/keys.js';
+import { match } from '../internal/keyboard/match.js';
+import { useWindowEvent } from '../internal/useEvent.js';
+import { useId } from '../internal/useId.js';
+import { usePrefix } from '../internal/usePrefix.js';
+
+// Used to coordinate accessibility props between button and content along with
+// the actions to open and close the toggletip
+const HeaderPopoverContext = /*#__PURE__*/React.createContext(undefined);
+function useToggletip() {
+  return useContext(HeaderPopoverContext);
+}
+
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+function HeaderPopover(_ref) {
+  let {
+    align,
+    as,
+    autoAlign,
+    className: customClassName,
+    children,
+    defaultOpen = false,
+    ...rest
+  } = _ref;
+  const ref = useRef(null);
+  const [open, setOpen] = useState(defaultOpen);
+  const prefix = usePrefix();
+  const id = useId();
+  const className = cx(customClassName, {
+    [`${prefix}--header-action`]: true,
+    [`${prefix}--autoalign`]: autoAlign
+  });
+  const actions = {
+    toggle: () => {
+      setOpen(!open);
+    },
+    close: () => {
+      setOpen(false);
+    }
+  };
+  const value = {
+    buttonProps: {
+      'aria-expanded': open,
+      'aria-controls': id,
+      onClick: actions.toggle
+    },
+    contentProps: {
+      id
+    },
+    onClick: {
+      onClick: actions.toggle
+    }
+  };
+  const onKeyDown = event => {
+    if (open && match(event, Escape)) {
+      actions.close();
+
+      // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
+      const button = ref.current?.children[0];
+      if (button instanceof HTMLButtonElement) {
+        button.focus();
+      }
+    }
+  };
+  const handleBlur = event => {
+    // Do not close if the menu itself is clicked, should only close on focus out
+    if (open && event.relatedTarget === null) {
+      return;
+    }
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      // The menu should be closed when focus leaves the `Toggletip`  (#12922)
+      actions.close();
+    }
+  };
+
+  // If the `Toggletip` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
+  useWindowEvent('blur', () => {
+    if (open) {
+      actions.close();
+    }
+  });
+  useWindowEvent('click', event => {
+    if (open && ref.current && !ref.current.contains(event.target)) {
+      actions.close();
+    }
+  });
+  return /*#__PURE__*/React.createElement(HeaderPopoverContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(Popover, _extends({
+    align: align,
+    autoAlign: autoAlign,
+    as: as,
+    isTabTip: true,
+    className: className,
+    dropShadow: false,
+    highContrast: false,
+    open: open,
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur,
+    ref: ref
+  }, rest), children));
+}
+HeaderPopover.propTypes = {
+  /**
+   * Specify how the toggletip should align with the button
+   */
+  align: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  /**
+   * Provide an offset value for alignment axis.
+   */
+  alignmentAxisOffset: PropTypes.number,
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.elementType,
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+  /**
+   * Specify if the toggletip should be open by default
+   */
+  defaultOpen: PropTypes.bool
+};
+
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+
+function HeaderPopoverButton(_ref2) {
+  let {
+    children,
+    className: customClassName,
+    label = 'Show information',
+    as: BaseComponent,
+    ...rest
+  } = _ref2;
+  const toggletip = useToggletip();
+  const prefix = usePrefix();
+  const className = cx(customClassName, {
+    [`${prefix}--header-action__button`]: true
+  });
+  const ComponentToggle = BaseComponent ?? IconButton;
+  return /*#__PURE__*/React.createElement(ComponentToggle, _extends({}, toggletip?.onClick, {
+    className: className,
+    kind: BaseComponent ? null : 'ghost',
+    label: label,
+    highContrast: false
+  }, rest), children);
+}
+HeaderPopoverButton.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+  /**
+   * Provide an accessible label for this button
+   */
+  label: PropTypes.string
+};
+
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+function HeaderPopoverContent(_ref3) {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref3;
+  const prefix = usePrefix();
+  return /*#__PURE__*/React.createElement(ToggletipContent, _extends({
+    className: cx(className, {
+      [`${prefix}--header-action__content`]: true
+    })
+  }, rest), children);
+}
+
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+const HeaderPopoverActions = ToggletipActions;
+
+export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopoverContent };

package/es/index.d.ts

@@ -13,5 +13,7 @@ export { SideNavLinkPopover } from './components/SideNavLinkPopover.js';
 export { SideNavMenu } from './components/SideNavMenu.js';
 export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer';
+export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopoverContent, } from './components/HeaderPopover';
 export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
+export { HeaderDivider } from './components/HeaderDivider';

package/es/index.js

@@ -12,5 +12,7 @@ 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 { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopoverContent } from './components/HeaderPopover.js';
 export { HeaderPanel } from './components/HeaderPanel.js';
 export { SharkFinIcon } from './components/SharkFinIcon.js';
+export { HeaderDivider } from './components/HeaderDivider.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 '../../icon-helpers/es/index.js';
+import { getAttributes } from '../node_modules/@carbon/icon-helpers/es/index.js';
 import PropTypes from 'prop-types';
 import React from 'react';
 

package/lib/components/HeaderDivider.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 React from 'react';
+export interface HeaderDividerProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+}
+export declare const HeaderDivider: React.FC<HeaderDividerProps>;

package/lib/components/HeaderDivider.js

@@ -0,0 +1,32 @@
+/**
+ * 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';
+
+var index = require('../_virtual/index.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../internal/usePrefix.js');
+
+const HeaderDivider = _ref => {
+  let {
+    className
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = index.default(`${prefix}--header__divider`, className);
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames
+  });
+};
+HeaderDivider.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string
+};
+
+exports.HeaderDivider = HeaderDivider;

package/lib/components/HeaderPopover.d.ts

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ToggletipActions, ToggleTipButtonProps, ToggletipContentProps, ToggletipProps } from '@carbon/react';
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+export declare function HeaderPopover({ align, as, autoAlign, className: customClassName, children, defaultOpen, ...rest }: ToggletipProps<any>): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeaderPopover {
+    var propTypes: {
+        /**
+         * Specify how the toggletip should align with the button
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Provide an offset value for alignment axis.
+         */
+        alignmentAxisOffset: PropTypes.Requireable<number>;
+        /**
+         * Provide a custom element or component to render the top-level node for the
+         * component.
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the toggletip should be open by default
+         */
+        defaultOpen: PropTypes.Requireable<boolean>;
+    };
+}
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+export declare function HeaderPopoverButton<T extends React.ElementType>({ children, className: customClassName, label, as: BaseComponent, ...rest }: ToggleTipButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeaderPopoverButton {
+    var propTypes: {
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide an accessible label for this button
+         */
+        label: PropTypes.Requireable<string>;
+    };
+}
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+export declare function HeaderPopoverContent({ children, className, ...rest }: ToggletipContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+declare const HeaderPopoverActions: typeof ToggletipActions;
+export { HeaderPopoverActions };

package/lib/components/HeaderPopover.js

@@ -0,0 +1,224 @@
+/**
+ * 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';
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../_virtual/index.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var react = require('@carbon/react');
+var keys = require('../internal/keyboard/keys.js');
+var match = require('../internal/keyboard/match.js');
+var useEvent = require('../internal/useEvent.js');
+var useId = require('../internal/useId.js');
+var usePrefix = require('../internal/usePrefix.js');
+
+// Used to coordinate accessibility props between button and content along with
+// the actions to open and close the toggletip
+const HeaderPopoverContext = /*#__PURE__*/React.createContext(undefined);
+function useToggletip() {
+  return React.useContext(HeaderPopoverContext);
+}
+
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+function HeaderPopover(_ref) {
+  let {
+    align,
+    as,
+    autoAlign,
+    className: customClassName,
+    children,
+    defaultOpen = false,
+    ...rest
+  } = _ref;
+  const ref = React.useRef(null);
+  const [open, setOpen] = React.useState(defaultOpen);
+  const prefix = usePrefix.usePrefix();
+  const id = useId.useId();
+  const className = index.default(customClassName, {
+    [`${prefix}--header-action`]: true,
+    [`${prefix}--autoalign`]: autoAlign
+  });
+  const actions = {
+    toggle: () => {
+      setOpen(!open);
+    },
+    close: () => {
+      setOpen(false);
+    }
+  };
+  const value = {
+    buttonProps: {
+      'aria-expanded': open,
+      'aria-controls': id,
+      onClick: actions.toggle
+    },
+    contentProps: {
+      id
+    },
+    onClick: {
+      onClick: actions.toggle
+    }
+  };
+  const onKeyDown = event => {
+    if (open && match.match(event, keys.Escape)) {
+      actions.close();
+
+      // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
+      const button = ref.current?.children[0];
+      if (button instanceof HTMLButtonElement) {
+        button.focus();
+      }
+    }
+  };
+  const handleBlur = event => {
+    // Do not close if the menu itself is clicked, should only close on focus out
+    if (open && event.relatedTarget === null) {
+      return;
+    }
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      // The menu should be closed when focus leaves the `Toggletip`  (#12922)
+      actions.close();
+    }
+  };
+
+  // If the `Toggletip` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
+  useEvent.useWindowEvent('blur', () => {
+    if (open) {
+      actions.close();
+    }
+  });
+  useEvent.useWindowEvent('click', event => {
+    if (open && ref.current && !ref.current.contains(event.target)) {
+      actions.close();
+    }
+  });
+  return /*#__PURE__*/React.createElement(HeaderPopoverContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(react.Popover, _rollupPluginBabelHelpers.extends({
+    align: align,
+    autoAlign: autoAlign,
+    as: as,
+    isTabTip: true,
+    className: className,
+    dropShadow: false,
+    highContrast: false,
+    open: open,
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur,
+    ref: ref
+  }, rest), children));
+}
+HeaderPopover.propTypes = {
+  /**
+   * Specify how the toggletip should align with the button
+   */
+  align: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  /**
+   * Provide an offset value for alignment axis.
+   */
+  alignmentAxisOffset: PropTypes.number,
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.elementType,
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+  /**
+   * Specify if the toggletip should be open by default
+   */
+  defaultOpen: PropTypes.bool
+};
+
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+
+function HeaderPopoverButton(_ref2) {
+  let {
+    children,
+    className: customClassName,
+    label = 'Show information',
+    as: BaseComponent,
+    ...rest
+  } = _ref2;
+  const toggletip = useToggletip();
+  const prefix = usePrefix.usePrefix();
+  const className = index.default(customClassName, {
+    [`${prefix}--header-action__button`]: true
+  });
+  const ComponentToggle = BaseComponent ?? react.IconButton;
+  return /*#__PURE__*/React.createElement(ComponentToggle, _rollupPluginBabelHelpers.extends({}, toggletip?.onClick, {
+    className: className,
+    kind: BaseComponent ? null : 'ghost',
+    label: label,
+    highContrast: false
+  }, rest), children);
+}
+HeaderPopoverButton.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+  /**
+   * Provide an accessible label for this button
+   */
+  label: PropTypes.string
+};
+
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+function HeaderPopoverContent(_ref3) {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref3;
+  const prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React.createElement(react.ToggletipContent, _rollupPluginBabelHelpers.extends({
+    className: index.default(className, {
+      [`${prefix}--header-action__content`]: true
+    })
+  }, rest), children);
+}
+
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+const HeaderPopoverActions = react.ToggletipActions;
+
+exports.HeaderPopover = HeaderPopover;
+exports.HeaderPopoverActions = HeaderPopoverActions;
+exports.HeaderPopoverButton = HeaderPopoverButton;
+exports.HeaderPopoverContent = HeaderPopoverContent;

package/lib/index.d.ts

@@ -13,5 +13,7 @@ export { SideNavLinkPopover } from './components/SideNavLinkPopover.js';
 export { SideNavMenu } from './components/SideNavMenu.js';
 export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer';
+export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopoverContent, } from './components/HeaderPopover';
 export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
+export { HeaderDivider } from './components/HeaderDivider';

package/lib/index.js

@@ -14,8 +14,10 @@ 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 HeaderPopover = require('./components/HeaderPopover.js');
 var HeaderPanel = require('./components/HeaderPanel.js');
 var SharkFinIcon = require('./components/SharkFinIcon.js');
+var HeaderDivider = require('./components/HeaderDivider.js');
 
 
 
@@ -27,5 +29,10 @@ exports.SideNavLinkPopover = SideNavLinkPopover.SideNavLinkPopover;
 exports.SideNavMenu = SideNavMenu.SideNavMenu;
 exports.SideNavMenuItem = SideNavMenuItem.SideNavMenuItem;
 exports.HeaderContainer = HeaderContainer.HeaderContainer;
+exports.HeaderPopover = HeaderPopover.HeaderPopover;
+exports.HeaderPopoverActions = HeaderPopover.HeaderPopoverActions;
+exports.HeaderPopoverButton = HeaderPopover.HeaderPopoverButton;
+exports.HeaderPopoverContent = HeaderPopover.HeaderPopoverContent;
 exports.HeaderPanel = HeaderPanel.HeaderPanel;
 exports.SharkFinIcon = SharkFinIcon.SharkFinIcon;
+exports.HeaderDivider = HeaderDivider.HeaderDivider;

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

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../icon-helpers/es/index.js');
+var index = require('../node_modules/@carbon/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.28.0",
+  "version": "0.30.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -33,5 +33,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "4a8aca9677b353f76cfcd7021a2665d95a22782c"
+  "gitHead": "20b37b5d599d7c73ee3fb778a096920cce966252"
 }

package/scss/styles/_header-divider.scss

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+@use '@carbon/styles/scss/utilities/convert' as convert;
+@use '@carbon/styles/scss/theme' as *;
+
+$prefix: 'cds' !default;
+
+.#{$prefix}--header__divider {
+  flex-shrink: 0;
+  background: $border-subtle;
+  block-size: convert.to-rem(24px);
+  inline-size: 1px;
+}

package/scss/styles/_header.scss

@@ -4,9 +4,67 @@
  * 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 '@carbon/styles/scss/theme' as *;
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/utilities/custom-property' as custom-property;
 
 $prefix: 'cds' !default;
 
+.#{$prefix}--header__global {
+  align-items: center;
+}
+
+.#{$prefix}--header__action {
+  flex-shrink: 0;
+}
+
 .#{$prefix}--header__action:focus {
   border-width: 2px;
 }
+
+//----------------------------------------------------------------------------
+// Menu button inside Header
+//----------------------------------------------------------------------------
+
+.#{$prefix}--header
+  .#{$prefix}--menu-button__trigger.#{$prefix}--btn--ghost:not([disabled]) {
+  color: $text-secondary;
+}
+
+.#{$prefix}--header-action__button.#{$prefix}--btn--ghost:not([disabled]) svg {
+  fill: $icon-secondary;
+}
+
+.#{$prefix}--header-action.#{$prefix}--popover--open
+  .#{$prefix}--header-action__button.#{$prefix}--btn--ghost:not(
+    [disabled]
+  ):hover
+  svg {
+  fill: $icon-primary;
+}
+
+// TODO: remove when https://github.com/carbon-design-system/carbon/pull/18725 is released
+.#{$prefix}--header-action .#{$prefix}--tooltip-content {
+  color: $text-primary;
+}
+
+.#{$prefix}--header-action.#{$prefix}--popover--open
+  .#{$prefix}--header-action__button {
+  background-color: $layer;
+}
+
+.#{$prefix}--header-action .#{$prefix}--toggletip-content {
+  @include custom-property.declaration('button-focus-color', $focus);
+  @include custom-property.declaration('link-text-color', $link-primary);
+  @include custom-property.declaration(
+    'link-hover-text-color',
+    $link-primary-hover
+  );
+  @include custom-property.declaration(
+    'link-visited-text-color',
+    $link-visited
+  );
+  @include custom-property.declaration('link-focus-text-color', $focus);
+}

package/scss/ui-shell.scss

@@ -9,3 +9,4 @@
 @use 'styles/side-nav';
 @use 'styles/content';
 @use 'styles/shark-fin-icon.scss';
+@use 'styles/header-divider.scss';