@carbon/react 1.51.0 → 1.52.0-rc.0

package/es/components/MenuButton/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * 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, { ComponentProps, ReactNode } from 'react';
+export interface MenuButtonProps extends ComponentProps<'div'> {
+    /**
+     * A collection of MenuItems to be rendered as actions for this MenuButton.
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the MenuButton should be disabled, or not.
+     */
+    disabled?: boolean;
+    /**
+     * Specify the type of button to be used as the base for the trigger button.
+     */
+    kind?: 'primary' | 'tertiary' | 'ghost';
+    /**
+     * Provide the label to be rendered on the trigger button.
+     */
+    label: string;
+    /**
+     * Experimental property. Specify how the menu should align with the button element
+     */
+    menuAlignment: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    /**
+     * Specify the size of the button and menu.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify the tabIndex of the button.
+     */
+    tabIndex?: number;
+}
+declare const MenuButton: React.ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MenuButton };

package/es/components/MenuButton/index.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState } from 'react';
+import React__default, { forwardRef, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ChevronDown } from '@carbon/icons-react';
@@ -22,7 +22,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 const spacing = 0; // top and bottom spacing between the button and the menu. in px
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
 const defaultButtonKind = 'primary';
-const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_ref, forwardRef) {
+const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef) {
   let {
     children,
     className,
@@ -58,10 +58,12 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
     }
   }
   function handleOpen() {
-    menuRef.current.style.inlineSize = `${width}px`;
-    menuRef.current.style.minInlineSize = `${width}px`;
-    if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
-      menuRef.current.style.inlineSize = `fit-content`;
+    if (menuRef.current) {
+      menuRef.current.style.inlineSize = `${width}px`;
+      menuRef.current.style.minInlineSize = `${width}px`;
+      if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
+        menuRef.current.style.inlineSize = `fit-content`;
+      }
     }
   }
   const containerClasses = cx(`${prefix}--menu-button__container`, className);
@@ -69,23 +71,22 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
     [`${prefix}--menu-button__trigger--open`]: open
   });
   const menuClasses = cx(`${prefix}--menu-button__${menuAlignment}`);
-  const buttonKind = validButtonKinds.includes(kind) ? kind : defaultButtonKind;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     ref: ref,
-    "aria-owns": open ? id : null,
+    "aria-owns": open ? id : undefined,
     className: containerClasses
   }), /*#__PURE__*/React__default.createElement(Button, {
     className: triggerClasses,
     size: size,
     tabIndex: tabIndex,
-    kind: buttonKind,
+    kind: kind,
     renderIcon: ChevronDown,
     disabled: disabled,
     "aria-haspopup": true,
     "aria-expanded": open,
     onClick: handleClick,
     onMouseDown: handleMousedown,
-    "aria-controls": open ? id : null
+    "aria-controls": open ? id : undefined
   }, label), /*#__PURE__*/React__default.createElement(Menu, {
     containerRef: triggerRef,
     menuAlignment: menuAlignment,
@@ -118,6 +119,7 @@ MenuButton.propTypes = {
   /**
    * Specify the type of button to be used as the base for the trigger button.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   kind: PropTypes.oneOf(validButtonKinds),
   /**
    * Provide the label to be renderd on the trigger button.
@@ -126,14 +128,17 @@ MenuButton.propTypes = {
   /**
    * Experimental property. Specify how the menu should align with the button element
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   menuAlignment: PropTypes.oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end']),
   /**
    * Specify the size of the button and menu.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
    * Specify the tabIndex of the button.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   tabIndex: PropTypes.number
 };
 

package/es/components/Modal/Modal.js

@@ -86,6 +86,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
   function handleKeyDown(evt) {
+    evt.stopPropagation();
     if (open) {
       if (match(evt, Escape)) {
         onRequestClose(evt);
@@ -97,6 +98,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   }
   function handleMousedown(evt) {
     const target = evt.target;
+    evt.stopPropagation();
     if (innerModal.current && !innerModal.current.contains(target) && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
       onRequestClose(evt);
     }
@@ -228,7 +230,6 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
-    title: closeButtonLabel,
     "aria-label": closeButtonLabel,
     align: "left",
     ref: button

package/es/components/Notification/Notification.d.ts

@@ -518,6 +518,10 @@ export declare namespace ActionableNotification {
  * ==================
  */
 export interface StaticNotificationProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pass in the action button label that will be rendered within the ActionableNotification.
+     */
+    actionButtonLabel?: string;
     /**
      * Specify the content
      */
@@ -534,6 +538,10 @@ export interface StaticNotificationProps extends HTMLAttributes<HTMLDivElement>
      * Specify whether you are using the low contrast variant of the StaticNotification.
      */
     lowContrast?: boolean;
+    /**
+     * Provide a function that is called when the action is clicked
+     */
+    onActionButtonClick?(): void;
     /**
      * Provide a description for "status" icon that can be read by screen readers
      */
@@ -551,9 +559,13 @@ export interface StaticNotificationProps extends HTMLAttributes<HTMLDivElement>
      */
     titleId?: string;
 }
-export declare function StaticNotification({ children, title, titleId, subtitle, statusIconDescription, className, kind, lowContrast, ...rest }: StaticNotificationProps): import("react/jsx-runtime").JSX.Element;
+export declare function StaticNotification({ actionButtonLabel, children, onActionButtonClick, title, titleId, subtitle, statusIconDescription, className, kind, lowContrast, ...rest }: StaticNotificationProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StaticNotification {
     var propTypes: {
+        /**
+         * Pass in the action button label that will be rendered within the ActionableNotification.
+         */
+        actionButtonLabel: PropTypes.Requireable<string>;
         /**
          * Specify the content
          */
@@ -570,6 +582,10 @@ export declare namespace StaticNotification {
          * Specify whether you are using the low contrast variant of the StaticNotification.
          */
         lowContrast: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a function that is called when the action is clicked
+         */
+        onActionButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
         /**
          * Provide a description for "status" icon that can be read by screen readers
          */

package/es/components/Notification/Notification.js

@@ -685,7 +685,9 @@ ActionableNotification.propTypes = {
 
 function StaticNotification(_ref8) {
   let {
+    actionButtonLabel,
     children,
+    onActionButtonClick,
     title,
     titleId,
     subtitle,
@@ -697,10 +699,10 @@ function StaticNotification(_ref8) {
   } = _ref8;
   const prefix = usePrefix();
   const containerClassName = cx(className, {
-    [`${prefix}--inline-notification`]: true,
-    [`${prefix}--inline-notification--low-contrast`]: lowContrast,
-    [`${prefix}--inline-notification--${kind}`]: kind,
-    [`${prefix}--inline-notification--hide-close-button`]: true
+    [`${prefix}--actionable-notification`]: true,
+    [`${prefix}--actionable-notification--low-contrast`]: lowContrast,
+    [`${prefix}--actionable-notification--${kind}`]: kind,
+    [`${prefix}--actionable-notification--hide-close-button`]: true
   });
   const ref = useRef(null);
   useInteractiveChildrenNeedDescription(ref, `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``);
@@ -709,23 +711,32 @@ function StaticNotification(_ref8) {
   }, rest, {
     className: containerClassName
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--inline-notification__details`
+    className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React__default.createElement(NotificationIcon, {
     notificationType: "inline",
     kind: kind,
     iconDescription: statusIconDescription || `${kind} icon`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--inline-notification__text-wrapper`
+    className: `${prefix}--actionable-notification__text-wrapper`
   }, title && /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
     id: titleId,
-    className: `${prefix}--inline-notification__title`
+    className: `${prefix}--actionable-notification__title`
   }, title), subtitle && /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
-    className: `${prefix}--inline-notification__subtitle`
-  }, subtitle), children)));
+    className: `${prefix}--actionable-notification__subtitle`
+  }, subtitle), children)), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--actionable-notification__button-wrapper`
+  }, actionButtonLabel && /*#__PURE__*/React__default.createElement(NotificationActionButton, {
+    onClick: onActionButtonClick,
+    inline: true
+  }, actionButtonLabel)));
 }
 StaticNotification.propTypes = {
+  /**
+   * Pass in the action button label that will be rendered within the ActionableNotification.
+   */
+  actionButtonLabel: PropTypes.string,
   /**
    * Specify the content
    */
@@ -742,6 +753,10 @@ StaticNotification.propTypes = {
    * Specify whether you are using the low contrast variant of the StaticNotification.
    */
   lowContrast: PropTypes.bool,
+  /**
+   * Provide a function that is called when the action is clicked
+   */
+  onActionButtonClick: PropTypes.func,
   /**
    * Provide a description for "status" icon that can be read by screen readers
    */

package/es/components/Toggletip/index.d.ts

@@ -47,7 +47,7 @@ interface ToggletipProps<E extends ElementType> {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-export declare function Toggletip<E extends ElementType = 'span'>({ align, as, autoAlign, className: customClassName, children, defaultOpen, }: ToggletipProps<E>): import("react/jsx-runtime").JSX.Element;
+export declare function Toggletip<E extends ElementType = 'span'>({ align, as, autoAlign, className: customClassName, children, defaultOpen, ...rest }: ToggletipProps<E>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Toggletip {
     var propTypes: {
         /**

package/es/components/Toggletip/index.js

@@ -66,7 +66,8 @@ function Toggletip(_ref2) {
     autoAlign,
     className: customClassName,
     children,
-    defaultOpen = false
+    defaultOpen = false,
+    ...rest
   } = _ref2;
   const ref = useRef(null);
   const [open, setOpen] = useState(defaultOpen);
@@ -128,7 +129,7 @@ function Toggletip(_ref2) {
   });
   return /*#__PURE__*/React__default.createElement(ToggletipContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement(Popover, {
+  }, /*#__PURE__*/React__default.createElement(Popover, _extends({
     align: align,
     as: as,
     caret: true,
@@ -140,7 +141,7 @@ function Toggletip(_ref2) {
     onBlur: handleBlur,
     ref: ref,
     autoAlign: autoAlign
-  }, children));
+  }, rest), children));
 }
 Toggletip.propTypes = {
   /**

package/es/components/TreeView/TreeNode.js

@@ -12,6 +12,8 @@ import { CaretDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useControllableState } from '../../internal/useControllableState.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowLeft, ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -24,6 +26,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     disabled,
     id: nodeId,
     isExpanded,
+    defaultIsExpanded,
     label,
     onNodeFocusEvent,
     onSelect: onNodeSelect,
@@ -34,10 +37,17 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     value,
     ...rest
   } = _ref;
+  const enableTreeviewControllable = useFeatureFlag('enable-treeview-controllable');
   const {
     current: id
   } = useRef(nodeId || uniqueId());
-  const [expanded, setExpanded] = useState(isExpanded);
+  const controllableExpandedState = useControllableState({
+    value: isExpanded,
+    onChange: onToggle,
+    defaultValue: defaultIsExpanded
+  });
+  const uncontrollableExpandedState = useState(isExpanded);
+  const [expanded, setExpanded] = enableTreeviewControllable ? controllableExpandedState : uncontrollableExpandedState;
   const currentNode = useRef(null);
   const currentNodeLabel = useRef(null);
   const prefix = usePrefix();
@@ -73,12 +83,14 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
     // Prevent the node from being selected
     event.stopPropagation();
-    onToggle?.(event, {
-      id,
-      isExpanded: !expanded,
-      label,
-      value
-    });
+    if (!enableTreeviewControllable) {
+      onToggle?.(event, {
+        id,
+        isExpanded: !expanded,
+        label,
+        value
+      });
+    }
     setExpanded(!expanded);
   }
   function handleClick(event) {
@@ -115,12 +127,14 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         return findParentTreeNode(node.parentNode);
       };
       if (children && expanded) {
-        onToggle?.(event, {
-          id,
-          isExpanded: false,
-          label,
-          value
-        });
+        if (!enableTreeviewControllable) {
+          onToggle?.(event, {
+            id,
+            isExpanded: false,
+            label,
+            value
+          });
+        }
         setExpanded(false);
       } else {
         /**
@@ -138,12 +152,14 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
          */
         currentNode.current.lastChild.firstChild.focus();
       } else {
-        onToggle?.(event, {
-          id,
-          isExpanded: true,
-          label,
-          value
-        });
+        if (!enableTreeviewControllable) {
+          onToggle?.(event, {
+            id,
+            isExpanded: true,
+            label,
+            value
+          });
+        }
         setExpanded(true);
       }
     }
@@ -194,10 +210,11 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       currentNodeLabel.current.style.marginInlineStart = `-${calcOffset()}rem`;
       currentNodeLabel.current.style.paddingInlineStart = `${calcOffset()}rem`;
     }
-
-    // sync props and state
-    setExpanded(isExpanded);
-  }, [children, depth, Icon, isExpanded]);
+    if (!enableTreeviewControllable) {
+      // sync props and state
+      setExpanded(isExpanded);
+    }
+  }, [children, depth, Icon, isExpanded, enableTreeviewControllable, setExpanded]);
   const treeNodeProps = {
     ...rest,
     ['aria-current']: isActive || null,
@@ -260,7 +277,12 @@ TreeNode.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * * **Note:** this is controlled by the parent TreeView component, do not set manually.
+   * **[Experimental]** The default expansion state of the node.
+   * *This is only supported with the `enable-treeview-controllable` feature flag!*
+   */
+  defaultIsExpanded: PropTypes.bool,
+  /**
+   * **Note:** this is controlled by the parent TreeView component, do not set manually.
    * TreeNode depth to determine spacing
    */
   depth: PropTypes.number,

package/es/components/TreeView/TreeView.js

@@ -11,6 +11,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useControllableState } from '../../internal/useControllableState.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowUp, ArrowDown, Home, End } from '../../internal/keyboard/keys.js';
 
@@ -22,11 +24,13 @@ function TreeView(_ref) {
     hideLabel = false,
     label,
     multiselect = false,
+    onActivate,
     onSelect,
-    selected: preselected = [],
+    selected: preselected,
     size = 'sm',
     ...rest
   } = _ref;
+  const enableTreeviewControllable = useFeatureFlag('enable-treeview-controllable');
   const {
     current: treeId
   } = useRef(rest.id || uniqueId());
@@ -36,8 +40,20 @@ function TreeView(_ref) {
   });
   const treeRootRef = useRef(null);
   const treeWalker = useRef(treeRootRef?.current);
-  const [selected, setSelected] = useState(preselected);
-  const [active, setActive] = useState(prespecifiedActive);
+  const controllableSelectionState = useControllableState({
+    value: preselected,
+    onChange: onSelect,
+    defaultValue: []
+  });
+  const uncontrollableSelectionState = useState(preselected ?? []);
+  const [selected, setSelected] = enableTreeviewControllable ? controllableSelectionState : uncontrollableSelectionState;
+  const controllableActiveState = useControllableState({
+    value: prespecifiedActive,
+    onChange: onActivate,
+    defaultValue: undefined
+  });
+  const uncontrollableActiveState = useState(prespecifiedActive);
+  const [active, setActive] = enableTreeviewControllable ? controllableActiveState : uncontrollableActiveState;
   function resetNodeTabIndices() {
     Array.prototype.forEach.call(treeRootRef?.current?.querySelectorAll('[tabIndex="0"]') ?? [], item => {
       item.tabIndex = -1;
@@ -54,14 +70,18 @@ function TreeView(_ref) {
       } else {
         setSelected(selected.filter(selectedId => selectedId !== nodeId));
       }
-      onSelect?.(event, node);
+      if (!enableTreeviewControllable) {
+        onSelect?.(event, node);
+      }
     } else {
       setSelected([nodeId]);
       setActive(nodeId);
-      onSelect?.(event, {
-        activeNodeId: nodeId,
-        ...node
-      });
+      if (!enableTreeviewControllable) {
+        onSelect?.(event, {
+          activeNodeId: nodeId,
+          ...node
+        });
+      }
     }
   }
   function handleFocusEvent(event) {
@@ -167,11 +187,13 @@ function TreeView(_ref) {
     });
   }, [prefix]);
   const useActiveAndSelectedOnMount = () => useEffect(() => {
-    if (preselected.length) {
-      setSelected(preselected);
-    }
-    if (prespecifiedActive) {
-      setActive(prespecifiedActive);
+    if (!enableTreeviewControllable) {
+      if (preselected?.length) {
+        setSelected(preselected);
+      }
+      if (prespecifiedActive) {
+        setActive(prespecifiedActive);
+      }
     }
   }, []);
   useActiveAndSelectedOnMount();
@@ -216,6 +238,11 @@ TreeView.propTypes = {
    * If `multiselect` is `false` then only one node can be selected at a time
    */
   multiselect: PropTypes.bool,
+  /**
+   * **[Experimental]** Callback function that is called when any node is activated.
+   * *This is only supported with the `enable-treeview-controllable` feature flag!*
+   */
+  onActivate: PropTypes.func,
   /**
    * Callback function that is called when any node is selected
    */

package/es/components/UIShell/Header.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+interface HeaderProps {
+    children?: ReactNode;
+    /**
+     * Required props for the accessibility label of the header
+     */
+    'aria-label'?: string;
+    /**
+     * Required props for the accessibility label of the header
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Optionally provide a custom class name that is applied to the underlying <header>
+     */
+    className?: string;
+}
+declare const Header: React.FC<HeaderProps>;
+export default Header;

package/es/components/UIShell/Header.js

@@ -34,6 +34,5 @@ Header.propTypes = {
    */
   className: PropTypes.string
 };
-var Header$1 = Header;
 
-export { Header$1 as default };
+export { Header as default };

package/es/components/UIShell/HeaderGlobalAction.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+interface HeaderGlobalActionProps {
+    /**
+     * Required props for the accessibility label of the button
+     */
+    'aria-label'?: string;
+    /**
+     * Required props for the accessibility label of the button
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Provide a custom icon for this global action
+     */
+    children: ReactNode;
+    /**
+     * Optionally provide a custom class name that is applied to the underlying
+     * button
+     */
+    className?: string;
+    /**
+     * Specify whether the action is currently active
+     */
+    isActive?: boolean;
+    /**
+     * Optionally provide an onClick handler that is called when the underlying
+     * button fires it's onclick event
+     */
+    onClick?: () => void;
+    /**
+     * Specify the alignment of the tooltip to the icon-only button.
+     * Can be one of: start, center, or end.
+     */
+    tooltipAlignment?: 'start' | 'center' | 'end';
+}
+/**
+ * HeaderGlobalAction is used as a part of the `HeaderGlobalBar`. It is
+ * essentially an Icon Button with an additional state to indicate whether it is
+ * "active". The active state comes from when a user clicks on the global action
+ * which should trigger a panel to appear.
+ *
+ * Note: children passed to this component should be an Icon.
+ */
+declare const HeaderGlobalAction: React.FC<HeaderGlobalActionProps>;
+export default HeaderGlobalAction;

package/es/components/UIShell/HeaderGlobalAction.js

@@ -84,6 +84,5 @@ HeaderGlobalAction.propTypes = {
   tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end'])
 };
 HeaderGlobalAction.displayName = 'HeaderGlobalAction';
-var HeaderGlobalAction$1 = HeaderGlobalAction;
 
-export { HeaderGlobalAction$1 as default };
+export { HeaderGlobalAction as default };

package/es/components/UIShell/HeaderGlobalBar.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Generic container for `HeaderGlobalAction` components
+ */
+declare const HeaderGlobalBar: (props: import("../../types/common").ReactAttr<"div">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default HeaderGlobalBar;

package/es/components/UIShell/HeaderGlobalBar.js

@@ -10,7 +10,8 @@ import wrapComponent from '../../tools/wrapComponent.js';
 /**
  * Generic container for `HeaderGlobalAction` components
  */
-var HeaderGlobalBar = wrapComponent({
+
+const HeaderGlobalBar = wrapComponent({
   name: 'HeaderGlobalBar',
   className: prefix => `${prefix}--header__global`,
   type: 'div'