@festo-ui/react 10.1.1-dev.918 → 10.1.1-dev.920

package/dist/components/tab/Tabs.js

@@ -7,7 +7,7 @@ import { IconWrapper } from "../icon-wrapper/IconWrapper.js";
 import { useTabScroll } from "./useTabScroll.js";
 let nextId = 0;
 const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange, viewType = 'responsive', showDivider = false, ...props }, ref)=>{
-    const [useCompactDensity, setCompactDensity] = useState(true);
+    const [useCompactDensity, setUseCompactDensity] = useState(true);
     const componentId = useRef(`tabs-${++nextId}`);
     const elRef = useRef(null);
     const combinedRef = useForkRef(ref, elRef);
@@ -20,7 +20,7 @@ const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange,
             if ('' === activeId || element.props.active) activeId = `${componentId.current}-tab-panel-${i}`;
         }
     });
-    const [currentId, setId] = useState(activeId);
+    const [currentId, setCurrentId] = useState(activeId);
     const innerChildren = react.Children.map(children, (element, i)=>{
         if (/*#__PURE__*/ isValidElement(element)) {
             const newId = `${componentId.current}-tab-panel-${i}`;
@@ -42,16 +42,16 @@ const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange,
         const { current } = scrollArea;
         if (current) {
             const initialWidth = current.offsetWidth;
-            if (initialWidth > 768) setCompactDensity(false);
+            if (initialWidth > 768) setUseCompactDensity(false);
             observer.current = new ResizeObserver(()=>{
                 const width = current.offsetWidth;
-                if (width > 768 && useCompactDensity) setCompactDensity(false);
-                else if (width <= 768 && !useCompactDensity) setCompactDensity(true);
+                if (width > 768 && useCompactDensity) setUseCompactDensity(false);
+                else if (width <= 768 && !useCompactDensity) setUseCompactDensity(true);
             });
-            if (current) observer.current.observe(current);
+            observer.current.observe(current);
         }
         return ()=>{
-            if (current && observer && observer.current) observer.current.unobserve(current);
+            if (current && observer?.current) observer.current.unobserve(current);
         };
     }, [
         useCompactDensity
@@ -62,7 +62,7 @@ const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange,
             previous: currentId,
             current: id
         });
-        setId(id);
+        setCurrentId(id);
     };
     function handleClick(e, index, id) {
         handleTabScroll(e, index);

package/dist/components/tab/useTabScroll.js

@@ -4,7 +4,7 @@ const useTabScroll = (tabLength, componentId, refs)=>{
     const [style, setStyle] = useState({});
     const [classes, setClasses] = useState('');
     function getScrollContentStyleValue(propName) {
-        return scrollContent.current ? window.getComputedStyle(scrollContent.current).getPropertyValue(propName) : '';
+        return scrollContent.current ? globalThis.getComputedStyle(scrollContent.current).getPropertyValue(propName) : '';
     }
     function calculateCurrentTranslateX() {
         const transformValue = getScrollContentStyleValue('transform');
@@ -13,7 +13,7 @@ const useTabScroll = (tabLength, componentId, refs)=>{
         if (!match) return 0;
         const matrixParams = match[1];
         const [_a, _b, _c, _d, tx, _ty] = matrixParams.split(',');
-        return parseFloat(tx);
+        return Number.parseFloat(tx);
     }
     function getScrollPosition() {
         const currentTranslateX = calculateCurrentTranslateX();
@@ -42,13 +42,8 @@ const useTabScroll = (tabLength, componentId, refs)=>{
             scrollDelta
         };
     }
-    function getAnimatingScrollPosition() {
-        const currentTranslateX = calculateCurrentTranslateX();
-        const scrollLeft = scrollArea.current?.scrollLeft ?? 0;
-        return scrollLeft - currentTranslateX;
-    }
     function stopScrollAnimation() {
-        const currentScrollPosition = getAnimatingScrollPosition();
+        const currentScrollPosition = getScrollPosition();
         setClasses('');
         setStyle({
             transform: 'translateX(0px)'
@@ -75,19 +70,6 @@ const useTabScroll = (tabLength, componentId, refs)=>{
         const scrollOperation = getIncrementScrollOperation(scrollXIncrement);
         animate(scrollOperation);
     }
-    function computeDimensions(tab) {
-        const rootWidth = tab.offsetWidth;
-        const rootLeft = tab.offsetLeft;
-        const tabContent = tab.querySelector('.fr-tab-content');
-        const contentWidth = tabContent?.offsetWidth ?? 0;
-        const contentLeft = tabContent?.offsetLeft ?? 0;
-        return {
-            contentLeft: rootLeft + contentLeft,
-            contentRight: rootLeft + contentLeft + contentWidth,
-            rootLeft,
-            rootRight: rootLeft + rootWidth
-        };
-    }
     function calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth) {
         const nextTab = elRef.current?.querySelector(`#${componentId}-tab-${nextIndex}`);
         if (null == nextTab) return 0;
@@ -99,16 +81,6 @@ const useTabScroll = (tabLength, componentId, refs)=>{
         if (nextIndex < index) return Math.min(leftIncrement, 0);
         return Math.max(rightIncrement, 0);
     }
-    function findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
-        const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
-        const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
-        const relativeRootDelta = relativeRootLeft + relativeRootRight;
-        const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
-        const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
-        if (leftEdgeIsCloser) return index - 1;
-        if (rightEdgeIsCloser) return index + 1;
-        return -1;
-    }
     function indexIsInRange(index) {
         return index >= 0 && index < tabLength;
     }
@@ -148,4 +120,27 @@ const useTabScroll = (tabLength, componentId, refs)=>{
         style
     ];
 };
+function computeDimensions(tab) {
+    const rootWidth = tab.offsetWidth;
+    const rootLeft = tab.offsetLeft;
+    const tabContent = tab.querySelector('.fr-tab-content');
+    const contentWidth = tabContent?.offsetWidth ?? 0;
+    const contentLeft = tabContent?.offsetLeft ?? 0;
+    return {
+        contentLeft: rootLeft + contentLeft,
+        contentRight: rootLeft + contentLeft + contentWidth,
+        rootLeft,
+        rootRight: rootLeft + rootWidth
+    };
+}
+function findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
+    const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
+    const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
+    const relativeRootDelta = relativeRootLeft + relativeRootRight;
+    const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
+    const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
+    if (leftEdgeIsCloser) return index - 1;
+    if (rightEdgeIsCloser) return index + 1;
+    return -1;
+}
 export { useTabScroll };

package/dist/forms/segment/Segment.js

@@ -15,11 +15,10 @@ const Segment = /*#__PURE__*/ forwardRef(({ children, legend, config, onChange,
     let useIconAndText = false;
     let tmpValue = '';
     Children.forEach(children, (child, index)=>{
-        if (!/*#__PURE__*/ isValidElement(child)) return null;
+        if (!/*#__PURE__*/ isValidElement(child)) return;
         if (0 === index && null !== child.props.icon) if (innerConfig.iconOnly) useIcon = true;
         else useIconAndText = true;
         if (child.props.checked) tmpValue = child.props.value;
-        return null;
     });
     const [value, setValue] = useControlled({
         controlled: valueProps,

package/dist/forms/select/Select.d.ts

@@ -1,5 +1,4 @@
-import type { ReactNode } from 'react';
-import { type Ref } from 'react';
+import { type ReactNode, type Ref } from 'react';
 export interface SelectOption<T> {
     readonly data: T;
     readonly label: ReactNode;

package/package.json

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