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

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

@@ -42,8 +42,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;
 }
@@ -51,7 +51,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/package.json

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

package/scss/styles/_header.scss

@@ -22,11 +22,15 @@ $prefix: 'cds' !default;
 }
 
 .#{$prefix}--header__action:focus {
-  box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $background;
+  outline-offset: -2px;
 }
 
 .#{$prefix}--header-action__button {
   block-size: convert.rem(48px);
+
+  &:focus {
+    outline-offset: -2px;
+  }
 }
 
 .#{$prefix}--header-action__button.#{$prefix}--btn--ghost:not([disabled]) svg {
@@ -41,11 +45,6 @@ $prefix: 'cds' !default;
   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;
@@ -63,12 +62,6 @@ $prefix: 'cds' !default;
     $link-visited
   );
   @include custom-property.declaration('link-focus-text-color', $focus);
-
-  padding: 0;
-
-  > * {
-    padding: 0 $spacing-05 $spacing-05 $spacing-05;
-  }
 }
 
 //----------------------------------------------------------------------------

package/scss/styles/_profile.scss

@@ -14,16 +14,30 @@
 
 $prefix: 'cds' !default;
 
-// user-info
-.#{$prefix}--header-action .#{$prefix}--profile-user-info {
-  display: flex;
-  padding-block-start: $spacing-05;
+// profile
+.#{$prefix}--profile.#{$prefix}--popover--open {
+  background-color: $background;
+}
 
-  &:not(:last-child) {
+.#{$prefix}--profile .#{$prefix}--toggletip-content {
+  padding: 0;
+  background-color: $background;
+  border-inline-start: 1px solid $border-subtle;
+  gap: 0;
+  max-block-size: 100vh;
+  overflow-y: scroll;
+
+  > * {
+    padding: $spacing-05;
     border-block-end: convert.to-rem(1px) solid $border-subtle;
   }
 }
 
+// user-info
+.#{$prefix}--profile .#{$prefix}--profile-user-info {
+  display: flex;
+}
+
 .#{$prefix}--profile-user-info__text-wrapper {
   margin-inline-start: $spacing-05;
 }
@@ -37,14 +51,6 @@ $prefix: 'cds' !default;
 }
 
 // read only
-.#{$prefix}--profile-read-only {
-  padding-block-start: 0;
-
-  &:not(:last-child) {
-    border-block-end: convert.to-rem(1px) solid $border-subtle;
-  }
-}
-
 .#{$prefix}--profile-read-only__items:not(:last-child) {
   padding-block-end: $spacing-05;
 }
@@ -65,10 +71,9 @@ $prefix: 'cds' !default;
 // contained-list links
 .#{$prefix}--header-action__content .#{$prefix}--contained-list--on-page {
   padding: 0;
-  margin-block-start: -$spacing-05;
 }
 
-// TODO: remove if we make the contained-list header optional
+// TODO: remove when https://github.com/carbon-design-system/carbon/pull/19813 is released
 .#{$prefix}--header-action__content .#{$prefix}--contained-list__header {
   display: none;
 }

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;