@festo-ui/react 5.0.0-dev.154 → 5.0.0-dev.158

package/lib/components/modals/ModalBase.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import useForkRef from '../../helper/useForkRef';
@@ -21,6 +21,15 @@ const ModalBase = /*#__PURE__*/forwardRef((_ref, ref) => {
   const allRefs = useForkRef(combinedRef, divRef);
   const container = divRef?.current?.ownerDocument || document;
   useOnClickOutside(divRef, () => onClose?.());
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        onClose?.();
+      }
+    };
+    container.addEventListener('keydown', handleKeyDown);
+    return () => container.removeEventListener('keydown', handleKeyDown);
+  }, [onClose, container]);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(CSSTransition, {

package/lib/forms/checkbox/Checkbox.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
 import './Checkbox.scss';
+import React from 'react';
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     id: string;
-    checked: boolean;
-    onChange: (value: boolean) => void;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (value: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
     name?: string;
     large?: boolean;
     valid?: boolean;
@@ -12,5 +13,5 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     disabled?: boolean;
     indeterminate?: boolean;
 }
-declare function Checkbox({ id, checked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): JSX.Element;
+declare function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): JSX.Element;
 export default Checkbox;

package/lib/forms/checkbox/Checkbox.js

@@ -1,11 +1,13 @@
-import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
+import React from 'react';
+import useControlled from '../../helper/useControlled';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function Checkbox(_ref) {
   let {
     id,
-    checked,
+    checked: checkedProp,
+    defaultChecked,
     onChange,
     name,
     large = false,
@@ -18,19 +20,14 @@ function Checkbox(_ref) {
     className,
     ...props
   } = _ref;
-  const [isChecked, setChecked] = useState(checked);
-  const [isIndeterminate, setIndeterminate] = useState(indeterminate);
-  useEffect(() => {
-    setChecked(checked);
-    setIndeterminate(indeterminate);
-  }, [checked, indeterminate]);
-  const handleChange = () => {
+  const [isChecked, setChecked] = useControlled({
+    controlled: checkedProp,
+    default: defaultChecked
+  });
+  const handleChange = e => {
     const newChecked = !isChecked;
-    if (indeterminate) {
-      setIndeterminate(false);
-    }
     setChecked(newChecked);
-    onChange(newChecked);
+    onChange?.(newChecked, e);
   };
   const containerClasses = classNames('fwe-checkbox-container', {
     'fr-checkbox-large': large
@@ -45,7 +42,7 @@ function Checkbox(_ref) {
   }, {
     'fwe-label-before': labelPosition === 'before'
   }, {
-    'fr-checkbox-indeterminate': isIndeterminate
+    'fr-checkbox-indeterminate': indeterminate
   }, className);
   return /*#__PURE__*/_jsxs("label", {
     className: containerClasses,
@@ -55,13 +52,14 @@ function Checkbox(_ref) {
       type: "checkbox",
       id: id,
       disabled: disabled,
-      onChange: () => handleChange(),
-      ...props
+      onChange: e => handleChange(e),
+      ...props,
+      checked: isChecked
     }), /*#__PURE__*/_jsxs("div", {
       className: "fwe-checkbox-indicator-container",
       children: [/*#__PURE__*/_jsx("div", {
         className: "fwe-checkbox-indicator-background"
-      }), !isIndeterminate && isChecked && (large ? /*#__PURE__*/_jsx("svg", {
+      }), !indeterminate && isChecked && (large ? /*#__PURE__*/_jsx("svg", {
         width: "24px",
         height: "24px",
         children: /*#__PURE__*/_jsx("path", {
@@ -76,7 +74,7 @@ function Checkbox(_ref) {
           d: "M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z",
           fill: "#fff"
         })
-      })), isIndeterminate && !isChecked && /*#__PURE__*/_jsx("div", {
+      })), indeterminate && /*#__PURE__*/_jsx("div", {
         className: "fwe-indeterminate-indicator"
       })]
     }), /*#__PURE__*/_jsx("div", {

package/lib/forms/text-editor/TextEditor.d.ts

@@ -18,6 +18,7 @@ export interface TextEditorProps {
     label: string;
     maxLength?: number;
     value?: string;
+    defaultValue?: string;
     hint?: string;
     error?: string;
     readOnly?: boolean;
@@ -25,5 +26,5 @@ export interface TextEditorProps {
     className?: string;
     config?: TextEditorConfiguration;
 }
-declare function TextEditor({ disabled, label, maxLength, value, hint, error, readOnly, onChange, className, config: configProps, }: TextEditorProps): JSX.Element;
+declare function TextEditor({ disabled, defaultValue, label, maxLength, value, hint, error, readOnly, onChange, className, config: configProps, }: TextEditorProps): JSX.Element;
 export default TextEditor;

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import TextEditorButton from './TextEditorButton';
 import useId from '../../helper/useId';
@@ -19,9 +19,13 @@ const defaultConfig = {
     link: true
   }
 };
+function postpone(fn) {
+  Promise.resolve().then(fn);
+}
 function TextEditor(_ref) {
   let {
     disabled = false,
+    defaultValue,
     label,
     maxLength,
     value,
@@ -35,13 +39,29 @@ function TextEditor(_ref) {
   const editorRef = useRef(null);
   const [editor, setEditor] = useState(null);
   const id = useId();
-  const [innerValue, setInnerValue] = useState(value);
+  const [innerValue, setInnerValue] = useState(null);
   const config = {
     toolbar: {
       ...defaultConfig.toolbar,
       ...configProps?.toolbar
     }
   };
+  const setEditorContents = useCallback((e, v) => {
+    if (e) {
+      const whiteList = {
+        ...xss.whiteList,
+        a: [...xss.whiteList.a, 'rel']
+      };
+      const sanitizedValue = xss(v, {
+        whiteList
+      });
+      const content = e.clipboard.convert(sanitizedValue);
+      const selection = e.getSelection();
+      e.setContents(content, 'silent');
+      setInnerValue(sanitizedValue);
+      postpone(() => e.setSelection(selection));
+    }
+  }, []);
   useEffect(() => {
     if (editorRef && editor === null && typeof window === 'object') {
       // eslint-disable-next-line global-require
@@ -75,8 +95,11 @@ function TextEditor(_ref) {
         return new Delta().insert('');
       });
       setEditor(newEditor);
+      if (defaultValue) {
+        setEditorContents(newEditor, defaultValue);
+      }
     }
-  }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar?.image]);
+  }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar?.image, setEditorContents, defaultValue]);
   useEffect(() => {
     if (editor) {
       editor.on('text-change', () => {
@@ -92,18 +115,10 @@ function TextEditor(_ref) {
     }
   }, [editor, onChange]);
   useEffect(() => {
-    if (editor) {
-      const whiteList = {
-        ...xss.whiteList,
-        a: [...xss.whiteList.a, 'rel']
-      };
-      const sanitizedValue = xss(value, {
-        whiteList
-      });
-      const content = editor.clipboard.convert(sanitizedValue);
-      editor.setContents(content, 'silent');
+    if (value !== innerValue && value !== undefined && value !== null) {
+      setEditorContents(editor, value);
     }
-  }, [editor, value]);
+  }, [editor, innerValue, setEditorContents, value]);
   function currentLength() {
     return innerValue?.length || 0;
   }

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

@@ -26,6 +26,15 @@ const ModalBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const allRefs = (0, _useForkRef.default)(combinedRef, divRef);
   const container = divRef?.current?.ownerDocument || document;
   (0, _useOnClickOutside.default)(divRef, () => onClose?.());
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        onClose?.();
+      }
+    };
+    container.addEventListener('keydown', handleKeyDown);
+    return () => container.removeEventListener('keydown', handleKeyDown);
+  }, [onClose, 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/forms/checkbox/Checkbox.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _useControlled = _interopRequireDefault(require("../../helper/useControlled"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function Checkbox(_ref) {
   let {
     id,
-    checked,
+    checked: checkedProp,
+    defaultChecked,
     onChange,
     name,
     large = false,
@@ -26,19 +26,14 @@ function Checkbox(_ref) {
     className,
     ...props
   } = _ref;
-  const [isChecked, setChecked] = (0, _react.useState)(checked);
-  const [isIndeterminate, setIndeterminate] = (0, _react.useState)(indeterminate);
-  (0, _react.useEffect)(() => {
-    setChecked(checked);
-    setIndeterminate(indeterminate);
-  }, [checked, indeterminate]);
-  const handleChange = () => {
+  const [isChecked, setChecked] = (0, _useControlled.default)({
+    controlled: checkedProp,
+    default: defaultChecked
+  });
+  const handleChange = e => {
     const newChecked = !isChecked;
-    if (indeterminate) {
-      setIndeterminate(false);
-    }
     setChecked(newChecked);
-    onChange(newChecked);
+    onChange?.(newChecked, e);
   };
   const containerClasses = (0, _classnames.default)('fwe-checkbox-container', {
     'fr-checkbox-large': large
@@ -53,7 +48,7 @@ function Checkbox(_ref) {
   }, {
     'fwe-label-before': labelPosition === 'before'
   }, {
-    'fr-checkbox-indeterminate': isIndeterminate
+    'fr-checkbox-indeterminate': indeterminate
   }, className);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
     className: containerClasses,
@@ -63,13 +58,14 @@ function Checkbox(_ref) {
       type: "checkbox",
       id: id,
       disabled: disabled,
-      onChange: () => handleChange(),
-      ...props
+      onChange: e => handleChange(e),
+      ...props,
+      checked: isChecked
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fwe-checkbox-indicator-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fwe-checkbox-indicator-background"
-      }), !isIndeterminate && isChecked && (large ? /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      }), !indeterminate && isChecked && (large ? /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
         width: "24px",
         height: "24px",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
@@ -84,7 +80,7 @@ function Checkbox(_ref) {
           d: "M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z",
           fill: "#fff"
         })
-      })), isIndeterminate && !isChecked && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      })), indeterminate && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fwe-indeterminate-indicator"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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

@@ -24,9 +24,13 @@ const defaultConfig = {
     link: true
   }
 };
+function postpone(fn) {
+  Promise.resolve().then(fn);
+}
 function TextEditor(_ref) {
   let {
     disabled = false,
+    defaultValue,
     label,
     maxLength,
     value,
@@ -40,13 +44,29 @@ function TextEditor(_ref) {
   const editorRef = (0, _react.useRef)(null);
   const [editor, setEditor] = (0, _react.useState)(null);
   const id = (0, _useId.default)();
-  const [innerValue, setInnerValue] = (0, _react.useState)(value);
+  const [innerValue, setInnerValue] = (0, _react.useState)(null);
   const config = {
     toolbar: {
       ...defaultConfig.toolbar,
       ...configProps?.toolbar
     }
   };
+  const setEditorContents = (0, _react.useCallback)((e, v) => {
+    if (e) {
+      const whiteList = {
+        ...xss.whiteList,
+        a: [...xss.whiteList.a, 'rel']
+      };
+      const sanitizedValue = xss(v, {
+        whiteList
+      });
+      const content = e.clipboard.convert(sanitizedValue);
+      const selection = e.getSelection();
+      e.setContents(content, 'silent');
+      setInnerValue(sanitizedValue);
+      postpone(() => e.setSelection(selection));
+    }
+  }, []);
   (0, _react.useEffect)(() => {
     if (editorRef && editor === null && typeof window === 'object') {
       // eslint-disable-next-line global-require
@@ -80,8 +100,11 @@ function TextEditor(_ref) {
         return new Delta().insert('');
       });
       setEditor(newEditor);
+      if (defaultValue) {
+        setEditorContents(newEditor, defaultValue);
+      }
     }
-  }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar?.image]);
+  }, [editorRef, editor, disabled, readOnly, className, id, config.toolbar?.image, setEditorContents, defaultValue]);
   (0, _react.useEffect)(() => {
     if (editor) {
       editor.on('text-change', () => {
@@ -97,18 +120,10 @@ function TextEditor(_ref) {
     }
   }, [editor, onChange]);
   (0, _react.useEffect)(() => {
-    if (editor) {
-      const whiteList = {
-        ...xss.whiteList,
-        a: [...xss.whiteList.a, 'rel']
-      };
-      const sanitizedValue = xss(value, {
-        whiteList
-      });
-      const content = editor.clipboard.convert(sanitizedValue);
-      editor.setContents(content, 'silent');
+    if (value !== innerValue && value !== undefined && value !== null) {
+      setEditorContents(editor, value);
     }
-  }, [editor, value]);
+  }, [editor, innerValue, setEditorContents, value]);
   function currentLength() {
     return innerValue?.length || 0;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "5.0.0-dev.154",
+  "version": "5.0.0-dev.158",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
   "peerDependencies": {