@carbon/ibm-products 2.71.1 → 2.72.0-rc.0

package/lib/components/PageHeader/next/PageHeader.js

@@ -14,9 +14,15 @@ var cx = require('classnames');
 var react = require('@carbon/react');
 var layout = require('@carbon/layout');
 var PageHeaderUtils = require('../PageHeaderUtils.js');
+var overflowHandler = require('./overflowHandler.js');
 var utilities = require('@carbon/utilities');
 var useOverflowItems = require('../../../global/js/hooks/useOverflowItems/useOverflowItems.js');
 var useId = require('../../../global/js/utils/useId.js');
+var icons = require('@carbon/react/icons');
+var context = require('./context.js');
+var utils = require('./utils.js');
+var settings = require('../../../settings.js');
+var useResizeObserver = require('../../../global/js/hooks/useResizeObserver.js');
 
 /**
  * ----------
@@ -30,14 +36,91 @@ const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref)
     children,
     ...other
   } = _ref;
+  const [refs, setRefs] = React.useState({});
+  const tempRef = React.useRef(null);
+  const componentRef = ref ?? tempRef;
   const classNames = cx({
     [`${PageHeaderUtils.blockClass}`]: true,
     [`${PageHeaderUtils.blockClass}__next`]: true
   }, className);
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+
+  // Used to set CSS custom property with PageHeaderContent height to be used
+  // for sticky positioning
+  useResizeObserver.useResizeObserver(componentRef, () => {
+    if (componentRef?.current && refs?.contentRef?.current) {
+      const pageHeaderContentHeight = refs?.contentRef?.current?.offsetHeight;
+      const totalHeaderOffset = utils.getHeaderOffset(componentRef?.current);
+      componentRef?.current.style.setProperty(`--${settings.pkg.prefix}-page-header-header-top`, `${(Math.round(pageHeaderContentHeight) - totalHeaderOffset) * -1}px`);
+      componentRef?.current.style.setProperty(`--${settings.pkg.prefix}-page-header-breadcrumb-top`, `${totalHeaderOffset}px`);
+    }
+  });
+  const [fullyCollapsed, setFullyCollapsed] = React.useState(false);
+  const [titleClipped, setTitleClipped] = React.useState(false);
+
+  // Intersection Observer setup, tracks if the PageHeaderContent is visible on page.
+  // If it is not visible, we should set fully collapsed to true so that the
+  // scroller button will know if it is clicked to expand rather than
+  // collapse the header.
+  React.useEffect(() => {
+    if (!refs?.contentRef || !componentRef?.current) {
+      return;
+    }
+    const totalHeaderOffset = utils.getHeaderOffset(componentRef?.current);
+    const predefinedContentPadding = 24;
+    const contentObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.target === refs?.contentRef.current) {
+          setFullyCollapsed(!entry.isIntersecting);
+        }
+      });
+    }, {
+      root: null,
+      rootMargin: `${(predefinedContentPadding + totalHeaderOffset + 40) * -1}px 0px 0px 0px`,
+      threshold: 0.1
+    });
+    if (!refs?.titleRef?.current) {
+      return;
+    }
+    const totalTitleHeight = refs?.titleRef.current.offsetHeight;
+    const titleObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.target === refs?.titleRef.current) {
+          setTitleClipped(!entry.isIntersecting);
+        }
+      });
+    }, {
+      root: null,
+      rootMargin: `${(predefinedContentPadding + totalTitleHeight + totalHeaderOffset + 24) * -1}px 0px 0px 0px`,
+      threshold: 0.1
+    });
+    if (refs?.contentRef.current) {
+      contentObserver.observe(refs?.contentRef.current);
+    }
+    if (refs?.titleRef.current) {
+      titleObserver.observe(refs?.titleRef.current);
+    }
+    return () => {
+      if (!refs?.contentRef?.current) {
+        return;
+      }
+      contentObserver.unobserve(refs?.contentRef.current);
+      if (!refs?.titleRef?.current) {
+        return;
+      }
+      contentObserver.unobserve(refs?.titleRef.current);
+    };
+  }, [refs, componentRef]);
+  return /*#__PURE__*/React.createElement(context.PageHeaderContext.Provider, {
+    value: {
+      refs,
+      setRefs,
+      fullyCollapsed,
+      titleClipped
+    }
+  }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: classNames,
-    ref: ref
-  }, other), children);
+    ref: componentRef
+  }, other), children));
 });
 PageHeader.displayName = 'PageHeader';
 
@@ -104,10 +187,25 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderConte
     pageActions,
     ...other
   } = _ref3;
+  const contentRef = React.useRef(null);
+  const componentRef = ref ?? contentRef;
+  const {
+    setRefs
+  } = context.usePageHeader();
   const classNames = cx({
     [`${PageHeaderUtils.blockClass}__content`]: true
   }, className);
   const titleRef = React.useRef(null);
+  React.useEffect(() => {
+    if (componentRef?.current) {
+      setRefs(prev => ({
+        ...prev,
+        contentRef: componentRef,
+        titleRef
+      }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   const isEllipsisActive = element => {
     setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
@@ -118,7 +216,7 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderConte
   }, [title]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: classNames,
-    ref: ref
+    ref: componentRef
   }, other), /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement(react.Column, {
     lg: 16,
     md: 8,
@@ -360,11 +458,16 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar
     className,
     children,
     tags = [],
+    scroller,
     ...other
   } = _ref7;
   const classNames = cx({
     [`${PageHeaderUtils.blockClass}__tab-bar`]: true
   }, className);
+  const renderScroller = () => scroller && /*#__PURE__*/React.createElement("div", {
+    className: `${settings.pkg.prefix}--page-header--scroller-button-container`
+  }, scroller);
+
   // Early return if no tags are provided
   if (!tags.length) {
     return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
@@ -374,7 +477,7 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar
       lg: 16,
       md: 8,
       sm: 4
-    }, children)));
+    }, children, renderScroller())));
   }
   const [openPopover, setOpenPopover] = React.useState(false);
   const tagSize = tags[0]?.size || 'md';
@@ -449,10 +552,149 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar
     md: 8,
     sm: 4
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${PageHeaderUtils.blockClass}__tab-bar--tablist`
-  }, children, tags.length > 0 && renderTags()))));
+    className: cx(`${PageHeaderUtils.blockClass}__tab-bar--tablist`, {
+      [`${settings.pkg.prefix}--page-header__tab-bar--with-scroller`]: !!scroller
+    })
+  }, children, tags.length > 0 && renderTags(), renderScroller()))));
 });
 PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+const PageHeaderScrollButton = /*#__PURE__*/React.forwardRef(function PageHeaderExpander(_ref8, ref) {
+  let {
+    className,
+    children,
+    label,
+    onClick,
+    collapseText = 'Collapse',
+    expandText = 'Expand',
+    ...other
+  } = _ref8;
+  const {
+    refs,
+    fullyCollapsed
+  } = context.usePageHeader();
+  const handleScroller = isFullyCollapsed => {
+    if (!refs?.contentRef?.current) {
+      return;
+    }
+    const scrollableTarget = utils.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.createElement(react.IconButton, _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    label: fullyCollapsed ? expandText : collapseText,
+    size: "md",
+    kind: "ghost",
+    autoAlign: true
+  }, other, {
+    onClick: event => {
+      onClick?.(event);
+      handleScroller(!!fullyCollapsed);
+    },
+    className: cx(className, `${settings.pkg.prefix}--page-header--scroller-button`)
+  }), /*#__PURE__*/React.createElement(icons.ChevronUp, {
+    className: cx(`${settings.pkg.prefix}--page-header--scroller-button-icon`, {
+      [`${settings.pkg.prefix}--page-header--scroller-button-icon-collapsed`]: fullyCollapsed
+    })
+  }));
+});
+const PageHeaderTitleBreadcrumb = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref9;
+  const {
+    titleClipped,
+    refs
+  } = context.usePageHeader();
+  return /*#__PURE__*/React.createElement(react.BreadcrumbItem, _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    isCurrentPage: true
+  }, other, {
+    className: cx(className, `${settings.pkg.prefix}--page-header-title-breadcrumb`, {
+      [`${settings.pkg.prefix}--page-header-title-breadcrumb-show`]: titleClipped && refs?.titleRef
+    })
+  }), 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__*/React.forwardRef((_ref10, ref) => {
+  let {
+    renderOverflowBreadcrumb,
+    className,
+    children,
+    ...other
+  } = _ref10;
+  const [hiddenBreadcrumbs, setHiddenBreadcrumbs] = React.useState([]);
+  const fallbackRef = React.useRef(null);
+  const componentRef = ref ?? fallbackRef;
+
+  // Initialize overflow resize handler
+  const carbonPrefix = react.usePrefix();
+  React.useEffect(() => {
+    if (!componentRef) {
+      return;
+    }
+    const breadcrumbList = componentRef?.current.querySelector(`.${carbonPrefix}--breadcrumb`);
+    overflowHandler.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.Children.toArray(children).filter(child => {
+      if (/*#__PURE__*/React.isValidElement(child)) {
+        return child.type === react.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.cloneElement(overflowBreadcrumb, {
+        key: 'cloned overflow breadcrumb item',
+        'data-fixed': true,
+        className: cx(`${settings.pkg.prefix}--page-header-breadcrumb-overflow-item`, {
+          [`${settings.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.createElement(react.Breadcrumb, _rollupPluginBabelHelpers.extends({
+    className: cx(className, `${settings.pkg.prefix}--page-header-breadcrumb-overflow`),
+    ref: componentRef
+  }, other), renderChildren());
+});
 
 /**
  * -------
@@ -473,18 +715,30 @@ const HeroImage = PageHeaderHeroImage;
 HeroImage.displayName = 'PageHeaderHeroImage';
 const TabBar = PageHeaderTabBar;
 TabBar.displayName = 'PageHeaderTabBar';
+const ScrollButton = PageHeaderScrollButton;
+ScrollButton.displayName = 'PageHeaderScrollButton';
+const TitleBreadcrumb = PageHeaderTitleBreadcrumb;
+TitleBreadcrumb.displayName = 'PageHeaderTitleBreadcrumb';
+const BreadcrumbOverflow = PageHeaderBreadcrumbOverflow;
+BreadcrumbOverflow.displayName = 'PageHeaderBreadcrumbOverflow';
 
 exports.BreadcrumbBar = BreadcrumbBar;
+exports.BreadcrumbOverflow = BreadcrumbOverflow;
 exports.Content = Content;
 exports.ContentPageActions = ContentPageActions;
 exports.ContentText = ContentText;
 exports.HeroImage = HeroImage;
 exports.PageHeader = PageHeader;
 exports.PageHeaderBreadcrumbBar = PageHeaderBreadcrumbBar;
+exports.PageHeaderBreadcrumbOverflow = PageHeaderBreadcrumbOverflow;
 exports.PageHeaderContent = PageHeaderContent;
 exports.PageHeaderContentPageActions = PageHeaderContentPageActions;
 exports.PageHeaderContentText = PageHeaderContentText;
 exports.PageHeaderHeroImage = PageHeaderHeroImage;
+exports.PageHeaderScrollButton = PageHeaderScrollButton;
 exports.PageHeaderTabBar = PageHeaderTabBar;
+exports.PageHeaderTitleBreadcrumb = PageHeaderTitleBreadcrumb;
 exports.Root = Root;
+exports.ScrollButton = ScrollButton;
 exports.TabBar = TabBar;
+exports.TitleBreadcrumb = TitleBreadcrumb;

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

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2025, 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 { RefObject } from 'react';
+/**
+ * -------------
+ * Context setup
+ * -------------
+ */
+export type PageHeaderRefs = {
+    contentRef?: RefObject<HTMLDivElement | null>;
+    titleRef?: RefObject<HTMLHeadingElement | null>;
+};
+type PageHeaderContextType = {
+    refs?: PageHeaderRefs;
+    setRefs: React.Dispatch<React.SetStateAction<PageHeaderRefs>>;
+    fullyCollapsed?: boolean;
+    titleClipped?: boolean;
+};
+export declare const PageHeaderContext: import("react").Context<PageHeaderContextType | undefined>;
+export declare function usePageHeader(): PageHeaderContextType;
+export {};

package/lib/components/PageHeader/next/context.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+var React = require('react');
+
+/**
+ * -------------
+ * Context setup
+ * -------------
+ */
+
+const PageHeaderContext = /*#__PURE__*/React.createContext({
+  fullyCollapsed: false,
+  setRefs: () => {},
+  refs: {},
+  titleClipped: false
+});
+function usePageHeader() {
+  const context = React.useContext(PageHeaderContext);
+  if (!context) {
+    throw new Error('Page header context was not provided or hook was used outside of the Page header component.');
+  }
+  return context;
+}
+
+exports.PageHeaderContext = PageHeaderContext;
+exports.usePageHeader = usePageHeader;

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

@@ -1,8 +1,8 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 2025, 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.
  */
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, } from './PageHeader';
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderScrollButtonProps, } from './PageHeader';

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

@@ -0,0 +1,95 @@
+/**
+ * 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.
+ */
+/**
+ * Calculates the size (width or height) of a given HTML element.
+ *
+ * This function performs an expensive calculation by temporarily changing the
+ * display style of the element if it is not currently visible. It then uses
+ * `getBoundingClientRect` to retrieve the size of the element.
+ *
+ * @param el - The HTML element whose size is to be calculated.
+ * @param dimension - The dimension to measure ('width' or 'height').
+ * @returns The size of the element in pixels. Returns 0 if the element is not provided.
+ */
+export declare function getSize(el: HTMLElement, dimension: 'width' | 'height'): number;
+/**
+ * Options for updating the overflow handler.
+ * Determines which items should be visible and which should be hidden
+ * based on the container size, item sizes, and other constraints.
+ */
+export interface UpdateOverflowHandlerOptions {
+    /** The container element that holds the items. */
+    container: HTMLElement;
+    /** An array of item elements to be managed for overflow. */
+    items: HTMLElement[];
+    /** An element that represents the offset, which can be shown or hidden based on overflow. Identified by `data-offset` attribute. */
+    offset: HTMLElement;
+    /** An array of sizes corresponding to each item in the `items` array. */
+    sizes: number[];
+    /** An array of sizes corresponding to each item in the fixed items array. */
+    fixedSizes: number[];
+    /** The size of the offset element. */
+    offsetSize: number;
+    /** The maximum number of items that can be visible at once. If undefined, all items can be visible. */
+    maxVisibleItems?: number;
+    /** The dimension to consider for overflow, either 'width' or 'height'. */
+    dimension: 'width' | 'height';
+    /** A callback function that is called when the visible or hidden items change. */
+    onChange: (visibleItems: HTMLElement[], hiddenItems: HTMLElement[]) => void;
+    /** An array of previously hidden items to compare against the new hidden items. */
+    previousHiddenItems?: HTMLElement[];
+}
+/**
+ * Updates the overflow handler by determining which items should be visible and which should be hidden.
+ *
+ * @param options - Configuration options for updating the overflow handler.
+ * @param options.container - Container for overflowing
+ * @param options.items - Child elements within container
+ * @param options.offset - Children with data-offset attribute
+ * @param options.sizes - Sizes of child elements
+ * @param options.fixedSizes - Fixed sizes of child elements with data-fixed attribute
+ * @param options.offsetSize - Total offset size
+ * @param options.maxVisibleItems - Max visible items
+ * @param options.dimension - width | height used to measure overflow
+ * @param options.onChange - onChange callback
+ * @param options.previousHiddenItems - Array of previously hidden items
+ * @returns An array of hidden items after the update.
+ */
+export declare function updateOverflowHandler({ container, items, offset, sizes, fixedSizes, offsetSize, maxVisibleItems, dimension, onChange, previousHiddenItems, }: UpdateOverflowHandlerOptions): HTMLElement[];
+/**
+ * Options for initializing an overflow handler.
+ */
+export interface OverflowHandlerOptions {
+    /**
+     * The container element that holds the items. along with offset item
+     */
+    container: HTMLElement;
+    /**
+     * Maximum number of visible items. If provided, only this number of items will be shown.
+     */
+    maxVisibleItems?: number;
+    /**
+     * Callback function invoked when the visible and hidden items change.
+     * @param visibleItems - The array of items that are currently visible.
+     * @param hiddenItems - The array of items that are currently hidden.
+     */
+    onChange: (visibleItems: HTMLElement[], hiddenItems: HTMLElement[]) => void;
+    /**
+     * The dimension to consider for overflow calculations. Defaults to 'width'.
+     */
+    dimension?: 'width' | 'height';
+}
+/**
+ * Represents an instance of an overflow handler.
+ */
+export interface OverflowHandler {
+    /**
+     * Disconnects the overflow handler, cleaning up any event listeners or resources.
+     */
+    disconnect: () => void;
+}
+export declare function createOverflowHandler({ container, maxVisibleItems, onChange, dimension, }: OverflowHandlerOptions): OverflowHandler;

package/lib/components/PageHeader/next/overflowHandler.js

@@ -0,0 +1,166 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+/**
+ * Calculates the size (width or height) of a given HTML element.
+ *
+ * This function performs an expensive calculation by temporarily changing the
+ * display style of the element if it is not currently visible. It then uses
+ * `getBoundingClientRect` to retrieve the size of the element.
+ *
+ * @param el - The HTML element whose size is to be calculated.
+ * @param dimension - The dimension to measure ('width' or 'height').
+ * @returns The size of the element in pixels. Returns 0 if the element is not provided.
+ */
+function getSize(el, dimension) {
+  if (!el) {
+    return 0;
+  }
+  const originalDisplay = el.style.display;
+  if (!el.offsetParent && getComputedStyle(el).display === 'none') {
+    el.style.display = 'inline-block';
+  }
+  let size = el.getBoundingClientRect()[dimension];
+  el.style.display = originalDisplay;
+  const computedStyles = getComputedStyle(el);
+  size = dimension === 'width' ? size + parseInt(computedStyles.paddingLeft) + parseInt(computedStyles.paddingRight) + parseInt(computedStyles.marginLeft) + parseInt(computedStyles.marginRight) : size + parseInt(computedStyles.paddingTop) + parseInt(computedStyles.paddingBottom) + parseInt(computedStyles.marginTop) + parseInt(computedStyles.marginBottom);
+  return size;
+}
+
+/**
+ * Options for updating the overflow handler.
+ * Determines which items should be visible and which should be hidden
+ * based on the container size, item sizes, and other constraints.
+ */
+
+/**
+ * Updates the overflow handler by determining which items should be visible and which should be hidden.
+ *
+ * @param options - Configuration options for updating the overflow handler.
+ * @param options.container - Container for overflowing
+ * @param options.items - Child elements within container
+ * @param options.offset - Children with data-offset attribute
+ * @param options.sizes - Sizes of child elements
+ * @param options.fixedSizes - Fixed sizes of child elements with data-fixed attribute
+ * @param options.offsetSize - Total offset size
+ * @param options.maxVisibleItems - Max visible items
+ * @param options.dimension - width | height used to measure overflow
+ * @param options.onChange - onChange callback
+ * @param options.previousHiddenItems - Array of previously hidden items
+ * @returns An array of hidden items after the update.
+ */
+function updateOverflowHandler(_ref) {
+  let {
+    container,
+    items,
+    offset,
+    sizes,
+    fixedSizes,
+    offsetSize,
+    maxVisibleItems,
+    dimension,
+    onChange,
+    previousHiddenItems = []
+  } = _ref;
+  const containerSize = dimension === 'width' ? container.clientWidth : container.clientHeight;
+  let visibleItems = [];
+  let hiddenItems = [];
+  const totalSize = sizes.reduce((sum, size) => sum + size, 0);
+  const totalFixedSize = fixedSizes.reduce((sum, size) => sum + size, 0);
+  if (totalSize + totalFixedSize <= containerSize) {
+    visibleItems = maxVisibleItems ? items.slice(0, maxVisibleItems) : [...items];
+    hiddenItems = maxVisibleItems ? items.slice(maxVisibleItems) : [];
+  } else {
+    const available = containerSize - offsetSize;
+    let accumulated = 0;
+    for (let i = 0; i < items.length; i++) {
+      const size = sizes[i];
+      if (accumulated + size + totalFixedSize <= available && (!maxVisibleItems || visibleItems.length < maxVisibleItems)) {
+        visibleItems.push(items[i]);
+        accumulated += size;
+      } else {
+        hiddenItems.push(items[i]);
+      }
+    }
+  }
+  if (previousHiddenItems.length === hiddenItems.length && previousHiddenItems.every((item, index) => item === hiddenItems[index])) {
+    return previousHiddenItems;
+  }
+  visibleItems.forEach(item => item.removeAttribute('data-hidden'));
+  hiddenItems.forEach(item => item.setAttribute('data-hidden', ''));
+  if (offset) {
+    offset.toggleAttribute('data-hidden', hiddenItems.length === 0);
+  }
+  onChange(visibleItems, hiddenItems);
+  return hiddenItems;
+}
+
+/**
+ * Options for initializing an overflow handler.
+ */
+
+/**
+ * Represents an instance of an overflow handler.
+ */
+
+function createOverflowHandler(_ref2) {
+  let {
+    container,
+    maxVisibleItems,
+    onChange,
+    dimension = 'width'
+  } = _ref2;
+  // Error handling
+  if (!(container instanceof HTMLElement)) {
+    throw new Error('container must be an HTMLElement');
+  }
+  if (typeof onChange !== 'function') {
+    throw new Error('onChange must be a function');
+  }
+  if (maxVisibleItems !== undefined && (!Number.isInteger(maxVisibleItems) || maxVisibleItems <= 0)) {
+    throw new Error('maxVisibleItems must be a positive integer');
+  }
+  const children = Array.from(container.children);
+  const offset = children.find(item => item.hasAttribute('data-offset'));
+  const fixedItems = children.filter(item => item.hasAttribute('data-fixed'));
+  const items = children.filter(item => item !== offset && !fixedItems.includes(item));
+  const fixedSizes = fixedItems.map(item => getSize(item, dimension));
+  const sizes = items.map(item => getSize(item, dimension));
+  const offsetSize = getSize(offset, dimension);
+  let previousHiddenItems = [];
+  function update() {
+    previousHiddenItems = updateOverflowHandler({
+      container,
+      items,
+      offset,
+      sizes,
+      fixedSizes,
+      offsetSize,
+      maxVisibleItems,
+      dimension,
+      onChange,
+      previousHiddenItems
+    });
+  }
+  const resizeObserver = new ResizeObserver(() => {
+    requestAnimationFrame(update);
+  });
+  resizeObserver.observe(container);
+  requestAnimationFrame(update); // Initial update
+
+  return {
+    disconnect() {
+      resizeObserver.disconnect();
+    }
+  };
+}
+
+exports.createOverflowHandler = createOverflowHandler;
+exports.getSize = getSize;
+exports.updateOverflowHandler = updateOverflowHandler;