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

package/es/components/HeaderContainer.d.ts

@@ -9,19 +9,29 @@ import React from 'react';
 export interface HeaderContainerRenderProps {
     isSideNavExpanded: boolean;
     isSwitcherExpanded: boolean;
+    isProfileExpanded: boolean;
     onClickSideNavExpand: () => void;
     onClickSwitcherExpand: () => void;
+    onClickProfileExpand: () => void;
+    themeSetting: string;
 }
 export type HeaderContainerProps<P extends HeaderContainerRenderProps> = {
     isSideNavExpanded?: boolean;
     isSwitcherExpanded?: boolean;
+    isProfileExpanded?: boolean;
     render: React.ComponentType<P>;
+    themeSetting?: string;
 } & {
     [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 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 namespace HeaderContainer {
     var propTypes: {
+        /**
+         * `true` if the profile is expanded.
+         */
+        isProfileExpanded: PropTypes.Requireable<boolean>;
         /**
          * `true` if the side navigation is expanded.
          */

package/es/components/HeaderContainer.js

@@ -7,40 +7,64 @@
 
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useLayoutEffect } from 'react';
 import { Escape } from '../internal/keyboard/keys.js';
 import { match } from '../internal/keyboard/match.js';
 import { useWindowEvent } from '../internal/useEvent.js';
+import { usePrefix } from '../internal/usePrefix.js';
 
 function HeaderContainer(_ref) {
   let {
     render: Children,
     isSideNavExpanded = false,
     isSwitcherExpanded = false,
+    isProfileExpanded = false,
+    themeSetting,
+    // <-- pass this in from the story
     ...rest
   } = _ref;
+  const prefix = usePrefix();
   const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
   const [isSwitcherExpandedState, setSwitcherExpandedState] = useState(isSwitcherExpanded);
+  const [isProfileExpandedState, setIsProfileExpandedState] = useState(isProfileExpanded);
   useWindowEvent('keydown', event => {
     if (match(event, Escape)) {
       setIsSideNavExpandedState(false);
       setSwitcherExpandedState(false);
+      setIsProfileExpandedState(false); // close profile on ESC
     }
   });
   const handleHeaderMenuButtonClick = useCallback(() => {
-    setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
-  }, [setIsSideNavExpandedState]);
+    setIsSideNavExpandedState(prev => !prev);
+  }, []);
   const handleSwitcherClick = useCallback(() => {
-    setSwitcherExpandedState(prevIsSwitcherExpanded => !prevIsSwitcherExpanded);
-  }, [setSwitcherExpandedState]);
+    setSwitcherExpandedState(prev => !prev);
+  }, []);
+  const handleProfileClick = useCallback(e => {
+    if (!e.target.closest(`.${prefix}--profile .${prefix}--popover`)) {
+      setIsProfileExpandedState(prev => !prev);
+    }
+  }, []);
+  useLayoutEffect(() => {
+    setTimeout(function () {
+      document.querySelector(`.${prefix}--profile .${prefix}--content-switcher--selected`).focus();
+    });
+  }, [themeSetting]);
   return /*#__PURE__*/React.createElement(Children, _extends({}, rest, {
     isSideNavExpanded: isSideNavExpandedState,
     isSwitcherExpanded: isSwitcherExpandedState,
+    isProfileExpanded: isProfileExpandedState,
     onClickSideNavExpand: handleHeaderMenuButtonClick,
-    onClickSwitcherExpand: handleSwitcherClick
+    onClickSwitcherExpand: handleSwitcherClick,
+    onClickProfileExpand: handleProfileClick,
+    themeSetting: themeSetting
   }));
 }
 HeaderContainer.propTypes = {
+  /**
+   * `true` if the profile is expanded.
+   */
+  isProfileExpanded: PropTypes.bool,
   /**
    * `true` if the side navigation is expanded.
    */

package/es/components/Profile.js

@@ -18,17 +18,18 @@ const Profile = /*#__PURE__*/React.forwardRef(function Profile(_ref) {
     className: customClassName,
     label,
     children,
-    renderIcon: IconElement
+    renderIcon: IconElement,
+    ...rest
   } = _ref;
   const prefix = usePrefix();
   const className = cx({
-    [`${prefix}-profile`]: true,
+    [`${prefix}--profile`]: true,
     [customClassName]: !!customClassName
   });
-  return /*#__PURE__*/React.createElement(HeaderPopover, {
+  return /*#__PURE__*/React.createElement(HeaderPopover, _extends({
     align: "bottom-right",
     className: className
-  }, /*#__PURE__*/React.createElement(HeaderPopoverButton, {
+  }, rest), /*#__PURE__*/React.createElement(HeaderPopoverButton, {
     align: "bottom",
     label: label
   }, IconElement), /*#__PURE__*/React.createElement(HeaderPopoverContent, null, children));