@carbon/ibm-products 2.70.0 → 2.71.0-rc.0

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -30,7 +30,6 @@ var useId = require('../../global/js/utils/useId.js');
 var settings = require('../../settings.js');
 var utils = require('./utils.js');
 var usePresence = require('../../global/js/hooks/usePresence.js');
-var useClickOutside = require('../../global/js/hooks/useClickOutside.js');
 
 var _Close;
 
@@ -145,15 +144,17 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
   }, [data]);
-  useClickOutside.useClickOutside(ref || notificationPanelRef, target => {
-    const element = target;
-    if (!isActionableElement(element)) {
-      setTimeout(() => {
-        triggerButtonRef?.current?.focus();
-      }, 100);
-    }
-    onClickOutside?.();
-  });
+
+  // useClickOutside(ref || notificationPanelRef, (target) => {
+  //   const element = target as HTMLElement;
+  //   if (!isActionableElement(element)) {
+  //     setTimeout(() => {
+  //       triggerButtonRef?.current?.focus();
+  //     }, 100);
+  //   }
+  //   onClickOutside?.();
+  // });
+
   const handleKeydown = event => {
     event.stopPropagation();
     if (event.key === 'Escape') {
@@ -311,17 +312,6 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       size: 16
     }))));
   };
-  const isActionableElement = el => {
-    if (!el) {
-      return false;
-    }
-    const interactiveRoles = new Set(['button', 'link', 'textbox', 'checkbox', 'radio', 'slider', 'spinbutton', 'combobox', 'switch', 'menuitem']);
-    const actionableAncestor = el.closest('button, a, input, select, textarea, [tabindex], [contenteditable="true"], [role]');
-    if (!actionableAncestor) {
-      return false;
-    }
-    return actionableAncestor instanceof HTMLButtonElement || actionableAncestor instanceof HTMLAnchorElement || actionableAncestor instanceof HTMLInputElement || actionableAncestor instanceof HTMLSelectElement || actionableAncestor instanceof HTMLTextAreaElement || actionableAncestor.tabIndex >= 0 || actionableAncestor.isContentEditable || interactiveRoles.has(actionableAncestor.getAttribute('role')?.toLowerCase() ?? '');
-  };
   const dismissSingleNotification = (event, notification) => {
     event.preventDefault();
     event.stopPropagation();

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -47,7 +47,7 @@ const PageHeaderTitle = _ref => {
   } = title;
   let titleText;
   let isEditable = !!onSave;
-  const titleRef = React.useRef();
+  const titleRef = React.useRef(undefined);
   const isEllipsisApplied = useOverflowString.useOverflowStringWidth(titleRef);
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {

package/lib/components/PageHeader/next/PageHeader.d.ts

@@ -0,0 +1,277 @@
+/**
+ * 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, { type ComponentType, type FunctionComponent } from 'react';
+import { TYPES } from '@carbon/react/es/components/Tag/Tag';
+/**
+ * ----------
+ * PageHeader
+ * ----------
+ */
+interface PageHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -----------------------
+ * PageHeaderBreadcrumbBar
+ * -----------------------
+ */
+interface PageHeaderBreadcrumbBarProps {
+    /**
+     * `true` by default to render BreadcrumbBar bottom border.
+     */
+    border?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Provide an optional icon to render in front of the PageHeaderContent's title.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * The PageHeaderBreadcrumbBar's content actions
+     */
+    contentActions?: React.ReactNode;
+    /**
+     * `true` to set content actions flush against page actions
+     */
+    contentActionsFlush?: boolean;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    pageActions?: React.ReactNode;
+    /**
+     * `true` to set page actions flush with page
+     */
+    pageActionsFlush?: boolean;
+}
+declare const PageHeaderBreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -----------------
+ * PageHeaderContent
+ * -----------------
+ */
+interface PageHeaderContentProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderContent.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderContent
+     */
+    className?: string;
+    /**
+     * Provide an optional icon to render in front of the PageHeaderContent's title.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * The PageHeaderContent's title
+     */
+    title: string;
+    /**
+     * The PageHeaderContent's contextual actions
+     */
+    contextualActions?: React.ReactNode;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    pageActions?: React.ReactNode;
+}
+declare const PageHeaderContent: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ----------------
+ * PageHeaderContentPageActions
+ * ----------------
+ */
+interface PageHeaderContentPageActionsProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderContentPageActions.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderContentPageActions
+     */
+    className?: string;
+    /**
+     * The PageHeaderContent's page actions collapsible Menu button label
+     */
+    menuButtonLabel?: string;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    actions?: React.ReactNode;
+}
+declare const PageHeaderContentPageActions: {
+    ({ className, children, menuButtonLabel, actions, ...other }: PageHeaderContentPageActionsProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * The PageHeaderContent's page actions
+         */
+        actions: any;
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentPageActions.
+         */
+        children: any;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentPageActions
+         */
+        className: any;
+        /**
+         * The PageHeaderContent's collapsible Menu button label
+         */
+        menuButtonLabel: any;
+    };
+};
+/**
+ * ----------------
+ * PageHeaderContentText
+ * ----------------
+ */
+interface PageHeaderContentTextProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderContentText.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderContentText
+     */
+    className?: string;
+    /**
+     * The PageHeaderContent's subtitle
+     */
+    subtitle?: string;
+}
+declare const PageHeaderContentText: {
+    ({ className, children, subtitle, ...other }: PageHeaderContentTextProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentText.
+         */
+        children: any;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentText
+         */
+        className: any;
+        /**
+         * The PageHeaderContent's subtitle
+         */
+        subtitle: any;
+    };
+};
+/**
+ * ----------------
+ * PageHeaderHeroImage
+ * ----------------
+ */
+interface PageHeaderHeroImageProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderHeroImage.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderHeroImage
+     */
+    className?: string;
+}
+declare const PageHeaderHeroImage: {
+    ({ className, children, ...other }: PageHeaderHeroImageProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderHeroImage.
+         */
+        children: any;
+        /**
+         * Specify an optional className to be added to your PageHeaderHeroImage
+         */
+        className: any;
+    };
+};
+/**
+ * ----------------
+ * PageHeaderTabBar
+ * ----------------
+ */
+interface TagItem {
+    type: keyof typeof TYPES;
+    text: string;
+    size?: 'sm' | 'md' | 'lg';
+    id: string;
+}
+interface PageHeaderTabBarProps {
+    children?: React.ReactNode;
+    className?: string;
+    tags?: TagItem[];
+}
+declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -------
+ * Exports
+ * -------
+ */
+declare const Root: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const BreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContentPageActions: {
+    ({ className, children, menuButtonLabel, actions, ...other }: PageHeaderContentPageActionsProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * The PageHeaderContent's page actions
+         */
+        actions: any;
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentPageActions.
+         */
+        children: any;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentPageActions
+         */
+        className: any;
+        /**
+         * The PageHeaderContent's collapsible Menu button label
+         */
+        menuButtonLabel: any;
+    };
+};
+declare const ContentText: {
+    ({ className, children, subtitle, ...other }: PageHeaderContentTextProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentText.
+         */
+        children: any;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentText
+         */
+        className: any;
+        /**
+         * The PageHeaderContent's subtitle
+         */
+        subtitle: any;
+    };
+};
+declare const HeroImage: {
+    ({ className, children, ...other }: PageHeaderHeroImageProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderHeroImage.
+         */
+        children: any;
+        /**
+         * Specify an optional className to be added to your PageHeaderHeroImage
+         */
+        className: any;
+    };
+};
+declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };