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

package/es/node_modules/@carbon/icons-react/node_modules/@carbon/icon-helpers/es/index.js

@@ -40,8 +40,8 @@ function _objectWithoutProperties(e, t) {
     r,
     i = _objectWithoutPropertiesLoose(e, t);
   if (Object.getOwnPropertySymbols) {
-    var s = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
   }
   return i;
 }
@@ -49,7 +49,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;

package/lib/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/lib/components/HeaderContainer.js

@@ -15,36 +15,60 @@ var React = require('react');
 var keys = require('../internal/keyboard/keys.js');
 var match = require('../internal/keyboard/match.js');
 var useEvent = require('../internal/useEvent.js');
+var usePrefix = require('../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.usePrefix();
   const [isSideNavExpandedState, setIsSideNavExpandedState] = React.useState(isSideNavExpanded);
   const [isSwitcherExpandedState, setSwitcherExpandedState] = React.useState(isSwitcherExpanded);
+  const [isProfileExpandedState, setIsProfileExpandedState] = React.useState(isProfileExpanded);
   useEvent.useWindowEvent('keydown', event => {
     if (match.match(event, keys.Escape)) {
       setIsSideNavExpandedState(false);
       setSwitcherExpandedState(false);
+      setIsProfileExpandedState(false); // close profile on ESC
     }
   });
   const handleHeaderMenuButtonClick = React.useCallback(() => {
-    setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
-  }, [setIsSideNavExpandedState]);
+    setIsSideNavExpandedState(prev => !prev);
+  }, []);
   const handleSwitcherClick = React.useCallback(() => {
-    setSwitcherExpandedState(prevIsSwitcherExpanded => !prevIsSwitcherExpanded);
-  }, [setSwitcherExpandedState]);
+    setSwitcherExpandedState(prev => !prev);
+  }, []);
+  const handleProfileClick = React.useCallback(e => {
+    if (!e.target.closest(`.${prefix}--profile .${prefix}--popover`)) {
+      setIsProfileExpandedState(prev => !prev);
+    }
+  }, []);
+  React.useLayoutEffect(() => {
+    setTimeout(function () {
+      document.querySelector(`.${prefix}--profile .${prefix}--content-switcher--selected`).focus();
+    });
+  }, [themeSetting]);
   return /*#__PURE__*/React.createElement(Children, _rollupPluginBabelHelpers.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/lib/components/Profile.js

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

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;