@festo-ui/react 9.0.0-dev.661 → 9.0.0-dev.663

package/index.d.ts

@@ -33,7 +33,7 @@ export { default as Progress } from "./lib/components/progress/Progress";
 export { default as SearchInput } from "./lib/components/search-input/SearchInput";
 export { default as SearchSuggestion } from "./lib/components/search-input/SearchSuggestion";
 export { default as Snackbar } from "./lib/components/snackbar/Snackbar";
-export { default as SnackbarProvider } from "./lib/components/snackbar/SnackbarProvider";
+export { default as SnackbarProvider, addSnackbar, } from "./lib/components/snackbar/SnackbarProvider";
 export { default as useSnackbar } from "./lib/components/snackbar/useSnackbar";
 export { default as StepHorizontal } from "./lib/components/stepper-horizontal/step-horizontal/StepHorizontal";
 export { default as StepperHorizontal } from "./lib/components/stepper-horizontal/StepperHorizontal";

package/index.js

@@ -33,7 +33,7 @@ export { default as Progress } from "./lib/components/progress/Progress.js";
 export { default as SearchInput } from "./lib/components/search-input/SearchInput.js";
 export { default as SearchSuggestion } from "./lib/components/search-input/SearchSuggestion.js";
 export { default as Snackbar } from "./lib/components/snackbar/Snackbar.js";
-export { default as SnackbarProvider } from "./lib/components/snackbar/SnackbarProvider.js";
+export { default as SnackbarProvider, addSnackbar } from "./lib/components/snackbar/SnackbarProvider.js";
 export { default as useSnackbar } from "./lib/components/snackbar/useSnackbar.js";
 export { default as StepHorizontal } from "./lib/components/stepper-horizontal/step-horizontal/StepHorizontal.js";
 export { default as StepperHorizontal } from "./lib/components/stepper-horizontal/StepperHorizontal.js";

package/lib/components/snackbar/SnackbarProvider.d.ts

@@ -1,7 +1,8 @@
 import { ClassNamePropsWithChildren } from "../../helper/types";
-import { SnackbarConfig } from "./Snackbar";
+import { SnackbarConfig, SnackbarData } from "./Snackbar";
 interface SnackbarProviderProps extends ClassNamePropsWithChildren {
     config?: SnackbarConfig;
 }
 declare function SnackbarProvider(props: SnackbarProviderProps): import("react/jsx-runtime").JSX.Element;
 export default SnackbarProvider;
+export declare const addSnackbar: (snackData: SnackbarData, onAction?: () => void, onClose?: () => void) => string | number;

package/lib/components/snackbar/SnackbarProvider.js

@@ -3,6 +3,7 @@ import classNames from "classnames";
 import Snackbar from "./Snackbar.js";
 import SnackbarContext from "./SnackbarContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let addSnackbarFunction;
 function SnackbarProvider(props) {
   const {
     config = {
@@ -26,6 +27,7 @@ function SnackbarProvider(props) {
     }, ...prevSnacks]);
     return key;
   }, [config]);
+  addSnackbarFunction = addSnackbar;
   function closeSnackbar(key) {
     if (key !== undefined) {
       setSnacks(prevSnacks => prevSnacks.filter(snack => snack.key !== key));
@@ -54,4 +56,10 @@ function SnackbarProvider(props) {
     })]
   });
 }
-export default SnackbarProvider;
+export default SnackbarProvider;
+export const addSnackbar = (snackData, onAction, onClose) => {
+  if (!addSnackbarFunction) {
+    throw new Error("SnackbarProvider is not mounted.");
+  }
+  return addSnackbarFunction(snackData, onAction, onClose);
+};

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/index.js

@@ -381,6 +381,12 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "addSnackbar", {
+  enumerable: true,
+  get: function () {
+    return _SnackbarProvider.addSnackbar;
+  }
+});
 Object.defineProperty(exports, "useSnackbar", {
   enumerable: true,
   get: function () {
@@ -422,7 +428,7 @@ var _Progress = _interopRequireDefault(require("./lib/components/progress/Progre
 var _SearchInput = _interopRequireDefault(require("./lib/components/search-input/SearchInput.js"));
 var _SearchSuggestion = _interopRequireDefault(require("./lib/components/search-input/SearchSuggestion.js"));
 var _Snackbar = _interopRequireDefault(require("./lib/components/snackbar/Snackbar.js"));
-var _SnackbarProvider = _interopRequireDefault(require("./lib/components/snackbar/SnackbarProvider.js"));
+var _SnackbarProvider = _interopRequireWildcard(require("./lib/components/snackbar/SnackbarProvider.js"));
 var _useSnackbar = _interopRequireDefault(require("./lib/components/snackbar/useSnackbar.js"));
 var _StepHorizontal = _interopRequireDefault(require("./lib/components/stepper-horizontal/step-horizontal/StepHorizontal.js"));
 var _StepperHorizontal = _interopRequireDefault(require("./lib/components/stepper-horizontal/StepperHorizontal.js"));

package/node/lib/components/snackbar/SnackbarProvider.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.addSnackbar = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Snackbar = _interopRequireDefault(require("./Snackbar.js"));
 var _SnackbarContext = _interopRequireDefault(require("./SnackbarContext.js"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+let addSnackbarFunction;
 function SnackbarProvider(props) {
   const {
     config = {
@@ -33,6 +34,7 @@ function SnackbarProvider(props) {
     }, ...prevSnacks]);
     return key;
   }, [config]);
+  addSnackbarFunction = addSnackbar;
   function closeSnackbar(key) {
     if (key !== undefined) {
       setSnacks(prevSnacks => prevSnacks.filter(snack => snack.key !== key));
@@ -61,4 +63,11 @@ function SnackbarProvider(props) {
     })]
   });
 }
-var _default = exports.default = SnackbarProvider;
+var _default = exports.default = SnackbarProvider;
+const addSnackbar = (snackData, onAction, onClose) => {
+  if (!addSnackbarFunction) {
+    throw new Error("SnackbarProvider is not mounted.");
+  }
+  return addSnackbarFunction(snackData, onAction, onClose);
+};
+exports.addSnackbar = addSnackbar;

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.661",
+  "version": "9.0.0-dev.663",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",