@carbon/ibm-products 2.84.0 → 2.85.0

package/es/components/PageHeader/next/PageHeader.js

@@ -6,20 +6,23 @@
  */
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
-import PropTypes from '../../../_virtual/index.js';
+import React__default, { useState, useRef, useEffect } from 'react';
 import cx from 'classnames';
-import { Grid, Column, Section, DefinitionTooltip, unstable_Text, Heading, Popover, PopoverContent, IconButton, BreadcrumbItem, usePrefix, Breadcrumb, MenuButton, MenuItem, AspectRatio } from '@carbon/react';
-import { breakpoints } from '@carbon/layout';
 import { blockClass } from '../PageHeaderUtils.js';
-import { createOverflowHandler } from './overflowHandler.js';
-import { createOverflowHandler as createOverflowHandler$1 } from '@carbon/utilities';
-import { ChevronUp } from '@carbon/react/icons';
-import { PageHeaderContext, usePageHeader } from './context.js';
-import { getHeaderOffset, scrollableAncestor } from './utils.js';
+import { PageHeaderContext } from './context.js';
+import { getHeaderOffset } from './utils.js';
 import { pkg } from '../../../settings.js';
 import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver.js';
-import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
+import { PageHeaderBreadcrumbBar } from './PageHeaderBreadcrumbBar.js';
+import { PageHeaderContent } from './PageHeaderContent.js';
+import { PageHeaderContentPageActions } from './PageHeaderContentPageActions.js';
+import { PageHeaderContentText } from './PageHeaderContentText.js';
+import { PageHeaderHeroImage } from './PageHeaderHeroImage.js';
+import { PageHeaderTabBar } from './PageHeaderTabBar.js';
+import { PageHeaderTagOverflow } from './PageHeaderTagOverflow.js';
+import { PageHeaderScrollButton } from './PageHeaderScrollButton.js';
+import { PageHeaderTitleBreadcrumb } from './PageHeaderTitleBreadcrumb.js';
+import { PageHeaderBreadcrumbOverflow } from './PageHeaderBreadcrumbOverflow.js';
 
 /**
  * ----------
@@ -107,40 +110,31 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
       });
     }, {
       root: null,
-      rootMargin: `${(predefinedContentPadding + totalTitleHeight + totalHeaderOffset + 48) * -1}px 0px 0px 0px`,
+      rootMargin: `${(predefinedContentPadding + totalHeaderOffset + 24) * -1}px 0px 0px 0px`,
       threshold: 0.1
     });
-    if (refs?.contentRef.current) {
-      contentObserver.observe(refs?.contentRef.current);
+    if (refs?.contentRef?.current) {
+      contentObserver.observe(refs.contentRef.current);
     }
-    if (refs?.titleRef.current) {
-      titleObserver.observe(refs?.titleRef.current);
+    if (refs?.titleRef?.current) {
+      titleObserver.observe(refs.titleRef.current);
     }
-    if (refs?.contentActions.current) {
-      contentActionsObserver.observe(refs?.contentActions.current);
+    if (refs?.contentActions?.current) {
+      contentActionsObserver.observe(refs.contentActions.current);
     }
     return () => {
-      if (!refs?.contentRef?.current) {
-        return;
-      }
-      contentObserver.unobserve(refs?.contentRef.current);
-      if (!refs?.titleRef?.current) {
-        return;
-      }
-      titleObserver.unobserve(refs?.titleRef.current);
-      if (!refs?.contentActions?.current) {
-        return;
-      }
-      contentActionsObserver.unobserve(refs?.contentActions.current);
+      contentObserver.disconnect();
+      titleObserver.disconnect();
+      contentActionsObserver.disconnect();
     };
-  }, [refs, componentRef]);
+  }, [refs?.contentRef, refs?.titleRef, refs?.contentActions, componentRef]);
   return /*#__PURE__*/React__default.createElement(PageHeaderContext.Provider, {
     value: {
       refs,
       setRefs,
-      fullyCollapsed,
       pageActionsInstance,
       setPageActionsInstance,
+      fullyCollapsed,
       titleClipped,
       contentActionsClipped,
       breadcrumbActionsClipped
@@ -152,612 +146,6 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
 });
 PageHeader.displayName = 'PageHeader';
 
-/**
- * -----------------------
- * PageHeaderBreadcrumbBar
- * -----------------------
- */
-
-const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderBreadcrumbBar(_ref2, ref) {
-  let {
-    border = true,
-    className,
-    children,
-    renderIcon: IconElement,
-    contentActions,
-    contentActionsFlush,
-    pageActions,
-    pageActionsFlush,
-    ...other
-  } = _ref2;
-  const context = usePageHeader();
-  const {
-    pageActionsInstance: globalActions,
-    contentActionsClipped
-  } = context;
-  const classNames = cx({
-    [`${blockClass}__breadcrumb-bar`]: true,
-    [`${blockClass}__breadcrumb-bar-border`]: border,
-    [`${blockClass}__breadcrumb__actions-flush`]: pageActionsFlush
-  }, className);
-  const contentActionsClasses = cx({
-    [`${blockClass}__breadcrumb__content-actions`]: !contentActionsFlush,
-    [`${blockClass}__breadcrumb__content-actions-with-global-actions`]: !!globalActions,
-    [`${blockClass}__breadcrumb__content-actions-with-global-actions--show`]: contentActionsClipped
-  });
-  return /*#__PURE__*/React__default.createElement(PageHeaderContext.Provider, {
-    value: {
-      ...context,
-      isContentActionsInBreadcrumbBar: true
-    }
-  }, /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classNames,
-    ref: ref
-  }, other), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
-    lg: 16,
-    md: 8,
-    sm: 4
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__breadcrumb-container`
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__breadcrumb-wrapper`
-  }, IconElement && /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__breadcrumb__icon`
-  }, /*#__PURE__*/React__default.createElement(IconElement, null)), children), /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__breadcrumb__actions`
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: contentActionsClasses
-  }, contentActions), pageActions))))));
-});
-PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
-
-/**
- * -----------------
- * PageHeaderContent
- * -----------------
- */
-
-const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHeaderContent(_ref3, ref) {
-  let {
-    className,
-    children,
-    title,
-    renderIcon: IconElement,
-    contextualActions,
-    pageActions,
-    ...other
-  } = _ref3;
-  const contentRef = useRef(null);
-  const componentRef = ref ?? contentRef;
-  const {
-    setRefs,
-    setPageActionsInstance
-  } = usePageHeader();
-  const classNames = cx({
-    [`${blockClass}__content`]: true
-  }, className);
-  const titleRef = useRef(null);
-  useEffect(() => {
-    if (componentRef?.current) {
-      setRefs(prev => ({
-        ...prev,
-        contentRef: componentRef,
-        titleRef
-      }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
-    if (pageActions) {
-      setPageActionsInstance(pageActions);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageActions]);
-  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
-    return element.offsetHeight < element.scrollHeight;
-  };
-  useIsomorphicEffect(() => {
-    titleRef.current && isEllipsisActive(titleRef.current);
-  }, [title]);
-  return /*#__PURE__*/React__default.createElement(Section, _extends({
-    as: "div",
-    className: classNames,
-    ref: componentRef
-  }, other), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
-    lg: 16,
-    md: 8,
-    sm: 4
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__content__title-wrapper`
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__content__start`
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__content__title-container`
-  }, IconElement && /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__content__icon`
-  }, /*#__PURE__*/React__default.createElement(IconElement, null)), isEllipsisApplied ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
-    definition: title
-  }, /*#__PURE__*/React__default.createElement(unstable_Text, {
-    ref: titleRef,
-    as: Heading,
-    className: `${blockClass}__content__title`
-  }, title)) : /*#__PURE__*/React__default.createElement(unstable_Text, {
-    ref: titleRef,
-    as: Heading,
-    className: `${blockClass}__content__title`
-  }, title)), contextualActions && /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__content__contextual-actions`
-  }, contextualActions)), pageActions), children)));
-});
-PageHeaderContent.displayName = 'PageHeaderContent';
-PageHeaderContent.propTypes = {
-  /**
-   * Provide child elements to be rendered inside PageHeaderContent.
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be added to your PageHeaderContent
-   */
-  className: PropTypes.string,
-  /**
-   * The PageHeaderContent's contextual actions
-   */
-  contextualActions: PropTypes.node,
-  /**
-   * The PageHeaderContent's page actions
-   */
-  pageActions: PropTypes.node,
-  /**
-   * Provide an optional icon to render in front of the PageHeaderContent's title.
-   */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * The PageHeaderContent's subtitle
-   */
-  subtitle: PropTypes.string,
-  /**
-   * The PageHeaderContent's title
-   */
-  title: PropTypes.string.isRequired
-};
-
-/**
- * ----------------
- * PageHeaderContentPageActions
- * ----------------
- */
-
-const PageHeaderContentPageActions = _ref4 => {
-  let {
-    className,
-    children,
-    menuButtonLabel = 'Actions',
-    actions,
-    ...other
-  } = _ref4;
-  const {
-    setRefs,
-    contentActionsClipped,
-    breadcrumbActionsClipped,
-    isContentActionsInBreadcrumbBar: isInBreadcrumbBar
-  } = usePageHeader();
-  const classNames = cx(`${blockClass}__content__page-actions`, {
-    // Revisit this:
-    // May want to only add this class if there are content actions in the breadcrumb bar as well
-    [`${blockClass}__content__page-actions--clipped`]: isInBreadcrumbBar ? breadcrumbActionsClipped : contentActionsClipped
-  }, className);
-  const containerRef = useRef(null);
-  const offsetRef = useRef(null);
-  const [menuButtonVisibility, setMenuButtonVisibility] = useState(false);
-  const [hiddenItems, setHiddenItems] = useState([]);
-
-  // need to set the grid columns width based on the menu button's width
-  // to avoid overlapping when resizing
-  useIsomorphicEffect(() => {
-    if (menuButtonVisibility && offsetRef.current) {
-      const width = offsetRef.current.offsetWidth;
-      document.documentElement.style.setProperty('--page-header-title-grid-width', `${width}px`);
-    }
-  }, [menuButtonVisibility]);
-  useEffect(() => {
-    if (isInBreadcrumbBar) {
-      setRefs(prev => ({
-        ...prev,
-        breadcrumbActions: containerRef
-      }));
-    } else {
-      setRefs(prev => ({
-        ...prev,
-        contentActions: containerRef
-      }));
-    }
-  }, [isInBreadcrumbBar, setRefs]);
-  useEffect(() => {
-    if (!containerRef.current || !Array.isArray(actions)) {
-      return;
-    }
-    createOverflowHandler$1({
-      container: containerRef.current,
-      // exclude the hidden menu button from children
-      maxVisibleItems: containerRef.current.children.length - 1,
-      onChange: (visible, hidden) => {
-        setHiddenItems(actions?.slice(visible.length));
-        if (hidden.length > 0) {
-          setMenuButtonVisibility(true);
-        }
-      }
-    });
-  }, [actions]);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classNames,
-    ref: containerRef
-  }, other), Array.isArray(actions) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, actions.map(action => /*#__PURE__*/React__default.createElement("div", {
-    key: action.id
-  }, /*#__PURE__*/React__default.cloneElement(action.body, {
-    ...action.body.props,
-    onClick: action.onClick
-  }))), /*#__PURE__*/React__default.createElement("span", {
-    "data-offset": true,
-    "data-hidden": true,
-    ref: offsetRef
-  }, /*#__PURE__*/React__default.createElement(MenuButton, {
-    menuAlignment: "bottom-end",
-    label: menuButtonLabel,
-    size: "md"
-  }, [...hiddenItems].reverse().map(item => /*#__PURE__*/React__default.createElement(MenuItem, _extends({
-    key: item.id,
-    onClick: item.onClick
-  }, item.menuItem)))))));
-};
-PageHeaderContentPageActions.displayName = 'PageHeaderContentPageActions';
-PageHeaderContentPageActions.propTypes = {
-  /**
-   * The PageHeaderContent's page actions
-   */
-  actions: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
-  /**
-   * Provide child elements to be rendered inside PageHeaderContentPageActions.
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be added to your PageHeaderContentPageActions
-   */
-  className: PropTypes.string,
-  /**
-   * The PageHeaderContent's collapsible Menu button label
-   */
-  menuButtonLabel: PropTypes.string
-};
-
-/**
- * ----------------
- * PageHeaderContentText
- * ----------------
- */
-
-const PageHeaderContentText = _ref5 => {
-  let {
-    className,
-    children,
-    subtitle,
-    ...other
-  } = _ref5;
-  const classNames = cx({
-    [`${blockClass}__content__body`]: true
-  }, className);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classNames
-  }, other), subtitle && /*#__PURE__*/React__default.createElement(unstable_Text, {
-    as: "h3",
-    className: `${blockClass}__content__subtitle`
-  }, subtitle), children);
-};
-PageHeaderContentText.displayName = 'PageHeaderContentText';
-PageHeaderContentText.propTypes = {
-  /**
-   * Provide child elements to be rendered inside PageHeaderContentText.
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be added to your PageHeaderContentText
-   */
-  className: PropTypes.string,
-  /**
-   * The PageHeaderContent's subtitle
-   */
-  subtitle: PropTypes.string
-};
-
-/**
- * ----------------
- * PageHeaderHeroImage
- * ----------------
- */
-
-const PageHeaderHeroImage = _ref6 => {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref6;
-  const [lgBreakpoint, setLgBreakpoint] = useState(false);
-  const classNames = cx({
-    [`${blockClass}__hero-image`]: true
-  }, className);
-  const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
-  useEffect(() => {
-    const listener = event => {
-      setLgBreakpoint(event.matches);
-    };
-    const mediaQueryList = window.matchMedia(lgMediaQuery);
-    mediaQueryList.addEventListener('change', listener);
-    setLgBreakpoint(mediaQueryList.matches);
-    return () => {
-      mediaQueryList.removeEventListener('change', listener);
-    };
-  }, [lgMediaQuery]);
-  return /*#__PURE__*/React__default.createElement(AspectRatio, _extends({
-    className: classNames
-  }, other, {
-    ratio: lgBreakpoint ? '2x1' : '3x2'
-  }), children);
-};
-PageHeaderHeroImage.displayName = 'PageHeaderHeroImage';
-PageHeaderHeroImage.propTypes = {
-  /**
-   * Provide child elements to be rendered inside PageHeaderHeroImage.
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be added to your PageHeaderHeroImage
-   */
-  className: PropTypes.string
-};
-
-/**
- * ----------------
- * PageHeaderTabBar
- * ----------------
- */
-
-const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabBar(_ref7, ref) {
-  let {
-    className,
-    children,
-    tags,
-    scroller,
-    ...other
-  } = _ref7;
-  const classNames = cx({
-    [`${blockClass}__tab-bar`]: true
-  }, className);
-  const renderScroller = () => scroller && /*#__PURE__*/React__default.createElement("div", {
-    className: `${pkg.prefix}--page-header--scroller-button-container`
-  }, scroller);
-
-  // Early return if no tags are provided
-  if (!tags) {
-    return /*#__PURE__*/React__default.createElement("div", _extends({
-      className: classNames,
-      ref: ref
-    }, other), /*#__PURE__*/React__default.createElement(Grid, {
-      condensed: true
-    }, /*#__PURE__*/React__default.createElement(Column, {
-      lg: 16,
-      md: 8,
-      sm: 4
-    }, children, renderScroller())));
-  }
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classNames,
-    ref: ref
-  }, other), /*#__PURE__*/React__default.createElement(Grid, {
-    condensed: true
-  }, /*#__PURE__*/React__default.createElement(Column, {
-    lg: 16,
-    md: 8,
-    sm: 4
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: cx(`${blockClass}__tab-bar--tablist`, {
-      [`${pkg.prefix}--page-header__tab-bar--with-scroller`]: !!scroller
-    })
-  }, children, tags, renderScroller()))));
-});
-PageHeaderTabBar.displayName = 'PageHeaderTabBar';
-const PageHeaderTagOverflow = /*#__PURE__*/React__default.forwardRef((_ref8, ref) => {
-  let {
-    renderOverflowTag,
-    renderPopoverContent,
-    children
-  } = _ref8;
-  const [openPopover, setOpenPopover] = useState(false);
-  const [hiddenTags, setHiddenTags] = useState([]);
-  const localRef = useRef(null);
-  const tagsContainerRef = ref || localRef;
-  // To close popover when window resizes
-  useEffect(() => {
-    const handleResize = () => {
-      // Close the popover when window resizes to prevent unwanted opens
-      setOpenPopover(false);
-    };
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-  const handleOverflowClick = useCallback(event => {
-    event.stopPropagation();
-    setOpenPopover(prev => !prev);
-  }, []);
-  useEffect(() => {
-    createOverflowHandler({
-      container: tagsContainerRef.current,
-      onChange: (_, hidden) => {
-        setHiddenTags(hidden);
-      }
-    });
-    // Don't want ref in dependency array
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/React__default.createElement("div", {
-    ref: tagsContainerRef,
-    className: cx(`${pkg.prefix}--page-header--tag-overflow-container`, {
-      [`${pkg.prefix}--page-header--tag-overflow-container__has-no-hidden-items`]: !hiddenTags.length
-    })
-  }, children, /*#__PURE__*/React__default.createElement(Popover, {
-    open: openPopover,
-    onRequestClose: () => setOpenPopover(false),
-    "data-fixed": true,
-    className: cx(`${pkg.prefix}--page-header--tag-overflow-popover`, {
-      [`${pkg.prefix}--page-header--tag-overflow-popover__hidden`]: !hiddenTags.length
-    })
-  }, renderOverflowTag?.(hiddenTags, handleOverflowClick, openPopover), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__tags-popover-list`
-  }, renderPopoverContent?.(hiddenTags)))));
-});
-PageHeaderTagOverflow.displayName = 'PageHeaderTagOverflow';
-const PageHeaderScrollButton = /*#__PURE__*/React__default.forwardRef(function PageHeaderExpander(_ref9, ref) {
-  let {
-    className,
-    children,
-    label,
-    onClick,
-    collapseText = 'Collapse',
-    expandText = 'Expand',
-    ...other
-  } = _ref9;
-  const {
-    refs,
-    fullyCollapsed
-  } = usePageHeader();
-  const handleScroller = isFullyCollapsed => {
-    if (!refs?.contentRef?.current) {
-      return;
-    }
-    const scrollableTarget = scrollableAncestor(refs?.contentRef.current);
-
-    // Page header content is not fully collapsed
-    if (!isFullyCollapsed) {
-      const pageHeaderContentHeight = refs?.contentRef.current.offsetHeight;
-      scrollableTarget?.scrollTo({
-        top: pageHeaderContentHeight,
-        // headerTopValue, check if breadcrumb bar is included
-        behavior: 'smooth'
-      });
-    } else {
-      // Page header content is fully collapsed
-      scrollableTarget?.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-      });
-    }
-  };
-  return /*#__PURE__*/React__default.createElement(IconButton, _extends({
-    ref: ref,
-    label: fullyCollapsed ? expandText : collapseText,
-    size: "md",
-    kind: "ghost",
-    autoAlign: true
-  }, other, {
-    onClick: event => {
-      onClick?.(event);
-      handleScroller(!!fullyCollapsed);
-    },
-    className: cx(className, `${pkg.prefix}--page-header--scroller-button`)
-  }), /*#__PURE__*/React__default.createElement(ChevronUp, {
-    className: cx(`${pkg.prefix}--page-header--scroller-button-icon`, {
-      [`${pkg.prefix}--page-header--scroller-button-icon-collapsed`]: fullyCollapsed
-    })
-  }));
-});
-const PageHeaderTitleBreadcrumb = /*#__PURE__*/forwardRef((_ref10, ref) => {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref10;
-  const {
-    titleClipped,
-    refs
-  } = usePageHeader();
-  return /*#__PURE__*/React__default.createElement(BreadcrumbItem, _extends({
-    ref: ref,
-    isCurrentPage: true
-  }, other, {
-    className: cx(className, `${pkg.prefix}--page-header-title-breadcrumb`, {
-      [`${pkg.prefix}--page-header-title-breadcrumb-show`]: titleClipped && refs?.titleRef,
-      [`${pkg.prefix}--page-header-title-breadcrumb-show__with-content-element`]: !!refs?.contentRef,
-      [`${pkg.prefix}--page-header-title-breadcrumb-show__without-content-element`]: !refs?.contentRef
-    })
-  }), children);
-});
-// This component is a wrapper for the Breadcrumb, and renders breadcrumb items as children
-// including the overflow breadcrumb item. The overflowHandler determines what elements
-// are visible and hidden and passes the hidden elements back to the render prop used
-// to display the overflow breadcrumb
-const PageHeaderBreadcrumbOverflow = /*#__PURE__*/forwardRef((_ref11, ref) => {
-  let {
-    renderOverflowBreadcrumb,
-    className,
-    children,
-    ...other
-  } = _ref11;
-  const [hiddenBreadcrumbs, setHiddenBreadcrumbs] = React__default.useState([]);
-  const fallbackRef = useRef(null);
-  const componentRef = ref ?? fallbackRef;
-
-  // Initialize overflow resize handler
-  const carbonPrefix = usePrefix();
-  useEffect(() => {
-    if (!componentRef) {
-      return;
-    }
-    const breadcrumbList = componentRef?.current.querySelector(`.${carbonPrefix}--breadcrumb`);
-    createOverflowHandler({
-      container: breadcrumbList,
-      onChange: (_, hidden) => {
-        setHiddenBreadcrumbs(hidden);
-      }
-    });
-    // Don't want ref or carbon prefix in dependency array
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const renderChildren = () => {
-    // Only BreadcrumbItems and TitleBreadcrumbs are valid children
-    const filteredBreadcrumbs = React__default.Children.toArray(children).filter(child => {
-      if (/*#__PURE__*/React__default.isValidElement(child)) {
-        return child.type === BreadcrumbItem || PageHeaderTitleBreadcrumb;
-      }
-    });
-    // We need to clone the renderProp for the overflow breadcrumb item
-    // to place it before the title breadcrumb according to the design
-    if (filteredBreadcrumbs) {
-      const overflowBreadcrumb = renderOverflowBreadcrumb?.(hiddenBreadcrumbs);
-      // If no overflow breadcrumb provided, return here with the rest of the children
-      if (!overflowBreadcrumb) {
-        return children;
-      }
-      const clonedTitleBreadcrumb = /*#__PURE__*/React__default.cloneElement(overflowBreadcrumb, {
-        key: 'cloned overflow breadcrumb item',
-        'data-fixed': true,
-        className: cx(`${pkg.prefix}--page-header-breadcrumb-overflow-item`, {
-          [`${pkg.prefix}--page-header-overflow-breadcrumb-item-with-items`]: hiddenBreadcrumbs.length
-        })
-      });
-      const clonedChildren = [...filteredBreadcrumbs];
-      clonedChildren.splice(filteredBreadcrumbs.length - 1, 0, clonedTitleBreadcrumb); // second to last position
-      return clonedChildren;
-    }
-    return children;
-  };
-  return /*#__PURE__*/React__default.createElement(Breadcrumb, _extends({
-    className: cx(className, `${pkg.prefix}--page-header-breadcrumb-overflow`),
-    ref: componentRef
-  }, other), renderChildren());
-});
-
 /**
  * -------
  * Exports