@festo-ui/react 8.2.0-dev.627 → 8.2.0-dev.629

package/lib/components/modals/ModalBase.js

@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 
 import classNames from "classnames";
-import { forwardRef, useEffect, useRef } from "react";
+import { forwardRef, useEffect, useRef, useCallback } from "react";
 import ReactDOM from "react-dom";
 import { CSSTransition } from "react-transition-group";
 import { RemoveScroll } from "react-remove-scroll";
@@ -24,6 +24,8 @@ const ModalBase = /*#__PURE__*/forwardRef((_ref, ref) => {
   const mouseDownOnBackdropActive = useRef(false);
   const allRefs = useForkRef(ref, modalRef);
   const container = modalRef?.current?.ownerDocument || document;
+
+  // Handle Escape key to close modal
   useEffect(() => {
     const handleKeyDown = event => {
       if (event.key === "Escape" && isOpen) {
@@ -33,6 +35,52 @@ const ModalBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     container.addEventListener("keydown", handleKeyDown);
     return () => container.removeEventListener("keydown", handleKeyDown);
   }, [onClose, isOpen, container]);
+
+  // Focus trap implementation
+  const handleTabKey = useCallback(e => {
+    if (e.key === "Tab" && modalRef.current && isOpen) {
+      // Query for all focusable elements
+      const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      // If shift+tab and we're on the first element, move to the last
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement?.focus();
+      }
+      // If tab and we're on the last element, move to the first
+      else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement?.focus();
+      }
+    }
+  }, [isOpen]);
+
+  // Set up the focus trap listener
+  useEffect(() => {
+    if (isOpen) {
+      container.addEventListener("keydown", handleTabKey);
+
+      // Auto-focus first focusable element when modal opens
+      setTimeout(() => {
+        if (modalRef.current) {
+          const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+
+          // Focus the first input element, or the first focusable element if no input exists
+          const firstInput = Array.from(focusableElements).find(el => el.tagName.toLowerCase() === "input");
+          if (firstInput) {
+            firstInput.focus();
+          } else if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
+        }
+      }, 100);
+    }
+    return () => {
+      container.removeEventListener("keydown", handleTabKey);
+    };
+  }, [isOpen, handleTabKey, container]);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(CSSTransition, {

package/lib/components/modals/Prompt.js

@@ -41,7 +41,8 @@ export default function Prompt(_ref) {
       onChange: handleChange,
       label: label,
       hint: hint,
-      value: innerValue
+      value: innerValue,
+      autoFocus: true
     }),
     ...props,
     children: (cancel || ok) && /*#__PURE__*/_jsxs(ModalFooter, {

package/lib/forms/text-input/TextInput.d.ts

@@ -17,6 +17,7 @@ interface TextInputProps {
     error?: string;
     labelClassName?: string;
     icon?: React.ReactNode;
+    autoFocus?: boolean;
 }
 declare const TextInput: (props: TextInputProps & React.HTMLProps<HTMLInputElement> & React.RefAttributes<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default TextInput;

package/lib/forms/text-input/TextInput.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef, useEffect, useState, useRef } from "react";
 import classNames from "classnames";
 import useId from "../../helper/useId.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -22,13 +22,27 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     labelClassName,
     icon,
     id: idProps,
+    autoFocus,
     ...props
   } = _ref;
   const id = useId(idProps);
   const [innerValue, setInnerValue] = useState(value);
+  const inputRef = useRef(null);
   useEffect(() => {
     setInnerValue(value);
   }, [value]);
+
+  // Programmatically focus the input instead of using autoFocus attribute
+  useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      // Short delay to ensure component is fully rendered
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [autoFocus]);
   const supported = ["text", "number", "password", "datetime-local"];
   const innerType = type && supported.indexOf(type) !== -1 ? type : "text";
   const labelClasses = classNames("fwe-input-text", {
@@ -61,6 +75,7 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       type: innerType,
       value: innerValue,
       id: id,
+      ref: inputRef,
       ...props
     }), icon, /*#__PURE__*/_jsx("span", {
       className: "fwe-input-text-label",

package/node/lib/components/modals/ModalBase.js

@@ -31,6 +31,8 @@ const ModalBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const mouseDownOnBackdropActive = (0, _react.useRef)(false);
   const allRefs = (0, _useForkRef.default)(ref, modalRef);
   const container = modalRef?.current?.ownerDocument || document;
+
+  // Handle Escape key to close modal
   (0, _react.useEffect)(() => {
     const handleKeyDown = event => {
       if (event.key === "Escape" && isOpen) {
@@ -40,6 +42,52 @@ const ModalBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     container.addEventListener("keydown", handleKeyDown);
     return () => container.removeEventListener("keydown", handleKeyDown);
   }, [onClose, isOpen, container]);
+
+  // Focus trap implementation
+  const handleTabKey = (0, _react.useCallback)(e => {
+    if (e.key === "Tab" && modalRef.current && isOpen) {
+      // Query for all focusable elements
+      const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      // If shift+tab and we're on the first element, move to the last
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement?.focus();
+      }
+      // If tab and we're on the last element, move to the first
+      else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement?.focus();
+      }
+    }
+  }, [isOpen]);
+
+  // Set up the focus trap listener
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      container.addEventListener("keydown", handleTabKey);
+
+      // Auto-focus first focusable element when modal opens
+      setTimeout(() => {
+        if (modalRef.current) {
+          const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+
+          // Focus the first input element, or the first focusable element if no input exists
+          const firstInput = Array.from(focusableElements).find(el => el.tagName.toLowerCase() === "input");
+          if (firstInput) {
+            firstInput.focus();
+          } else if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
+        }
+      }, 100);
+    }
+    return () => {
+      container.removeEventListener("keydown", handleTabKey);
+    };
+  }, [isOpen, handleTabKey, container]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {

package/node/lib/components/modals/Prompt.js

@@ -50,7 +50,8 @@ function Prompt(_ref) {
       onChange: handleChange,
       label: label,
       hint: hint,
-      value: innerValue
+      value: innerValue,
+      autoFocus: true
     }),
     ...props,
     children: (cancel || ok) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalFooter.default, {

package/node/lib/forms/text-input/TextInput.js

@@ -31,13 +31,27 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     labelClassName,
     icon,
     id: idProps,
+    autoFocus,
     ...props
   } = _ref;
   const id = (0, _useId.default)(idProps);
   const [innerValue, setInnerValue] = (0, _react.useState)(value);
+  const inputRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     setInnerValue(value);
   }, [value]);
+
+  // Programmatically focus the input instead of using autoFocus attribute
+  (0, _react.useEffect)(() => {
+    if (autoFocus && inputRef.current) {
+      // Short delay to ensure component is fully rendered
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [autoFocus]);
   const supported = ["text", "number", "password", "datetime-local"];
   const innerType = type && supported.indexOf(type) !== -1 ? type : "text";
   const labelClasses = (0, _classnames.default)("fwe-input-text", {
@@ -70,6 +84,7 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       type: innerType,
       value: innerValue,
       id: id,
+      ref: inputRef,
       ...props
     }), icon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "fwe-input-text-label",

package/package.json

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