@festo-ui/react 5.0.0-dev.155 → 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/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/package.json

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