@festo-ui/react 10.0.0-dev.826 → 10.0.0-dev.828

package/dist/components/breadcrumb/Breadcrumb.js

@@ -1,27 +1,20 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
-import { Children, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useRef, useState } from "react";
+import { Children, cloneElement, forwardRef, isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { useForkRef } from "../../utils/useForkRef.js";
 const Breadcrumb = /*#__PURE__*/ forwardRef(({ locations, onClick, children, className, ...props }, ref)=>{
-    const containerRef = useRef(null);
-    const measureRef = useRef(null);
-    const combinedRef = useForkRef(ref, containerRef);
+    const navRef = useRef(null);
+    const combinedRef = useForkRef(ref, navRef);
     const [isMobile, setIsMobile] = useState(false);
-    function isValidHtmlChildElement(child) {
-        return /*#__PURE__*/ isValidElement(child);
-    }
-    const childrenList = Children.toArray(children).filter(isValidHtmlChildElement);
-    const listItems = locations ? locations.map((location, index)=>{
-        const isCurrent = index === locations.length - 1;
-        return /*#__PURE__*/ jsx("li", {
+    const childrenList = Children.toArray(children).filter((child)=>/*#__PURE__*/ isValidElement(child));
+    const listItems = locations ? locations.map((location, index)=>/*#__PURE__*/ jsx("li", {
             children: /*#__PURE__*/ jsx("a", {
                 href: location.url,
-                onClick: (e)=>onClick ? onClick(e) : void 0,
-                "aria-current": isCurrent ? 'page' : void 0,
+                onClick: (e)=>onClick?.(e),
+                "aria-current": index === locations.length - 1 ? 'page' : void 0,
                 children: location.label
             })
-        }, location.url);
-    }) : childrenList.map((child, index)=>{
+        }, location.url)) : childrenList.map((child, index)=>{
         const isCurrent = index === childrenList.length - 1;
         const content = isCurrent ? /*#__PURE__*/ cloneElement(child, {
             'aria-current': child.props['aria-current'] ?? 'page'
@@ -31,61 +24,37 @@ const Breadcrumb = /*#__PURE__*/ forwardRef(({ locations, onClick, children, cla
         }, child.key ?? index);
     });
     const measure = useCallback(()=>{
-        const container = containerRef.current;
-        const measureElement = measureRef.current;
-        if (!container || !measureElement) return;
-        const availableWidth = container.clientWidth;
-        const contentWidth = measureElement.scrollWidth;
-        const nextIsMobile = contentWidth > availableWidth;
-        setIsMobile((previous)=>previous === nextIsMobile ? previous : nextIsMobile);
+        const nav = navRef.current;
+        const ol = nav?.querySelector('ol');
+        if (!nav || !ol) return;
+        const wasMobile = nav.classList.contains('fwe-breadcrumb--mobile');
+        if (wasMobile) nav.classList.remove('fwe-breadcrumb--mobile');
+        const lastItem = ol.lastElementChild;
+        if (lastItem) lastItem.style.flexShrink = '0';
+        const containerRight = ol.getBoundingClientRect().right;
+        const nextIsMobile = Array.from(ol.children).some((item)=>item.getBoundingClientRect().right > containerRight);
+        if (lastItem) lastItem.style.flexShrink = '';
+        if (wasMobile) nav.classList.add('fwe-breadcrumb--mobile');
+        setIsMobile(nextIsMobile);
     }, []);
-    useEffect(()=>{
+    useLayoutEffect(()=>{
         measure();
-    });
-    useEffect(()=>{
-        const container = containerRef.current;
-        const measureElement = measureRef.current;
-        if (!container || !measureElement) return;
-        if ('undefined' == typeof ResizeObserver) {
-            window.addEventListener('resize', measure);
-            return ()=>window.removeEventListener('resize', measure);
-        }
+        const nav = navRef.current;
+        if (!nav) return;
         const observer = new ResizeObserver(()=>measure());
-        observer.observe(container);
-        observer.observe(measureElement);
+        observer.observe(nav);
         return ()=>observer.disconnect();
     }, [
         measure
     ]);
-    return /*#__PURE__*/ jsxs("div", {
-        className: className,
-        children: [
-            /*#__PURE__*/ jsx("nav", {
-                className: classnames('fwe-breadcrumb'),
-                ref: measureRef,
-                style: {
-                    position: 'absolute',
-                    visibility: 'hidden',
-                    pointerEvents: 'none',
-                    whiteSpace: 'nowrap',
-                    height: 0,
-                    overflow: 'hidden'
-                },
-                "aria-hidden": "true",
-                children: /*#__PURE__*/ jsx("ol", {
-                    children: listItems
-                })
-            }),
-            /*#__PURE__*/ jsx("nav", {
-                ...props,
-                className: classnames('fwe-breadcrumb', isMobile && 'fwe-breadcrumb--mobile'),
-                ref: combinedRef,
-                "aria-label": "Breadcrumb",
-                children: /*#__PURE__*/ jsx("ol", {
-                    children: listItems
-                })
-            })
-        ]
+    return /*#__PURE__*/ jsx("nav", {
+        ...props,
+        className: classnames('fwe-breadcrumb', isMobile && 'fwe-breadcrumb--mobile', className),
+        ref: combinedRef,
+        "aria-label": "Breadcrumb",
+        children: /*#__PURE__*/ jsx("ol", {
+            children: listItems
+        })
     });
 });
 Breadcrumb.displayName = 'Breadcrumb';

package/dist/components/popovers/popover/Popover.js

@@ -5,7 +5,7 @@ import classnames from "classnames";
 import { forwardRef, useRef } from "react";
 import { useControlled } from "../../../utils/useControlled.js";
 import { useForkRef } from "../../../utils/useForkRef.js";
-const Popover = /*#__PURE__*/ forwardRef(({ children, className, 'data-testid': dataTestId, style, containerClassName, content, position, fallbackPositions, isOpen, openOnHover = false, openByDefault = false, onChange, flip: enableFlip = true, showArrow = true, onTriggerClick, stopPropagation = false, ...props }, ref)=>{
+const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containerClassName, content, position, fallbackPositions, isOpen, openOnHover = false, openByDefault = false, onChange, flip: enableFlip = true, showArrow = true, onTriggerClick, stopPropagation = false, ...props }, ref)=>{
     const [showPopover, setShowPopover] = useControlled({
         controlled: isOpen,
         default: openByDefault
@@ -83,7 +83,6 @@ const Popover = /*#__PURE__*/ forwardRef(({ children, className, 'data-testid':
                             height: 8
                         }),
                         /*#__PURE__*/ jsx("div", {
-                            "data-testid": dataTestId,
                             className: classnames('fwe-popover', containerClassName),
                             children: content
                         })

package/dist/components/popovers/popover-menu/popover-menu-item/PopoverMenuItem.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithoutRef } from 'react';
 export interface PopoverMenuItemProps extends Omit<ComponentPropsWithoutRef<'button'>, 'onClick'> {
+    readonly 'data-testid'?: string;
     readonly text: string;
     readonly icon: React.ReactNode;
     readonly onClick?: (data: unknown) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "10.0.0-dev.826",
+  "version": "10.0.0-dev.828",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",