@carbon/ibm-products 2.71.1 → 2.72.0

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

@@ -6,15 +6,21 @@
  */
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useLayoutEffect, useMemo, useEffect, useCallback } from 'react';
+import React__default, { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
-import { Grid, Column, DefinitionTooltip, unstable_Text, Tag, Popover, OperationalTag, PopoverContent, MenuButton, MenuItem, AspectRatio } from '@carbon/react';
+import { Grid, Column, DefinitionTooltip, unstable_Text, IconButton, BreadcrumbItem, usePrefix, Breadcrumb, Tag, Popover, OperationalTag, PopoverContent, MenuButton, MenuItem, AspectRatio } from '@carbon/react';
 import { breakpoints } from '@carbon/layout';
 import { blockClass } from '../PageHeaderUtils.js';
-import { createOverflowHandler } from '@carbon/utilities';
+import { createOverflowHandler } from './overflowHandler.js';
+import { createOverflowHandler as createOverflowHandler$1 } from '@carbon/utilities';
 import { useOverflowItems } from '../../../global/js/hooks/useOverflowItems/useOverflowItems.js';
 import { useId } from '../../../global/js/utils/useId.js';
+import { ChevronUp } from '@carbon/react/icons';
+import { PageHeaderContext, usePageHeader } from './context.js';
+import { getHeaderOffset, scrollableAncestor } from './utils.js';
+import { pkg } from '../../../settings.js';
+import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver.js';
 
 /**
  * ----------
@@ -28,14 +34,91 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
     children,
     ...other
   } = _ref;
+  const [refs, setRefs] = useState({});
+  const tempRef = useRef(null);
+  const componentRef = ref ?? tempRef;
   const classNames = cx({
     [`${blockClass}`]: true,
     [`${blockClass}__next`]: true
   }, className);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+
+  // Used to set CSS custom property with PageHeaderContent height to be used
+  // for sticky positioning
+  useResizeObserver(componentRef, () => {
+    if (componentRef?.current && refs?.contentRef?.current) {
+      const pageHeaderContentHeight = refs?.contentRef?.current?.offsetHeight;
+      const totalHeaderOffset = getHeaderOffset(componentRef?.current);
+      componentRef?.current.style.setProperty(`--${pkg.prefix}-page-header-header-top`, `${(Math.round(pageHeaderContentHeight) - totalHeaderOffset) * -1}px`);
+      componentRef?.current.style.setProperty(`--${pkg.prefix}-page-header-breadcrumb-top`, `${totalHeaderOffset}px`);
+    }
+  });
+  const [fullyCollapsed, setFullyCollapsed] = useState(false);
+  const [titleClipped, setTitleClipped] = 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.
+  useEffect(() => {
+    if (!refs?.contentRef || !componentRef?.current) {
+      return;
+    }
+    const totalHeaderOffset = 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__default.createElement(PageHeaderContext.Provider, {
+    value: {
+      refs,
+      setRefs,
+      fullyCollapsed,
+      titleClipped
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: classNames,
-    ref: ref
-  }, other), children);
+    ref: componentRef
+  }, other), children));
 });
 PageHeader.displayName = 'PageHeader';
 
@@ -102,10 +185,25 @@ const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHe
     pageActions,
     ...other
   } = _ref3;
+  const contentRef = useRef(null);
+  const componentRef = ref ?? contentRef;
+  const {
+    setRefs
+  } = 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
+  }, []);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const isEllipsisActive = element => {
     setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
@@ -116,7 +214,7 @@ const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHe
   }, [title]);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classNames,
-    ref: ref
+    ref: componentRef
   }, other), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
     lg: 16,
     md: 8,
@@ -209,7 +307,7 @@ const PageHeaderContentPageActions = _ref4 => {
     if (!containerRef.current || !Array.isArray(actions)) {
       return;
     }
-    createOverflowHandler({
+    createOverflowHandler$1({
       container: containerRef.current,
       // exclude the hidden menu button from children
       maxVisibleItems: containerRef.current.children.length - 1,
@@ -358,11 +456,16 @@ const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHea
     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.length) {
     return /*#__PURE__*/React__default.createElement("div", _extends({
@@ -372,7 +475,7 @@ const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHea
       lg: 16,
       md: 8,
       sm: 4
-    }, children)));
+    }, children, renderScroller())));
   }
   const [openPopover, setOpenPopover] = useState(false);
   const tagSize = tags[0]?.size || 'md';
@@ -447,10 +550,149 @@ const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHea
     md: 8,
     sm: 4
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__tab-bar--tablist`
-  }, children, tags.length > 0 && renderTags()))));
+    className: cx(`${blockClass}__tab-bar--tablist`, {
+      [`${pkg.prefix}--page-header__tab-bar--with-scroller`]: !!scroller
+    })
+  }, children, tags.length > 0 && renderTags(), renderScroller()))));
 });
 PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+const PageHeaderScrollButton = /*#__PURE__*/React__default.forwardRef(function PageHeaderExpander(_ref8, ref) {
+  let {
+    className,
+    children,
+    label,
+    onClick,
+    collapseText = 'Collapse',
+    expandText = 'Expand',
+    ...other
+  } = _ref8;
+  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((_ref9, ref) => {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref9;
+  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
+    })
+  }), 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((_ref10, ref) => {
+  let {
+    renderOverflowBreadcrumb,
+    className,
+    children,
+    ...other
+  } = _ref10;
+  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());
+});
 
 /**
  * -------
@@ -471,5 +713,11 @@ 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';
 
-export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar };
+export { BreadcrumbBar, BreadcrumbOverflow, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderBreadcrumbOverflow, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderScrollButton, PageHeaderTabBar, PageHeaderTitleBreadcrumb, Root, ScrollButton, TabBar, TitleBreadcrumb };

package/es/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/es/components/PageHeader/next/context.js

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+
+import { createContext, useContext } from 'react';
+
+/**
+ * -------------
+ * Context setup
+ * -------------
+ */
+
+const PageHeaderContext = /*#__PURE__*/createContext({
+  fullyCollapsed: false,
+  setRefs: () => {},
+  refs: {},
+  titleClipped: false
+});
+function usePageHeader() {
+  const context = 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;
+}
+
+export { PageHeaderContext, usePageHeader };

package/es/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/es/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/es/components/PageHeader/next/overflowHandler.js

@@ -0,0 +1,162 @@
+/**
+ * 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.
+ */
+
+/**
+ * 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();
+    }
+  };
+}
+
+export { createOverflowHandler, getSize, updateOverflowHandler };