@carbon-labs/react-ui-shell 0.57.0 → 0.59.0

package/README.md

@@ -30,7 +30,6 @@ and `@carbon-labs/react-ui-shell` to compose the UI Shell. The following
 components are provided by `@carbon-labs/react-ui-shell`:
 
 - `HeaderDivider`
-- `HeaderPanel`
 - `HeaderPopover`
 - `HeaderPopoverActions`
 - `HeaderPopoverButton`

package/es/components/HeaderContainer.d.ts

@@ -24,8 +24,7 @@ export type HeaderContainerProps<P extends HeaderContainerRenderProps> = {
 } & {
     [K in keyof Omit<P, keyof HeaderContainerRenderProps>]: P[K];
 };
-export declare function HeaderContainer<P extends HeaderContainerRenderProps>({ render: Children, isSideNavExpanded, isSwitcherExpanded, isProfileExpanded, themeSetting, // <-- pass this in from the story
-...rest }: HeaderContainerProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderContainer<P extends HeaderContainerRenderProps>({ render: Children, isSideNavExpanded, isSwitcherExpanded, isProfileExpanded, themeSetting, ...rest }: HeaderContainerProps<P>): import("react/jsx-runtime").JSX.Element;
 export declare namespace HeaderContainer {
     var propTypes: {
         /**

package/es/components/HeaderContainer.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState, useCallback, useLayoutEffect } from 'react';
+import React, { useState, useCallback, useLayoutEffect, useEffect } from 'react';
 import { Escape } from '../internal/keyboard/keys.js';
 import { match } from '../internal/keyboard/match.js';
 import { useWindowEvent } from '../internal/useEvent.js';
@@ -20,7 +20,6 @@ function HeaderContainer(_ref) {
     isSwitcherExpanded = false,
     isProfileExpanded = false,
     themeSetting,
-    // <-- pass this in from the story
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -50,6 +49,20 @@ function HeaderContainer(_ref) {
       document.querySelector(`.${prefix}--profile .${prefix}--content-switcher--selected`).focus();
     });
   }, [themeSetting]);
+  useEffect(() => {
+    function handleProfileClosing(event) {
+      const profile = document.querySelector(`.${prefix}--profile.${prefix}--popover--open`);
+      if (profile && !profile.contains(event.target)) {
+        setIsProfileExpandedState(false);
+      }
+    }
+    document.addEventListener('focusin', handleProfileClosing);
+    document.addEventListener('mousedown', handleProfileClosing);
+    return () => {
+      document.removeEventListener('mousedown', handleProfileClosing);
+      document.removeEventListener('focusin', handleProfileClosing);
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(Children, _extends({}, rest, {
     isSideNavExpanded: isSideNavExpandedState,
     isSwitcherExpanded: isSwitcherExpandedState,

package/es/index.d.ts

@@ -14,7 +14,6 @@ export { SideNavMenu } from './components/SideNavMenu';
 export { SideNavMenuItem } from './components/SideNavMenuItem';
 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';
 export { TrialCountdown } from './components/TrialCountdown';

package/es/index.js

@@ -13,7 +13,6 @@ 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';
 export { TrialCountdown } from './components/TrialCountdown.js';

package/lib/components/HeaderContainer.d.ts

@@ -24,8 +24,7 @@ export type HeaderContainerProps<P extends HeaderContainerRenderProps> = {
 } & {
     [K in keyof Omit<P, keyof HeaderContainerRenderProps>]: P[K];
 };
-export declare function HeaderContainer<P extends HeaderContainerRenderProps>({ render: Children, isSideNavExpanded, isSwitcherExpanded, isProfileExpanded, themeSetting, // <-- pass this in from the story
-...rest }: HeaderContainerProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderContainer<P extends HeaderContainerRenderProps>({ render: Children, isSideNavExpanded, isSwitcherExpanded, isProfileExpanded, themeSetting, ...rest }: HeaderContainerProps<P>): import("react/jsx-runtime").JSX.Element;
 export declare namespace HeaderContainer {
     var propTypes: {
         /**

package/lib/components/HeaderContainer.js

@@ -24,7 +24,6 @@ function HeaderContainer(_ref) {
     isSwitcherExpanded = false,
     isProfileExpanded = false,
     themeSetting,
-    // <-- pass this in from the story
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -54,6 +53,20 @@ function HeaderContainer(_ref) {
       document.querySelector(`.${prefix}--profile .${prefix}--content-switcher--selected`).focus();
     });
   }, [themeSetting]);
+  React.useEffect(() => {
+    function handleProfileClosing(event) {
+      const profile = document.querySelector(`.${prefix}--profile.${prefix}--popover--open`);
+      if (profile && !profile.contains(event.target)) {
+        setIsProfileExpandedState(false);
+      }
+    }
+    document.addEventListener('focusin', handleProfileClosing);
+    document.addEventListener('mousedown', handleProfileClosing);
+    return () => {
+      document.removeEventListener('mousedown', handleProfileClosing);
+      document.removeEventListener('focusin', handleProfileClosing);
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(Children, _rollupPluginBabelHelpers.extends({}, rest, {
     isSideNavExpanded: isSideNavExpandedState,
     isSwitcherExpanded: isSwitcherExpandedState,

package/lib/index.d.ts

@@ -14,7 +14,6 @@ export { SideNavMenu } from './components/SideNavMenu';
 export { SideNavMenuItem } from './components/SideNavMenuItem';
 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';
 export { TrialCountdown } from './components/TrialCountdown';

package/lib/index.js

@@ -15,7 +15,6 @@ 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');
 var TrialCountdown = require('./components/TrialCountdown.js');
@@ -36,7 +35,6 @@ 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;
 exports.TrialCountdown = TrialCountdown.TrialCountdown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.57.0",
+  "version": "0.59.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -42,5 +42,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "e6f4e6a5ce706a8be19dc22f663839a34b85f02b"
+  "gitHead": "eaacfa9c007e1d4f54cd64e30f5d176f8ed2b1e1"
 }

package/scss/styles/_profile.scss

@@ -22,14 +22,16 @@ $prefix: 'cds' !default;
 .#{$prefix}--profile .#{$prefix}--toggletip-content {
   padding: 0;
   background-color: $background;
+  border-block-end: 1px solid $border-subtle;
   border-inline-start: 1px solid $border-subtle;
   gap: 0;
+  inline-size: convert.to-rem(256px);
   max-block-size: 100vh;
   overflow-y: scroll;
 
   > * {
     padding: $spacing-05;
-    border-block-end: convert.to-rem(1px) solid $border-subtle;
+    outline: convert.to-rem(0.5px) solid $border-subtle;
   }
 }
 

package/es/components/HeaderPanel.d.ts

@@ -1,35 +0,0 @@
-/**
- * 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, { ReactNode } from 'react';
-export interface HeaderPanelProps {
-    /**
-     * Specify whether focus and blur listeners are added. They are by default.
-     */
-    addFocusListeners?: boolean;
-    /**
-     * The content that will render inside of the `HeaderPanel`
-     */
-    children?: ReactNode;
-    /**
-     * Optionally provide a custom class to apply to the underlying `<li>` node
-     */
-    className?: string;
-    /**
-     * Specify whether the panel is expanded
-     */
-    expanded?: boolean;
-    /**
-     * Provide the `href` to the id of the element on your package that could
-     * be target.
-     */
-    href?: string;
-    /**
-     * An optional listener that is called a callback to collapse the HeaderPanel
-     */
-    onHeaderPanelFocus?: () => void;
-}
-export declare const HeaderPanel: React.FC<HeaderPanelProps>;

package/es/components/HeaderPanel.js

@@ -1,104 +0,0 @@
-/**
- * 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 } from 'react';
-import { usePrefix } from '../internal/usePrefix.js';
-import { Escape } from '../internal/keyboard/keys.js';
-import { match } from '../internal/keyboard/match.js';
-import { useWindowEvent } from '../internal/useEvent.js';
-import { useMergedRefs } from '../internal/useMergedRefs.js';
-
-const noopFn = () => {};
-const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel(_ref, ref) {
-  let {
-    children,
-    className: customClassName,
-    expanded,
-    addFocusListeners = true,
-    onHeaderPanelFocus = noopFn,
-    href,
-    ...rest
-  } = _ref;
-  const prefix = usePrefix();
-  const headerPanelReference = useRef(null);
-  const headerPanelRef = useMergedRefs([headerPanelReference, ref]);
-  const controlled = useRef(expanded !== undefined).current;
-  const [expandedState, setExpandedState] = useState(expanded);
-  const expandedProp = controlled ? expanded : expandedState;
-  const [lastClickedElement, setLastClickedElement] = useState(null);
-  const className = cx(`${prefix}--header-panel`, {
-    [`${prefix}--header-panel--expanded`]: expandedProp,
-    [customClassName]: !!customClassName
-  });
-  const eventHandlers = {};
-  if (addFocusListeners) {
-    eventHandlers.onBlur = event => {
-      if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement?.classList?.contains(`${prefix}--switcher__item-link`)) {
-        setExpandedState(false);
-        setLastClickedElement(null);
-        if (expanded) {
-          onHeaderPanelFocus();
-        }
-      }
-    };
-    eventHandlers.onKeyDown = event => {
-      if (match(event, Escape)) {
-        setExpandedState(false);
-        onHeaderPanelFocus();
-        if (href) {
-          window.location.href = href;
-        }
-      }
-    };
-  }
-  useWindowEvent('click', () => {
-    const focusedElement = document.activeElement;
-    setLastClickedElement(focusedElement);
-    const childJsxElement = children;
-    if (childJsxElement?.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
-      setExpandedState(false);
-      onHeaderPanelFocus();
-    }
-  });
-  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: className,
-    ref: headerPanelRef
-  }, eventHandlers), children);
-});
-HeaderPanel.propTypes = {
-  /**
-   * Specify whether focus and blur listeners are added. They are by default.
-   */
-  addFocusListeners: PropTypes.bool,
-  /**
-   * The content that will render inside of the `HeaderPanel`
-   */
-  children: PropTypes.any,
-  /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the panel is expanded
-   */
-  expanded: PropTypes.bool,
-  /**
-   * Provide the `href` to the id of the element on your package that could
-   * be target.
-   */
-  href: PropTypes.string,
-  /**
-   * An optional listener that is called a callback to collapse the HeaderPanel
-   */
-  onHeaderPanelFocus: PropTypes.func
-};
-HeaderPanel.displayName = 'HeaderPanel';
-
-export { HeaderPanel };

package/lib/components/HeaderPanel.d.ts

@@ -1,35 +0,0 @@
-/**
- * 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, { ReactNode } from 'react';
-export interface HeaderPanelProps {
-    /**
-     * Specify whether focus and blur listeners are added. They are by default.
-     */
-    addFocusListeners?: boolean;
-    /**
-     * The content that will render inside of the `HeaderPanel`
-     */
-    children?: ReactNode;
-    /**
-     * Optionally provide a custom class to apply to the underlying `<li>` node
-     */
-    className?: string;
-    /**
-     * Specify whether the panel is expanded
-     */
-    expanded?: boolean;
-    /**
-     * Provide the `href` to the id of the element on your package that could
-     * be target.
-     */
-    href?: string;
-    /**
-     * An optional listener that is called a callback to collapse the HeaderPanel
-     */
-    onHeaderPanelFocus?: () => void;
-}
-export declare const HeaderPanel: React.FC<HeaderPanelProps>;

package/lib/components/HeaderPanel.js

@@ -1,106 +0,0 @@
-/**
- * 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 usePrefix = require('../internal/usePrefix.js');
-var keys = require('../internal/keyboard/keys.js');
-var match = require('../internal/keyboard/match.js');
-var useEvent = require('../internal/useEvent.js');
-var useMergedRefs = require('../internal/useMergedRefs.js');
-
-const noopFn = () => {};
-const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel(_ref, ref) {
-  let {
-    children,
-    className: customClassName,
-    expanded,
-    addFocusListeners = true,
-    onHeaderPanelFocus = noopFn,
-    href,
-    ...rest
-  } = _ref;
-  const prefix = usePrefix.usePrefix();
-  const headerPanelReference = React.useRef(null);
-  const headerPanelRef = useMergedRefs.useMergedRefs([headerPanelReference, ref]);
-  const controlled = React.useRef(expanded !== undefined).current;
-  const [expandedState, setExpandedState] = React.useState(expanded);
-  const expandedProp = controlled ? expanded : expandedState;
-  const [lastClickedElement, setLastClickedElement] = React.useState(null);
-  const className = index.default(`${prefix}--header-panel`, {
-    [`${prefix}--header-panel--expanded`]: expandedProp,
-    [customClassName]: !!customClassName
-  });
-  const eventHandlers = {};
-  if (addFocusListeners) {
-    eventHandlers.onBlur = event => {
-      if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement?.classList?.contains(`${prefix}--switcher__item-link`)) {
-        setExpandedState(false);
-        setLastClickedElement(null);
-        if (expanded) {
-          onHeaderPanelFocus();
-        }
-      }
-    };
-    eventHandlers.onKeyDown = event => {
-      if (match.match(event, keys.Escape)) {
-        setExpandedState(false);
-        onHeaderPanelFocus();
-        if (href) {
-          window.location.href = href;
-        }
-      }
-    };
-  }
-  useEvent.useWindowEvent('click', () => {
-    const focusedElement = document.activeElement;
-    setLastClickedElement(focusedElement);
-    const childJsxElement = children;
-    if (childJsxElement?.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
-      setExpandedState(false);
-      onHeaderPanelFocus();
-    }
-  });
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: className,
-    ref: headerPanelRef
-  }, eventHandlers), children);
-});
-HeaderPanel.propTypes = {
-  /**
-   * Specify whether focus and blur listeners are added. They are by default.
-   */
-  addFocusListeners: PropTypes.bool,
-  /**
-   * The content that will render inside of the `HeaderPanel`
-   */
-  children: PropTypes.any,
-  /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the panel is expanded
-   */
-  expanded: PropTypes.bool,
-  /**
-   * Provide the `href` to the id of the element on your package that could
-   * be target.
-   */
-  href: PropTypes.string,
-  /**
-   * An optional listener that is called a callback to collapse the HeaderPanel
-   */
-  onHeaderPanelFocus: PropTypes.func
-};
-HeaderPanel.displayName = 'HeaderPanel';
-
-exports.HeaderPanel = HeaderPanel;