@carbon-labs/react-ui-shell 0.58.0 → 0.60.0

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/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/package.json

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

package/scss/styles/_content.scss

@@ -35,7 +35,9 @@ div:has(.#{$prefix}--side-nav--panel.#{$prefix}--side-nav--expanded)
 // when rail is hidden, remove spacing that accounts for rail
 @each $breakpoint in ('sm', 'md', 'lg', 'xlg', 'max') {
   .#{$prefix}--side-nav--rail.#{$prefix}--side-nav--hide-rail-breakpoint-down-#{$breakpoint}
-    ~ .#{$prefix}--content {
+    ~ .#{$prefix}--content,
+  div:has(.#{$prefix}--side-nav--hide-rail-breakpoint-down-#{$breakpoint})
+    + .#{$prefix}--content {
     @include breakpoint-down($breakpoint) {
       margin-inline-start: 0;
     }

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;
   }
 }