@sb1/ffe-feedback-react 1.2.1 → 1.2.3

package/es/feedback.js

@@ -8,7 +8,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
+import { flushSync } from 'react-dom';
 import { Heading2 } from '@sb1/ffe-core-react';
 import { Animation } from './animation';
 import { func, oneOf, shape, string } from 'prop-types';
@@ -23,6 +24,8 @@ export var Feedback = function Feedback(_ref) {
     bgColor = _ref.bgColor,
     bgDarkmodeColor = _ref.bgDarkmodeColor,
     contactLink = _ref.contactLink;
+  var feedbackSentRef = useRef();
+  var expandedRef = useRef();
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     feedbackThumbClicked = _useState2[0],
@@ -38,11 +41,19 @@ export var Feedback = function Feedback(_ref) {
   var feedbackClassnames = classNames('ffe-feedback', _defineProperty(_defineProperty({}, "ffe-feedback--bg-".concat(bgColor), bgColor), "ffe-feedback--dm-bg-".concat(bgDarkmodeColor), bgDarkmodeColor));
   var handleThumbClicked = function handleThumbClicked(thumb) {
     setFeedbackThumbClicked(thumb);
-    setExpanded(!expanded);
+    flushSync(function () {
+      setExpanded(function (prevState) {
+        return !prevState;
+      });
+    });
+    expandedRef.current.focus();
     onThumbClick(thumb);
   };
   var handleFeedbackSent = function handleFeedbackSent(feedbackText) {
-    setFeedbackSent(true);
+    flushSync(function () {
+      setFeedbackSent(true);
+    });
+    feedbackSentRef.current.focus();
     onFeedbackSend(feedbackText);
   };
   if (feedbackSent) {
@@ -51,7 +62,9 @@ export var Feedback = function Feedback(_ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: "ffe-feedback__content"
     }, /*#__PURE__*/React.createElement(Heading2, {
-      lookLike: 4
+      lookLike: 4,
+      ref: feedbackSentRef,
+      tabIndex: -1
     }, i18n[language].FEEDBACK_SENT_HEADING), /*#__PURE__*/React.createElement(Animation, null)));
   }
   if (expanded) {
@@ -59,11 +72,11 @@ export var Feedback = function Feedback(_ref) {
       className: feedbackClassnames
     }, /*#__PURE__*/React.createElement("div", {
       className: "ffe-feedback__content"
-    }, feedbackThumbClicked === Thumbs.UP ? /*#__PURE__*/React.createElement(Heading2, {
-      lookLike: 5
-    }, i18n[language].FEEDBACK_GOOD) : /*#__PURE__*/React.createElement(Heading2, {
-      lookLike: 5
-    }, i18n[language].FEEDBACK_IMPROVE), /*#__PURE__*/React.createElement(FeedbackExpanded, {
+    }, /*#__PURE__*/React.createElement(Heading2, {
+      lookLike: 5,
+      ref: expandedRef,
+      tabIndex: -1
+    }, feedbackThumbClicked === Thumbs.UP ? i18n[language].FEEDBACK_GOOD : i18n[language].FEEDBACK_IMPROVE), /*#__PURE__*/React.createElement(FeedbackExpanded, {
       language: language,
       onSend: handleFeedbackSent,
       onCancel: function onCancel() {

package/lib/feedback.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Feedback = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
 var _ffeCoreReact = require("@sb1/ffe-core-react");
 var _animation = require("./animation");
 var _propTypes = require("prop-types");
@@ -32,6 +33,8 @@ var Feedback = exports.Feedback = function Feedback(_ref) {
     bgColor = _ref.bgColor,
     bgDarkmodeColor = _ref.bgDarkmodeColor,
     contactLink = _ref.contactLink;
+  var feedbackSentRef = (0, _react.useRef)();
+  var expandedRef = (0, _react.useRef)();
   var _useState = (0, _react.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
     feedbackThumbClicked = _useState2[0],
@@ -47,11 +50,19 @@ var Feedback = exports.Feedback = function Feedback(_ref) {
   var feedbackClassnames = (0, _classnames.default)('ffe-feedback', _defineProperty(_defineProperty({}, "ffe-feedback--bg-".concat(bgColor), bgColor), "ffe-feedback--dm-bg-".concat(bgDarkmodeColor), bgDarkmodeColor));
   var handleThumbClicked = function handleThumbClicked(thumb) {
     setFeedbackThumbClicked(thumb);
-    setExpanded(!expanded);
+    (0, _reactDom.flushSync)(function () {
+      setExpanded(function (prevState) {
+        return !prevState;
+      });
+    });
+    expandedRef.current.focus();
     onThumbClick(thumb);
   };
   var handleFeedbackSent = function handleFeedbackSent(feedbackText) {
-    setFeedbackSent(true);
+    (0, _reactDom.flushSync)(function () {
+      setFeedbackSent(true);
+    });
+    feedbackSentRef.current.focus();
     onFeedbackSend(feedbackText);
   };
   if (feedbackSent) {
@@ -60,7 +71,9 @@ var Feedback = exports.Feedback = function Feedback(_ref) {
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "ffe-feedback__content"
     }, /*#__PURE__*/_react.default.createElement(_ffeCoreReact.Heading2, {
-      lookLike: 4
+      lookLike: 4,
+      ref: feedbackSentRef,
+      tabIndex: -1
     }, _i18n.default[language].FEEDBACK_SENT_HEADING), /*#__PURE__*/_react.default.createElement(_animation.Animation, null)));
   }
   if (expanded) {
@@ -68,11 +81,11 @@ var Feedback = exports.Feedback = function Feedback(_ref) {
       className: feedbackClassnames
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "ffe-feedback__content"
-    }, feedbackThumbClicked === _feedbackThumbs.Thumbs.UP ? /*#__PURE__*/_react.default.createElement(_ffeCoreReact.Heading2, {
-      lookLike: 5
-    }, _i18n.default[language].FEEDBACK_GOOD) : /*#__PURE__*/_react.default.createElement(_ffeCoreReact.Heading2, {
-      lookLike: 5
-    }, _i18n.default[language].FEEDBACK_IMPROVE), /*#__PURE__*/_react.default.createElement(_feedbackExpanded.default, {
+    }, /*#__PURE__*/_react.default.createElement(_ffeCoreReact.Heading2, {
+      lookLike: 5,
+      ref: expandedRef,
+      tabIndex: -1
+    }, feedbackThumbClicked === _feedbackThumbs.Thumbs.UP ? _i18n.default[language].FEEDBACK_GOOD : _i18n.default[language].FEEDBACK_IMPROVE), /*#__PURE__*/_react.default.createElement(_feedbackExpanded.default, {
       language: language,
       onSend: handleFeedbackSent,
       onCancel: function onCancel() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-feedback-react",
-    "version": "1.2.1",
+    "version": "1.2.3",
     "description": "React component for ffe-feedback",
     "license": "MIT",
     "author": "SpareBank 1",
@@ -27,7 +27,7 @@
     "dependencies": {
         "@sb1/ffe-buttons-react": "^20.0.8",
         "@sb1/ffe-collapse-react": "^2.0.7",
-        "@sb1/ffe-core-react": "^7.1.5",
+        "@sb1/ffe-core-react": "^7.2.0",
         "@sb1/ffe-feedback": "^1.2.1",
         "@sb1/ffe-form-react": "^14.0.9",
         "classnames": "^2.3.1",
@@ -48,5 +48,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ae86a1b0efce7a96908d46b2cc8eb523c660d8bf"
+    "gitHead": "b47fbdb7daaf9d3edc12366a6fbb90f462268b1f"
 }

package/types/index.d.ts

@@ -11,7 +11,7 @@ export type bgDarkmodeColors = 'svart' | 'natt';
 export interface ContactLink {
     url?: string;
     linkText?: string;
-    onClick?: (e: React.MouseEvent | undefined) => void;
+    onClick?: (e: React.MouseEvent) => void;
 }
 
 export interface FeedbackProps extends React.ComponentProps<'div'> {