@festo-ui/react 8.2.0-dev.582 → 8.2.0-dev.584

package/node/lib/forms/text-editor/TextEditor.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var xss = _interopRequireWildcard(require("xss"));
+var _reactIcons = require("@festo-ui/react-icons");
 var _useId = _interopRequireDefault(require("../../helper/useId.js"));
 var _TextEditorButton = _interopRequireDefault(require("./TextEditorButton.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -57,9 +58,9 @@ function TextEditor(_ref) {
     if (e) {
       const whiteList = {
         ...xss.whiteList,
-        p: [...(xss.whiteList?.p ?? []), 'class'],
-        li: [...(xss.whiteList?.li ?? []), 'class'],
-        a: [...(xss.whiteList?.a ?? []), 'rel', 'class']
+        p: [...(xss.whiteList?.p ?? []), "class"],
+        li: [...(xss.whiteList?.li ?? []), "class"],
+        a: [...(xss.whiteList?.a ?? []), "rel", "class"]
       };
       const sanitizedValue = xss.filterXSS(v, {
         whiteList
@@ -68,7 +69,7 @@ function TextEditor(_ref) {
         html: sanitizedValue
       });
       const selection = e.getSelection();
-      e.setContents(content, 'silent');
+      e.setContents(content, "silent");
       setInnerValue(sanitizedValue);
       postpone(() => e.setSelection(selection));
     }
@@ -76,20 +77,20 @@ function TextEditor(_ref) {
   (0, _react.useEffect)(() => {
     const initializeQuill = async () => {
       let Quill;
-      if (typeof window !== 'undefined') {
-        const QuillModule = await Promise.resolve().then(() => _interopRequireWildcard(require('quill')));
+      if (typeof window !== "undefined") {
+        const QuillModule = await Promise.resolve().then(() => _interopRequireWildcard(require("quill")));
         Quill = QuillModule.default;
       }
       if (editorRef.current && Quill && editor === null) {
         const newEditor = new Quill(editorRef.current, {
           modules: {
-            toolbar: `#editor-toolbar-${CSS.escape(id ?? '')}`
+            toolbar: `#editor-toolbar-${CSS.escape(id ?? "")}`
           },
-          theme: 'snow'
+          theme: "snow"
         });
-        newEditor.root.setAttribute('role', 'textbox');
-        newEditor.root.setAttribute('aria-labelledby', `editor-label-${id}`);
-        newEditor.root.setAttribute('aria-multiline', 'true');
+        newEditor.root.setAttribute("role", "textbox");
+        newEditor.root.setAttribute("aria-labelledby", `editor-label-${id}`);
+        newEditor.root.setAttribute("aria-multiline", "true");
         newEditor.enable(!readOnly);
         if (disabled) {
           newEditor.disable();
@@ -106,9 +107,9 @@ function TextEditor(_ref) {
   }, [editor, disabled, readOnly, id, setEditorContents, defaultValue]);
   (0, _react.useEffect)(() => {
     if (editor) {
-      editor.on('text-change', () => {
+      editor.on("text-change", () => {
         let html = editor.root.innerHTML;
-        if (html === '<p><br></p>' || html === '<div><br></div>' || html === undefined) {
+        if (html === "<p><br></p>" || html === "<div><br></div>" || html === undefined) {
           html = null;
         }
         if (onChange) {
@@ -132,13 +133,13 @@ function TextEditor(_ref) {
     const typos = config.toolbar?.bold || config.toolbar?.italic || config.toolbar?.underline;
     const textAlign = config.toolbar?.alignCenter || config.toolbar?.alignRight;
     switch (name) {
-      case 'typo':
+      case "typo":
         return !typos || !textAlign && !linkOrImage && !lists;
-      case 'text-align':
+      case "text-align":
         return !textAlign || !linkOrImage && !lists;
-      case 'lists':
+      case "lists":
         return !lists || !linkOrImage;
-      case 'image':
+      case "image":
         return !config.toolbar?.image || !config.toolbar.link;
       default:
         break;
@@ -146,12 +147,12 @@ function TextEditor(_ref) {
     return true;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-    className: (0, _classnames.default)('fwe-input-text', {
+    className: (0, _classnames.default)("fwe-input-text", {
       disabled
     }),
     htmlFor: `editor-label-${id}`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)('fwe-editor-toolbar', {
+      className: (0, _classnames.default)("fwe-editor-toolbar", {
         [`fwe-editor-toolbar-${className}`]: className
       }),
       id: `editor-toolbar-${id}`,
@@ -171,42 +172,45 @@ function TextEditor(_ref) {
           disabled: disabled,
           type: "underline",
           label: "U"
-        }), !hideDivider('typo') && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), !hideDivider("typo") && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
         }), config?.toolbar?.alignCenter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
           disabled: disabled,
           category: "align",
           type: "align-center",
-          icon: (0, _classnames.default)('text-align-center', {
-            'fwe-gray': disabled
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconAlignCenter, {
+            className: (0, _classnames.default)({
+              "fwe-gray": disabled
+            })
           }),
           value: "center",
-          className: (0, _classnames.default)('fwe-btn-toolbar-list fwe-btn-toolbar-list-alignments', {
-            'fwe-mr-3': config?.toolbar?.alignRight
+          className: (0, _classnames.default)({
+            "fwe-mr-3": config?.toolbar?.alignRight
           })
         }), config?.toolbar?.alignRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
           disabled: disabled,
           category: "align",
           type: "align-right",
-          icon: (0, _classnames.default)('text-align-right', {
-            'fwe-gray': disabled
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconAlignRight, {
+            className: (0, _classnames.default)({
+              "fwe-gray": disabled
+            })
           }),
-          value: "right",
-          className: "fwe-btn-toolbar-list fwe-btn-toolbar-list-alignments"
-        }), !hideDivider('text-align') && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          value: "right"
+        }), !hideDivider("text-align") && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
         }), config?.toolbar?.bulletList && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
           disabled: disabled,
           className: "fwe-mr-3",
           type: "ul",
           list: true,
-          icon: "list-list-view",
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconListView, {}),
           value: "bullet"
         }), config?.toolbar?.orderedList && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
           disabled: disabled,
           type: "ol",
           list: true,
-          icon: "enumeration",
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconEnumeration, {}),
           value: "ordered"
         }), config?.toolbar?.image && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -214,7 +218,7 @@ function TextEditor(_ref) {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
             disabled: disabled,
             type: "image",
-            icon: "image-image",
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconImage, {}),
             noAction: true
           })]
         }), config?.toolbar?.link && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -223,14 +227,14 @@ function TextEditor(_ref) {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditorButton.default, {
             disabled: disabled,
             type: "link",
-            icon: "file-link",
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconLink, {}),
             noAction: true
           })]
         })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)('fwe-editor-container', {
-        'fwe-editor-container--error': error
+      className: (0, _classnames.default)("fwe-editor-container", {
+        "fwe-editor-container--error": error
       }),
       id: `editor-container-${id}`,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/node/lib/forms/text-editor/TextEditorButton.js

@@ -36,10 +36,10 @@ function TextEditorButton(_ref) {
         const {
           oldValue
         } = mutationRecord;
-        if (classList.contains('ql-active')) {
+        if (classList.contains("ql-active")) {
           setActive(true);
         }
-        if (!classList.contains('ql-active') && oldValue?.includes('ql-active')) {
+        if (!classList.contains("ql-active") && oldValue?.includes("ql-active")) {
           setActive(false);
         }
       });
@@ -48,7 +48,7 @@ function TextEditorButton(_ref) {
       const observer = new MutationObserver(callback);
       observer.observe(btnRef.current, {
         attributes: true,
-        attributeFilter: ['class'],
+        attributeFilter: ["class"],
         attributeOldValue: true
       });
     }
@@ -60,26 +60,26 @@ function TextEditorButton(_ref) {
       className: (0, _classnames.default)({
         [`ql-${category || type}`]: !list
       }, {
-        'ql-list': list
-      }, 'fwe-d-none', {
+        "ql-list": list
+      }, "fwe-d-none", {
         [`action-${type}`]: !noAction
       }),
       "aria-hidden": "true",
       value: value
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
       type: "button",
-      className: (0, _classnames.default)('fwe-btn', {
-        'fwe-btn-toolbar-list': list
-      }, 'fr-button', className, {
-        'fwe-active': active && !noAction
+      className: (0, _classnames.default)({
+        "fr-icon-button": !!icon
+      }, "fr-button", className, {
+        "fwe-active": active && !noAction
       }),
       onClick: () => handleClick(),
       disabled: disabled,
       children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: `fr-button-text fwe-text-${type}`,
         children: label
-      }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: (0, _classnames.default)('fwe-icon fwe-icon-toolbar-list', `fwe-icon-${icon}`, 'fwe-mr-0')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: icon
       })]
     })]
   });

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

@@ -37,10 +37,10 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   (0, _react.useEffect)(() => {
     setInnerValue(value);
   }, [value]);
-  const supported = ['text', 'number', 'password', 'datetime-local'];
-  const innerType = type && supported.indexOf(type) !== -1 ? type : 'text';
-  const labelClasses = (0, _classnames.default)('fwe-input-text', labelClassName);
-  const hintClasses = (0, _classnames.default)('fwe-input-text-info');
+  const supported = ["text", "number", "password", "datetime-local"];
+  const innerType = type && supported.indexOf(type) !== -1 ? type : "text";
+  const labelClasses = (0, _classnames.default)("fwe-input-text", labelClassName);
+  const hintClasses = (0, _classnames.default)("fwe-input-text-info");
   function handleChange(e) {
     setInnerValue(e.target.value);
     if (props.onChange) {

package/node/lib/forms/time-picker/time-picker-dropdown/TimePickerInput.js

@@ -12,7 +12,7 @@ const TimePickerInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     max,
     value,
     onInput,
-    'aria-label': ariaLabel
+    "aria-label": ariaLabel
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
     "aria-label": ariaLabel,

package/node/lib/helper/index.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.provideDiv = exports.default = void 0;
 const provideDiv = () => {
-  const div = document.createElement('div');
+  const div = document.createElement("div");
   const id = Math.floor(Math.random() * 1000);
-  div.setAttribute('id', `${id}`);
+  div.setAttribute("id", `${id}`);
   return div;
 };
 exports.provideDiv = provideDiv;

package/node/lib/helper/setRef.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = setRef;
 function setRef(ref, value) {
-  if (typeof ref === 'function') {
+  if (typeof ref === "function") {
     ref(value);
   } else if (ref) {
     ref.current = value;

package/node/lib/helper/useControlled.js

@@ -21,7 +21,7 @@ function useControlled(_ref) {
       setValue(newValue);
     }
     const setter = newValue;
-    const onChangeValue = typeof newValue === 'function' ? setter(controlled) : newValue;
+    const onChangeValue = typeof newValue === "function" ? setter(controlled) : newValue;
     onChange?.(onChangeValue);
   }, [controlled, isControlled, onChange]);
   return [value, setValueIfUncontrolled];

package/node/lib/helper/useId.js

@@ -7,7 +7,7 @@ exports.default = useId;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // eslint-disable-next-line no-useless-concat
-const maybeReactUseId = _react.default['useId' + ''];
+const maybeReactUseId = _react.default["useId" + ""];
 let nextId = 0;
 function useLegacyId() {
   const [id, setId] = _react.default.useState(undefined);

package/node/lib/helper/useOnClickOutside.js

@@ -14,11 +14,11 @@ function useOnClickOutside(ref, callback, ref2) {
       }
       callback(event);
     };
-    document.addEventListener('mousedown', listener, true);
-    document.addEventListener('touchstart', listener, true);
+    document.addEventListener("mousedown", listener, true);
+    document.addEventListener("touchstart", listener, true);
     return () => {
-      document.removeEventListener('mousedown', listener, true);
-      document.removeEventListener('touchstart', listener, true);
+      document.removeEventListener("mousedown", listener, true);
+      document.removeEventListener("touchstart", listener, true);
     };
   }, [ref, ref2, callback]);
 }

package/package.json

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