@festo-ui/react 9.0.0-dev.659 → 9.0.0-dev.662

package/lib/components/popovers/popover/Popover.d.ts

@@ -6,6 +6,7 @@ export interface PopoverProps extends ClassNamePropsWithChildren {
     popoverContent: React.ReactNode;
     position?: Placement;
     fallbackPositions?: Placement[];
+    defaultOpen?: boolean;
     open?: boolean;
     onStatusChange?: (status: boolean) => void;
     wrapper?: (children: React.ReactNode) => React.ReactNode;
@@ -13,6 +14,7 @@ export interface PopoverProps extends ClassNamePropsWithChildren {
     containerClassName?: string;
     stopPropagation?: boolean;
     arrow?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
-declare function Popover({ popoverContent, children, position, fallbackPositions, open, onStatusChange, wrapper, className, flip, containerClassName, stopPropagation, arrow, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+declare function Popover({ popoverContent, children, position, fallbackPositions, defaultOpen, open, onStatusChange, wrapper, className, flip, containerClassName, stopPropagation, arrow, onClick, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
 export default Popover;

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

@@ -1,8 +1,9 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { usePopper } from "react-popper";
 import classNames from "classnames";
 import useOnClickOutside from "../../../helper/useOnClickOutside.js";
 import useForkRef from "../../../helper/useForkRef.js";
+import useControlled from "../../../helper/useControlled.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function Popover(_ref) {
   let {
@@ -10,28 +11,27 @@ function Popover(_ref) {
     children,
     position,
     fallbackPositions,
-    open = false,
+    defaultOpen = false,
+    open,
     onStatusChange,
     wrapper,
     className,
     flip = true,
     containerClassName,
     stopPropagation,
-    arrow = true
+    arrow = true,
+    onClick
   } = _ref;
-  const [showPopper, setShowPopper] = useState(open);
+  const [showPopper, setShowPopper] = useControlled({
+    controlled: open,
+    default: defaultOpen
+  });
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
   const referenceElement = useRef(null);
   const popperElRef = useRef(null);
   const combinedRef = useForkRef(popperElRef, setPopperElement);
   const classes = classNames(className);
-  const isControlled = onStatusChange !== undefined;
-  useEffect(() => {
-    if (isControlled) {
-      setShowPopper(open);
-    }
-  }, [open, isControlled]);
   const {
     styles,
     attributes
@@ -59,9 +59,7 @@ function Popover(_ref) {
       e?.stopPropagation();
       e?.preventDefault();
     }
-    if (!isControlled) {
-      setShowPopper(status);
-    }
+    setShowPopper(status);
     onStatusChange?.(status);
   };
   function closePopover(event) {
@@ -81,6 +79,14 @@ function Popover(_ref) {
       handleChange(undefined, true);
     }
   }
+  function handleTriggerClick(event) {
+    onClick?.(event);
+    if (event.defaultPrevented) {
+      setShowPopper(!showPopper);
+    } else {
+      handleChange(event, !showPopper);
+    }
+  }
   const childrenWrapper = /*#__PURE__*/_jsx("div", {
     tabIndex: 0,
     role: "button",
@@ -88,7 +94,7 @@ function Popover(_ref) {
     ref: referenceElement,
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
-    onClick: e => handleChange(e, !showPopper),
+    onClick: handleTriggerClick,
     children: children
   });
   return /*#__PURE__*/_jsxs(_Fragment, {

package/lib/forms/text-area/TextArea.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { ClassNameProps } from "../../helper/types";
+import type { ClassNameProps } from "../../helper/types";
 import "./TextArea.scss";
-interface TextAreaProps extends ClassNameProps {
+export interface TextAreaProps extends ClassNameProps {
     disabled?: boolean;
     required?: boolean;
     readonly?: boolean;
@@ -14,9 +14,10 @@ interface TextAreaProps extends ClassNameProps {
     error?: string;
     value?: string;
     defaultValue?: string;
+    name?: string;
     rows?: number;
     maxLength?: number;
     id?: string;
 }
-declare function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, rows, maxLength, className, id: idProps, defaultValue, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+declare function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, defaultValue, name, rows, maxLength, className, id: idProps, }: Readonly<TextAreaProps>): import("react/jsx-runtime").JSX.Element;
 export default TextArea;

package/lib/forms/text-area/TextArea.js

@@ -15,11 +15,12 @@ function TextArea(_ref) {
     error,
     hint,
     value,
+    defaultValue,
+    name,
     rows,
-    maxLength = 0,
+    maxLength,
     className,
-    id: idProps,
-    defaultValue
+    id: idProps
   } = _ref;
   const controlled = value !== undefined;
   const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
@@ -43,7 +44,7 @@ function TextArea(_ref) {
       const newHeight = Math.max(minRows * 24, shadow.scrollHeight);
       setHeight(newHeight + 4 + 4 + 1);
     }
-  }, [innerValue]);
+  }, []);
   function handleChange(event) {
     if (!controlled) {
       setInnerValue(event.target.value);
@@ -63,6 +64,7 @@ function TextArea(_ref) {
         })
       },
       ref: ref,
+      name: name,
       className: classNames("fr-textarea", `fwe-row-${rows}`),
       disabled: disabled,
       readOnly: readonly,
@@ -73,8 +75,8 @@ function TextArea(_ref) {
       onInput: onInput,
       onBlur: onBlur,
       maxLength: maxLength,
-      defaultValue: innerValue,
-      value: innerValue,
+      defaultValue: defaultValue,
+      value: value,
       id: id
     }), /*#__PURE__*/_jsx("textarea", {
       style: {
@@ -98,7 +100,7 @@ function TextArea(_ref) {
     }), error !== undefined && /*#__PURE__*/_jsx("span", {
       className: "fwe-input-text-invalid",
       children: error
-    }), maxLength > 0 && innerValue !== undefined && /*#__PURE__*/_jsxs("span", {
+    }), !!maxLength && innerValue !== undefined && /*#__PURE__*/_jsxs("span", {
       className: "fwe-input-text-count",
       children: [innerValue.length, " /", maxLength]
     })]

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

@@ -1,5 +1,5 @@
-import React from "react";
-interface TextInputProps {
+import type React from "react";
+export interface TextInputProps {
     disabled?: boolean;
     required?: boolean;
     readonly?: boolean;
@@ -9,6 +9,8 @@ interface TextInputProps {
     min?: number;
     max?: number;
     value?: string;
+    defaultValue?: string;
+    name?: string;
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
     onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState, useRef } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 import classNames from "classnames";
 import useId from "../../helper/useId.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,6 +16,8 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     step,
     type,
     value,
+    defaultValue,
+    name,
     error,
     hint,
     label,
@@ -26,11 +28,7 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...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(() => {
@@ -44,13 +42,12 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     return undefined;
   }, [autoFocus]);
   const supported = ["text", "number", "password", "datetime-local"];
-  const innerType = type && supported.indexOf(type) !== -1 ? type : "text";
+  const innerType = type && supported.includes(type) ? type : "text";
   const labelClasses = classNames("fwe-input-text", {
     "fwe-input-text-icon": icon
   }, labelClassName);
   const hintClasses = classNames("fwe-input-text-info");
   function handleChange(e) {
-    setInnerValue(e.target.value);
     if (props.onChange) {
       props.onChange(e);
     }
@@ -60,6 +57,7 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     htmlFor: id,
     ref: ref,
     children: [/*#__PURE__*/_jsx("input", {
+      name: name,
       disabled: disabled,
       required: required,
       readOnly: readonly,
@@ -73,7 +71,8 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       onFocus: onFocus,
       onInput: onInput,
       type: innerType,
-      value: innerValue,
+      value: value,
+      defaultValue: defaultValue,
       id: id,
       ref: inputRef,
       ...props

package/node/lib/components/popovers/popover/Popover.js

@@ -9,6 +9,7 @@ var _reactPopper = require("react-popper");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _useOnClickOutside = _interopRequireDefault(require("../../../helper/useOnClickOutside.js"));
 var _useForkRef = _interopRequireDefault(require("../../../helper/useForkRef.js"));
+var _useControlled = _interopRequireDefault(require("../../../helper/useControlled.js"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -19,28 +20,27 @@ function Popover(_ref) {
     children,
     position,
     fallbackPositions,
-    open = false,
+    defaultOpen = false,
+    open,
     onStatusChange,
     wrapper,
     className,
     flip = true,
     containerClassName,
     stopPropagation,
-    arrow = true
+    arrow = true,
+    onClick
   } = _ref;
-  const [showPopper, setShowPopper] = (0, _react.useState)(open);
+  const [showPopper, setShowPopper] = (0, _useControlled.default)({
+    controlled: open,
+    default: defaultOpen
+  });
   const [popperElement, setPopperElement] = (0, _react.useState)(null);
   const [arrowElement, setArrowElement] = (0, _react.useState)(null);
   const referenceElement = (0, _react.useRef)(null);
   const popperElRef = (0, _react.useRef)(null);
   const combinedRef = (0, _useForkRef.default)(popperElRef, setPopperElement);
   const classes = (0, _classnames.default)(className);
-  const isControlled = onStatusChange !== undefined;
-  (0, _react.useEffect)(() => {
-    if (isControlled) {
-      setShowPopper(open);
-    }
-  }, [open, isControlled]);
   const {
     styles,
     attributes
@@ -68,9 +68,7 @@ function Popover(_ref) {
       e?.stopPropagation();
       e?.preventDefault();
     }
-    if (!isControlled) {
-      setShowPopper(status);
-    }
+    setShowPopper(status);
     onStatusChange?.(status);
   };
   function closePopover(event) {
@@ -90,6 +88,14 @@ function Popover(_ref) {
       handleChange(undefined, true);
     }
   }
+  function handleTriggerClick(event) {
+    onClick?.(event);
+    if (event.defaultPrevented) {
+      setShowPopper(!showPopper);
+    } else {
+      handleChange(event, !showPopper);
+    }
+  }
   const childrenWrapper = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     tabIndex: 0,
     role: "button",
@@ -97,7 +103,7 @@ function Popover(_ref) {
     ref: referenceElement,
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
-    onClick: e => handleChange(e, !showPopper),
+    onClick: handleTriggerClick,
     children: children
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/node/lib/forms/text-area/TextArea.js

@@ -24,11 +24,12 @@ function TextArea(_ref) {
     error,
     hint,
     value,
+    defaultValue,
+    name,
     rows,
-    maxLength = 0,
+    maxLength,
     className,
-    id: idProps,
-    defaultValue
+    id: idProps
   } = _ref;
   const controlled = value !== undefined;
   const [innerValue, setInnerValue] = (0, _react.useState)(controlled ? value : defaultValue);
@@ -52,7 +53,7 @@ function TextArea(_ref) {
       const newHeight = Math.max(minRows * 24, shadow.scrollHeight);
       setHeight(newHeight + 4 + 4 + 1);
     }
-  }, [innerValue]);
+  }, []);
   function handleChange(event) {
     if (!controlled) {
       setInnerValue(event.target.value);
@@ -72,6 +73,7 @@ function TextArea(_ref) {
         })
       },
       ref: ref,
+      name: name,
       className: (0, _classnames.default)("fr-textarea", `fwe-row-${rows}`),
       disabled: disabled,
       readOnly: readonly,
@@ -82,8 +84,8 @@ function TextArea(_ref) {
       onInput: onInput,
       onBlur: onBlur,
       maxLength: maxLength,
-      defaultValue: innerValue,
-      value: innerValue,
+      defaultValue: defaultValue,
+      value: value,
       id: id
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
       style: {
@@ -107,7 +109,7 @@ function TextArea(_ref) {
     }), error !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "fwe-input-text-invalid",
       children: error
-    }), maxLength > 0 && innerValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    }), !!maxLength && innerValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       className: "fwe-input-text-count",
       children: [innerValue.length, " /", maxLength]
     })]

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

@@ -4,13 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _useId = _interopRequireDefault(require("../../helper/useId.js"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     disabled,
@@ -25,6 +23,8 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     step,
     type,
     value,
+    defaultValue,
+    name,
     error,
     hint,
     label,
@@ -35,11 +35,7 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...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)(() => {
@@ -53,13 +49,12 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     return undefined;
   }, [autoFocus]);
   const supported = ["text", "number", "password", "datetime-local"];
-  const innerType = type && supported.indexOf(type) !== -1 ? type : "text";
+  const innerType = type && supported.includes(type) ? type : "text";
   const labelClasses = (0, _classnames.default)("fwe-input-text", {
     "fwe-input-text-icon": icon
   }, labelClassName);
   const hintClasses = (0, _classnames.default)("fwe-input-text-info");
   function handleChange(e) {
-    setInnerValue(e.target.value);
     if (props.onChange) {
       props.onChange(e);
     }
@@ -69,6 +64,7 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     htmlFor: id,
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      name: name,
       disabled: disabled,
       required: required,
       readOnly: readonly,
@@ -82,7 +78,8 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       onFocus: onFocus,
       onInput: onInput,
       type: innerType,
-      value: innerValue,
+      value: value,
+      defaultValue: defaultValue,
       id: id,
       ref: inputRef,
       ...props

package/package.json

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