@roqua/quby-frontend 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 0.4.0
+
+* Enabled strict mode for typescript, since it's way more relaxed otherwise then expected (e.g. allowing strings passed to number methods)
+* Fixed a bunch of types based on ts complains.
+* Changed options to children with a type and added a html-type.
+* More specific option types for each question.
+* Added placeholder functionality to select questions.
+* Fixed script/fixture and added option to update all the questionnaire fixtures.
+
 # 0.3.0
 
 * Added date_parts question support

package/README.md

@@ -1,3 +1,7 @@
+# assumptions
+
+* All questions are always validated (on load and on every change), errors are just ignored when an answer has not been touched or is hidden.
+
 # yarn build
 
 Generates the new compiled JS files.

package/lib/components/AnswerPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnswerPage.d.ts","sourceRoot":"","sources":["../../src/components/AnswerPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAiB,MAAM,SAAS,CAAC;AAGlF,UAAU,KAAK;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,eAAe,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAmCrD,CAAC"}
+{"version":3,"file":"AnswerPage.d.ts","sourceRoot":"","sources":["../../src/components/AnswerPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAiB,MAAM,SAAS,CAAC;AAGlF,UAAU,KAAK;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,eAAe,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAuDrD,CAAC"}

package/lib/components/AnswerPage.js

@@ -27,27 +27,64 @@ var AnswerPage = function (props) {
     var _a = __read(react_1["default"].useState(0), 2), _ = _a[0], setCounter = _a[1];
     var displayMode = props.displayOptions.displayMode;
     var handleChange = function (response) { return setCounter(function (number) { return number + 1; }); };
+    var questionRefs = new Map();
     react_1["default"].useEffect(function () {
         props.response.onChange(handleChange);
         return function () { return props.response.offChange(handleChange); };
     });
     var beforeNext = function (panelIndex) {
-        var panelQuestionKeys = props.questionnaire.panels[panelIndex].items.filter(function (item) { return item.type === "question"; }).map(function (item) { return item.key; });
-        panelQuestionKeys.forEach(function (key) {
-            props.response.touchField(key);
-        });
-        props.response.validate();
-        var panelValid = panelQuestionKeys.reduce(function (acc, key) { return acc && props.response.getFieldState(key).valid; }, true);
-        return panelValid;
+        var panel = props.questionnaire.panels[panelIndex];
+        props.response.touchPanelFields(panel);
+        var firstError = props.response.firstNotValidQuestionInPanel(panel);
+        if (firstError) {
+            var ref = questionRefs.get(firstError);
+            if (!ref)
+                throw ("Could not find ref for ".concat(props.questionnaire.key, ".").concat(firstError));
+            scrollToAndFocus(ref);
+        }
+        return firstError === null;
+    };
+    var onDone = function () {
+        props.response.touchAllFields();
+        var firstError = props.response.firstNotValidQuestion();
+        if (firstError) {
+            var ref = questionRefs.get(firstError);
+            if (!ref)
+                throw ("Could not find ref for ".concat(props.questionnaire.key, ".").concat(firstError));
+            scrollToAndFocus(ref);
+        }
+        else {
+            props.onSave();
+        }
+    };
+    var setQuestionRef = function (key, ref) {
+        questionRefs.set(key, ref);
     };
     return (react_1["default"].createElement("div", null,
         react_1["default"].createElement("form", { className: "paged", onSubmit: function (event) { return event.preventDefault(); } },
-            react_1["default"].createElement(Paginator_1.Paginator, { beforeNext: beforeNext, displayMode: displayMode, panels: props.questionnaire.panels.map(function (panel) { return (react_1["default"].createElement(PanelContent_1.PanelContent, { questionnaire: props.questionnaire, panel: panel, response: props.response })); }), onSave: props.onSave }))));
+            react_1["default"].createElement(Paginator_1.Paginator, { beforeNext: beforeNext, displayMode: displayMode, panels: props.questionnaire.panels.map(function (panel) { return (react_1["default"].createElement(PanelContent_1.PanelContent, { questionnaire: props.questionnaire, panel: panel, response: props.response, setQuestionRef: setQuestionRef })); }), onDone: onDone, onFocus: function () { return props.response.setActiveQuestion(null); } }))));
 };
 exports.AnswerPage = AnswerPage;
-var DISPLAY_MODES = ["paged", "single_page"];
-var DisplayModeSelector = function (_a) {
-    var displayMode = _a.displayMode, onChange = _a.onChange;
-    return (react_1["default"].createElement("div", null, DISPLAY_MODES.map(function (mode) { return (react_1["default"].createElement("button", { key: mode, onClick: function () { return onChange(mode); } }, mode)); })));
+// const DISPLAY_MODES = ["paged", "single_page"];
+// const DisplayModeSelector = ({ displayMode, onChange }) => {
+//   return (
+//     <div>
+//       {DISPLAY_MODES.map(mode => (
+//         <button key={mode} onClick={() => onChange(mode)}>{mode}</button>
+//       ))}
+//     </div>
+//   );
+// };
+// Scrolls the ref into view (usually the question wrapper).
+// Focusses the first focusable element.
+var scrollToAndFocus = function (ref) {
+    var el = ref === null || ref === void 0 ? void 0 : ref.current;
+    if (!el)
+        return;
+    el.scrollIntoView();
+    var firstInput = el.querySelector('input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    if (firstInput instanceof HTMLElement) {
+        firstInput.focus();
+    }
 };
 //# sourceMappingURL=AnswerPage.js.map

package/lib/components/AnswerPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnswerPage.js","sourceRoot":"","sources":["../../src/components/AnswerPage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,+CAA8C;AAE9C,yCAAwC;AASjC,IAAM,UAAU,GAAmC,UAAA,KAAK;IACvD,IAAA,KAAA,OAAkB,kBAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAA,EAAlC,CAAC,QAAA,EAAE,UAAU,QAAqB,CAAC;IAC1C,IAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrD,IAAM,YAAY,GAAG,UAAC,QAAkB,IAAK,OAAA,UAAU,CAAC,UAAA,MAAM,IAAI,OAAA,MAAM,GAAG,CAAC,EAAV,CAAU,CAAC,EAAhC,CAAgC,CAAC;IAE9E,kBAAK,CAAC,SAAS,CAAC;QACd,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAA;QACrC,OAAO,cAAM,OAAA,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,YAAY,CAAC,EAAtC,CAAsC,CAAA;IACrD,CAAC,CAAC,CAAC;IAEH,IAAM,UAAU,GAAG,UAAC,UAAkB;QACpC,IAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,IAAI,KAAK,UAAU,EAAxB,CAAwB,CAAC,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,OAAC,IAAsB,CAAC,GAAG,EAA3B,CAA2B,CAAC,CAAC;QAEzJ,iBAAiB,CAAC,OAAO,CAAC,UAAA,GAAG;YAC3B,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;QACH,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;QAC1B,IAAM,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,GAAG,IAAK,OAAA,GAAG,IAAI,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAA9C,CAA8C,EAAE,IAAI,CAAC,CAAC;QAChH,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO,CACL;QACE,2CAAM,SAAS,EAAC,OAAO,EAAC,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,cAAc,EAAE,EAAtB,CAAsB;YAC/D,iCAAC,qBAAS,IACR,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,CAC9C,iCAAC,2BAAY,IAAC,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAC7F,EAF+C,CAE/C,CAAC,EACF,MAAM,EAAE,KAAK,CAAC,MAAM,GACpB,CACG,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AAnCW,QAAA,UAAU,cAmCrB;AAEF,IAAM,aAAa,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;AAE/C,IAAM,mBAAmB,GAAG,UAAC,EAAyB;QAAvB,WAAW,iBAAA,EAAE,QAAQ,cAAA;IAClD,OAAO,CACL,8CACG,aAAa,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,OAAA,CACzB,6CAAQ,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,cAAM,OAAA,QAAQ,CAAC,IAAI,CAAC,EAAd,CAAc,IAAG,IAAI,CAAU,CAClE,EAF0B,CAE1B,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"AnswerPage.js","sourceRoot":"","sources":["../../src/components/AnswerPage.tsx"],"names":[],"mappings":"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"}

package/lib/components/Paginator.d.ts

@@ -6,12 +6,14 @@ export interface INavigationCallbacks {
     next?: () => void;
     abort?: () => void;
     previousQuestionnaire?: () => void;
+    onFocus: () => void;
 }
 declare type CanProceed = boolean;
 interface Props {
     beforeNext: (panelIndex: number) => CanProceed;
     panels: ReactChild[];
-    onSave: () => void;
+    onDone: () => void;
+    onFocus: () => void;
 }
 export declare const Paginator: React.FunctionComponent<Pick<IDisplayOptions, "displayMode"> & Props>;
 export {};

package/lib/components/Paginator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Paginator.d.ts","sourceRoot":"","sources":["../../src/components/Paginator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI1C,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,aAAK,UAAU,GAAG,OAAO,CAAC;AAE1B,UAAU,KAAK;IACb,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,UAAU,CAAC;IAC/C,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,GAAG,KAAK,CAwC3F,CAAC"}
+{"version":3,"file":"Paginator.d.ts","sourceRoot":"","sources":["../../src/components/Paginator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI1C,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,aAAK,UAAU,GAAG,OAAO,CAAC;AAE1B,UAAU,KAAK;IACb,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,UAAU,CAAC;IAC/C,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,GAAG,KAAK,CAyC3F,CAAC"}

package/lib/components/Paginator.js

@@ -27,21 +27,22 @@ var Paginator = function (props) {
     var _a = __read(react_1["default"].useState(0), 2), activeIndex = _a[0], setActiveIndex = _a[1];
     var callbacks = {
         prev: activeIndex > 0 ? function () { return setActiveIndex(function (idx) { return idx - 1; }); } : undefined,
-        next: activeIndex < props.panels.length - 1
+        next: activeIndex < props.panels.length - 1 && props.displayMode !== "single_page"
             ? function () {
                 if (props.beforeNext(activeIndex)) {
                     setActiveIndex(function (idx) { return idx + 1; });
                 }
             }
             : undefined,
-        done: props.onSave
+        done: props.onDone,
+        onFocus: props.onFocus
     };
     switch (props.displayMode) {
         case "paged": {
             return (react_1["default"].createElement(PagedPanel, { panelCount: props.panels.length, panelIndex: activeIndex, navigate: callbacks }, props.panels[activeIndex]));
         }
         case "single_page": {
-            return (react_1["default"].createElement(react_1["default"].Fragment, null, props.panels.map(function (content, index) { return (react_1["default"].createElement("fieldset", { className: "panel" },
+            return (react_1["default"].createElement(react_1["default"].Fragment, null, props.panels.map(function (content, index) { return (react_1["default"].createElement("fieldset", { className: "panel", key: index },
                 content,
                 index === props.panels.length - 1 ? react_1["default"].createElement(Buttons, { firstPanel: false, lastPanel: true, navigate: callbacks }) : null)); })));
         }
@@ -68,9 +69,11 @@ var PagedPanel = function (props) {
 var Buttons = function (props) {
     var t = (0, react_i18next_1.useTranslation)().t;
     return (react_1["default"].createElement("div", { className: "buttons" },
-        react_1["default"].createElement("div", { className: "prev" }, props.navigate.prev && react_1["default"].createElement(Button, { onClick: props.navigate.prev, value: t("previous") })),
-        react_1["default"].createElement("div", { className: "abort" }, props.navigate.abort && react_1["default"].createElement(Button, { onClick: props.navigate.abort, value: t("abort") })),
-        react_1["default"].createElement("div", { className: "next" }, props.lastPanel ? react_1["default"].createElement(Button, { onClick: props.navigate.done, value: t("done") }) : react_1["default"].createElement(Button, { onClick: props.navigate.next, value: t("next") }))));
+        react_1["default"].createElement("div", { className: "prev" }, props.navigate.prev && react_1["default"].createElement(Button, { onClick: props.navigate.prev, value: t("previous"), onFocus: props.navigate.onFocus })),
+        react_1["default"].createElement("div", { className: "abort" }, props.navigate.abort && react_1["default"].createElement(Button, { onClick: props.navigate.abort, value: t("abort"), onFocus: props.navigate.onFocus })),
+        react_1["default"].createElement("div", { className: "next" }, props.navigate.next
+            ? react_1["default"].createElement(Button, { onClick: props.navigate.next, value: t("next"), onFocus: props.navigate.onFocus })
+            : react_1["default"].createElement(Button, { onClick: props.navigate.done, value: t("done"), onFocus: props.navigate.onFocus }))));
     // .buttons
     //   - if panel_counter == 0 and @questionnaire.enable_previous_questionnaire_button
     //     .back
@@ -93,8 +96,8 @@ var Buttons = function (props) {
     //     = render :partial => 'quby/v1/shared/pdf_button'
 };
 var Button = function (_a) {
-    var value = _a.value, onClick = _a.onClick;
-    return react_1["default"].createElement("button", { onClick: onClick }, value);
+    var value = _a.value, onClick = _a.onClick, onFocus = _a.onFocus;
+    return react_1["default"].createElement("button", { onClick: onClick, onFocus: onFocus }, value);
 };
 // TODO:
 // .panel-action-links

package/lib/components/Paginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginator.js","sourceRoot":"","sources":["../../src/components/Paginator.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Paginator.js","sourceRoot":"","sources":["../../src/components/Paginator.tsx"],"names":[],"mappings":"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"}

package/lib/components/PanelContent.d.ts

@@ -4,6 +4,7 @@ interface Props {
     questionnaire: Questionnaire;
     panel: IPanel;
     response: Response;
+    setQuestionRef: (key: string, ref: React.RefObject<HTMLElement>) => void;
 }
 export declare const PanelContent: React.FunctionComponent<Props>;
 export {};

package/lib/components/PanelContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../src/components/PanelContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAG1D,UAAU,KAAK;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CASvD,CAAC"}
+{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../src/components/PanelContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAG1D,UAAU,KAAK;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CASvD,CAAC"}

package/lib/components/PanelContent.js

@@ -7,10 +7,10 @@ exports.PanelContent = void 0;
 var react_1 = __importDefault(require("react"));
 var PanelItem_1 = require("./PanelItem");
 var PanelContent = function (_a) {
-    var questionnaire = _a.questionnaire, panel = _a.panel, response = _a.response;
+    var questionnaire = _a.questionnaire, panel = _a.panel, response = _a.response, setQuestionRef = _a.setQuestionRef;
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
         react_1["default"].createElement(Title, { title: panel.title }),
-        panel.items.map(function (item, idx) { return (react_1["default"].createElement(PanelItem_1.PanelItem, { key: idx, questionnaire: questionnaire, item: item, response: response })); })));
+        panel.items.map(function (item, idx) { return (react_1["default"].createElement(PanelItem_1.PanelItem, { key: idx, questionnaire: questionnaire, item: item, response: response, setQuestionRef: setQuestionRef })); })));
 };
 exports.PanelContent = PanelContent;
 var Title = function (_a) {

package/lib/components/PanelContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelContent.js","sourceRoot":"","sources":["../../src/components/PanelContent.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,yCAAwC;AAQjC,IAAM,YAAY,GAAmC,UAAC,EAAkC;QAAhC,aAAa,mBAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA;IAC3F,OAAO,CACL,iCAAC,kBAAK,CAAC,QAAQ;QACb,iCAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI;QAC5B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CAC9B,iCAAC,qBAAS,IAAC,GAAG,EAAE,GAAG,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACtF,EAF+B,CAE/B,CAAC,CACa,CAClB,CAAC;AACJ,CAAC,CAAC;AATW,QAAA,YAAY,gBASvB;AAEF,IAAM,KAAK,GAA+C,UAAC,EAAS;QAAP,KAAK,WAAA;IAChE,IAAI,KAAK,EAAE;QACT,OAAO,6CAAK,KAAK,CAAM,CAAC;KACzB;SAAM;QACL,OAAO,IAAI,CAAC;KACb;AACH,CAAC,CAAC"}
+{"version":3,"file":"PanelContent.js","sourceRoot":"","sources":["../../src/components/PanelContent.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,yCAAwC;AASjC,IAAM,YAAY,GAAmC,UAAC,EAAkD;QAAhD,aAAa,mBAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,cAAc,oBAAA;IAC3G,OAAO,CACL,iCAAC,kBAAK,CAAC,QAAQ;QACb,iCAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI;QAC5B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CAC9B,iCAAC,qBAAS,IAAC,GAAG,EAAE,GAAG,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,GAAI,CACtH,EAF+B,CAE/B,CAAC,CACa,CAClB,CAAC;AACJ,CAAC,CAAC;AATW,QAAA,YAAY,gBASvB;AAEF,IAAM,KAAK,GAAqD,UAAC,EAAS;QAAP,KAAK,WAAA;IACtE,IAAI,KAAK,EAAE;QACT,OAAO,6CAAK,KAAK,CAAM,CAAC;KACzB;SAAM;QACL,OAAO,IAAI,CAAC;KACb;AACH,CAAC,CAAC"}

package/lib/components/PanelItem.d.ts

@@ -4,6 +4,7 @@ interface Props {
     questionnaire: Questionnaire;
     item: IPanelItem;
     response: Response;
+    setQuestionRef: (key: string, ref: React.RefObject<HTMLElement>) => void;
 }
 export declare const PanelItem: React.FunctionComponent<Props>;
 export {};

package/lib/components/PanelItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelItem.d.ts","sourceRoot":"","sources":["../../src/components/PanelItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAK9D,UAAU,KAAK;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAID,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAapD,CAAC"}
+{"version":3,"file":"PanelItem.d.ts","sourceRoot":"","sources":["../../src/components/PanelItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAK9D,UAAU,KAAK;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC1E;AAID,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAapD,CAAC"}

package/lib/components/PanelItem.js

@@ -15,7 +15,7 @@ var PanelItem = function (props) {
             return react_1["default"].createElement(HtmlItem_1.HtmlItem, { item: props.item, response: props.response });
         }
         case "question": {
-            return react_1["default"].createElement(QuestionItem_1.QuestionItem, { questionnaire: props.questionnaire, response: props.response, fieldKey: props.item.key });
+            return react_1["default"].createElement(QuestionItem_1.QuestionItem, { questionnaire: props.questionnaire, response: props.response, fieldKey: props.item.key, setQuestionRef: props.setQuestionRef });
         }
         default: {
             return react_1["default"].createElement(UnknownItem_1.UnknownItem, { item: props.item });

package/lib/components/PanelItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelItem.js","sourceRoot":"","sources":["../../src/components/PanelItem.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,6CAA4C;AAC5C,qDAAoD;AACpD,mDAAkD;AAQlD,oBAAoB;AAEb,IAAM,SAAS,GAAmC,UAAA,KAAK;IAC5D,QAAQ,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE;QACvB,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,iCAAC,mBAAQ,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAAC;SACjE;QACD,KAAK,UAAU,CAAC,CAAC;YACf,OAAO,iCAAC,2BAAY,IAAC,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,GAAI,CAAC;SACjH;QACD,OAAO,CAAC,CAAC;YACP,OAAO,iCAAC,yBAAW,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,CAAA;YACxC,OAAO,IAAI,CAAC;SACb;KACF;AACH,CAAC,CAAC;AAbW,QAAA,SAAS,aAapB"}
+{"version":3,"file":"PanelItem.js","sourceRoot":"","sources":["../../src/components/PanelItem.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,6CAA4C;AAC5C,qDAAoD;AACpD,mDAAkD;AASlD,oBAAoB;AAEb,IAAM,SAAS,GAAmC,UAAA,KAAK;IAC5D,QAAQ,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE;QACvB,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,iCAAC,mBAAQ,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAAC;SACjE;QACD,KAAK,UAAU,CAAC,CAAC;YACf,OAAO,iCAAC,2BAAY,IAAC,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,GAAI,CAAC;SACvJ;QACD,OAAO,CAAC,CAAC;YACP,OAAO,iCAAC,yBAAW,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,CAAA;YACxC,OAAO,IAAI,CAAC;SACb;KACF;AACH,CAAC,CAAC;AAbW,QAAA,SAAS,aAapB"}

package/lib/components/QuestionDescription.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 interface HasDescription {
-    description: string;
+    description: string | null;
 }
 interface Props {
     question: HasDescription;

package/lib/components/QuestionDescription.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionDescription.d.ts","sourceRoot":"","sources":["../../src/components/QuestionDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,cAAc;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,cAAc,CAAA;CACzB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAE9D,CAAA"}
+{"version":3,"file":"QuestionDescription.d.ts","sourceRoot":"","sources":["../../src/components/QuestionDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,cAAc;IACtB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,cAAc,CAAA;CACzB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAI9D,CAAA"}

package/lib/components/QuestionDescription.js

@@ -6,6 +6,8 @@ exports.__esModule = true;
 exports.QuestionDescription = void 0;
 var react_1 = __importDefault(require("react"));
 var QuestionDescription = function (props) {
+    if (!props.question.description)
+        return null;
     return react_1["default"].createElement("div", { className: "description", dangerouslySetInnerHTML: { __html: props.question.description } });
 };
 exports.QuestionDescription = QuestionDescription;

package/lib/components/QuestionDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionDescription.js","sourceRoot":"","sources":["../../src/components/QuestionDescription.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAUnB,IAAM,mBAAmB,GAAmC,UAAC,KAAK;IACvE,OAAO,0CAAK,SAAS,EAAC,aAAa,EAAC,uBAAuB,EAAE,EAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAC,GAAI,CAAA;AACvG,CAAC,CAAA;AAFY,QAAA,mBAAmB,uBAE/B"}
+{"version":3,"file":"QuestionDescription.js","sourceRoot":"","sources":["../../src/components/QuestionDescription.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAUnB,IAAM,mBAAmB,GAAmC,UAAC,KAAK;IACvE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW;QAAE,OAAO,IAAI,CAAC;IAE7C,OAAO,0CAAK,SAAS,EAAC,aAAa,EAAC,uBAAuB,EAAE,EAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAC,GAAI,CAAA;AACvG,CAAC,CAAA;AAJY,QAAA,mBAAmB,uBAI/B"}

package/lib/components/QuestionWrapper.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
-import { IField, IValidated } from "../core";
+import { IFieldState, IField } from "../core";
 interface Props {
     className?: string;
     question: IField;
-    fieldState: IValidated;
+    fieldState: IFieldState<any>;
+    setQuestionRef: (key: string, ref: React.RefObject<HTMLElement>) => void;
 }
 export declare const QuestionWrapper: React.FunctionComponent<Props>;
 export {};

package/lib/components/QuestionWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionWrapper.d.ts","sourceRoot":"","sources":["../../src/components/QuestionWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAe,MAAM,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1D,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAa1D,CAAC"}
+{"version":3,"file":"QuestionWrapper.d.ts","sourceRoot":"","sources":["../../src/components/QuestionWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,EAAsB,MAAM,SAAS,CAAC;AAGlE,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC7B,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAgB1D,CAAC"}

package/lib/components/QuestionWrapper.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,13 +19,19 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ValidationErrors_1 = require("./ValidationErrors");
 var QuestionWrapper = function (props) {
-    var question = props.question, fieldState = props.fieldState;
+    var question = props.question, fieldState = props.fieldState, setQuestionRef = props.setQuestionRef;
+    var questionRef = react_1["default"].useRef(null);
+    setQuestionRef(question.key, questionRef);
     var className = (0, classnames_1["default"])("item", question.type, question.presentation, question.questionGroup, question.as, props.className, {
-        errors: fieldState.touched && fieldState.errors.length > 0
+        errors: fieldState.beenActive && fieldState.errors.length > 0,
+        active: fieldState.isActiveQuestion
     });
-    return (react_1["default"].createElement("div", { className: className },
+    return (react_1["default"].createElement("div", { className: className, ref: questionRef, style: __assign({}, (fieldState.isActiveQuestion && activeStyles)) },
         react_1["default"].createElement(ValidationErrors_1.ValidationErrors, { fieldState: fieldState }),
         props.children));
 };
 exports.QuestionWrapper = QuestionWrapper;
+var activeStyles = {
+    backgroundColor: '#fbfbff'
+};
 //# sourceMappingURL=QuestionWrapper.js.map

package/lib/components/QuestionWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionWrapper.js","sourceRoot":"","sources":["../../src/components/QuestionWrapper.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAC1B,0DAAoC;AAEpC,uDAAsD;AAQ/C,IAAM,eAAe,GAAmC,UAAA,KAAK;IAC1D,IAAA,QAAQ,GAAiB,KAAK,SAAtB,EAAE,UAAU,GAAK,KAAK,WAAV,CAAW;IAEvC,IAAM,SAAS,GAAG,IAAA,uBAAU,EAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,aAAa,EAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC,SAAS,EAAE;QAC/H,MAAM,EAAE,UAAU,CAAC,OAAO,IAAI,UAAU,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;KAC3D,CAAC,CAAC;IAEH,OAAO,CACL,0CAAK,SAAS,EAAE,SAAS;QACvB,iCAAC,mCAAgB,IAAC,UAAU,EAAE,UAAU,GAAI;QAC3C,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,eAAe,mBAa1B"}
+{"version":3,"file":"QuestionWrapper.js","sourceRoot":"","sources":["../../src/components/QuestionWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,0DAAoC;AAEpC,uDAAsD;AAS/C,IAAM,eAAe,GAAmC,UAAA,KAAK;IAC1D,IAAA,QAAQ,GAAiC,KAAK,SAAtC,EAAE,UAAU,GAAqB,KAAK,WAA1B,EAAE,cAAc,GAAK,KAAK,eAAV,CAAW;IACvD,IAAM,WAAW,GAAG,kBAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACvC,cAAc,CAAC,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IAE1C,IAAM,SAAS,GAAG,IAAA,uBAAU,EAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,aAAa,EAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC,SAAS,EAAE;QAC/H,MAAM,EAAE,UAAU,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;QAC7D,MAAM,EAAE,UAAU,CAAC,gBAAgB;KACpC,CAAC,CAAC;IAEH,OAAO,CACL,0CAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,eAAM,CAAC,UAAU,CAAC,gBAAgB,IAAI,YAAY,CAAC;QACnG,iCAAC,mCAAgB,IAAC,UAAU,EAAE,UAAU,GAAI;QAC3C,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,eAAe,mBAgB1B;AAGF,IAAM,YAAY,GAAG;IACnB,eAAe,EAAE,SAAS;CAC3B,CAAA"}

package/lib/components/ValidationErrors.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,7 +20,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var react_i18next_1 = require("react-i18next");
 var ValidationErrors = function (_a) {
     var fieldState = _a.fieldState;
-    if (!fieldState.touched)
+    if (!fieldState.beenActive)
         return null;
     return react_1["default"].createElement(react_1["default"].Fragment, null, fieldState.errors.map(function (error) { return react_1["default"].createElement(Error, { key: error.type, error: error }); }));
 };
@@ -18,6 +29,8 @@ var Error = function (_a) {
     var error = _a.error;
     var t = (0, react_i18next_1.useTranslation)().t;
     var className = (0, classnames_1["default"])("error", error.type);
-    return react_1["default"].createElement("div", { className: className }, t("validations.".concat(error.message.t), error));
+    var args = __assign({}, error.message);
+    delete args.t;
+    return react_1["default"].createElement("div", { className: className }, t("validations.".concat(error.message.t), args));
 };
 //# sourceMappingURL=ValidationErrors.js.map

package/lib/components/ValidationErrors.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationErrors.js","sourceRoot":"","sources":["../../src/components/ValidationErrors.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,0DAAoC;AACpC,+CAA+C;AAMxC,IAAM,gBAAgB,GAAmC,UAAC,EAAc;QAAZ,UAAU,gBAAA;IAC3E,IAAI,CAAC,UAAU,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAErC,OAAO,oEAAG,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,iCAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,EAAxC,CAAwC,CAAC,CAAI,CAAC;AACzF,CAAC,CAAC;AAJW,QAAA,gBAAgB,oBAI3B;AAEF,IAAM,KAAK,GAA+C,UAAC,EAAS;QAAP,KAAK,WAAA;IACxD,IAAA,CAAC,GAAK,IAAA,8BAAc,GAAE,EAArB,CAAsB;IAC/B,IAAM,SAAS,GAAG,IAAA,uBAAU,EAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAElD,OAAO,0CAAK,SAAS,EAAE,SAAS,IAC7B,CAAC,CAAC,sBAAe,KAAK,CAAC,OAAO,CAAC,CAAC,CAAE,EAAE,KAAK,CAAC,CACvC,CAAA;AACR,CAAC,CAAC"}
+{"version":3,"file":"ValidationErrors.js","sourceRoot":"","sources":["../../src/components/ValidationErrors.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAE1B,0DAAoC;AACpC,+CAA+C;AAMxC,IAAM,gBAAgB,GAAmC,UAAC,EAAc;QAAZ,UAAU,gBAAA;IAC3E,IAAI,CAAC,UAAU,CAAC,UAAU;QAAE,OAAO,IAAI,CAAC;IAExC,OAAO,oEAAG,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,iCAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,EAAxC,CAAwC,CAAC,CAAI,CAAC;AACzF,CAAC,CAAC;AAJW,QAAA,gBAAgB,oBAI3B;AAEF,IAAM,KAAK,GAA+C,UAAC,EAAS;QAAP,KAAK,WAAA;IACxD,IAAA,CAAC,GAAK,IAAA,8BAAc,GAAE,EAArB,CAAsB;IAC/B,IAAM,SAAS,GAAG,IAAA,uBAAU,EAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAClD,IAAM,IAAI,gBAAY,KAAK,CAAC,OAAO,CAAC,CAAC;IACrC,OAAO,IAAI,CAAC,CAAC,CAAC;IAEd,OAAO,0CAAK,SAAS,EAAE,SAAS,IAC7B,CAAC,CAAC,sBAAe,KAAK,CAAC,OAAO,CAAC,CAAC,CAAE,EAAE,IAAI,CAAC,CACtC,CAAA;AACR,CAAC,CAAC"}

package/lib/components/items/QuestionItem.d.ts

@@ -4,6 +4,7 @@ interface Props {
     questionnaire: Questionnaire;
     response: Response;
     fieldKey: string;
+    setQuestionRef: (key: string, ref: React.RefObject<HTMLElement>) => void;
 }
 export declare const QuestionItem: React.FunctionComponent<Props>;
 export {};

package/lib/components/items/QuestionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionItem.d.ts","sourceRoot":"","sources":["../../../src/components/items/QuestionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAYzE,UAAU,KAAK;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CA0DvD,CAAC"}
+{"version":3,"file":"QuestionItem.d.ts","sourceRoot":"","sources":["../../../src/components/items/QuestionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAYzE,UAAU,KAAK;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CA0DvD,CAAC"}

package/lib/components/items/QuestionItem.js

@@ -16,68 +16,68 @@ var SliderQuestion_1 = require("../questions/SliderQuestion");
 var TextareaQuestion_1 = require("../questions/TextareaQuestion");
 var CheckBoxQuestion_1 = require("../questions/CheckBoxQuestion");
 var QuestionItem = function (_a) {
-    var questionnaire = _a.questionnaire, response = _a.response, fieldKey = _a.fieldKey;
+    var questionnaire = _a.questionnaire, response = _a.response, fieldKey = _a.fieldKey, setQuestionRef = _a.setQuestionRef;
     var question = questionnaire.getField(fieldKey);
     switch (question.as) {
         case "string": {
             var fieldState = response.getFieldState(fieldKey);
             if (fieldState.hidden)
                 return null;
-            return react_1["default"].createElement(StringQuestion_1.StringQuestion, { question: question, fieldState: fieldState });
+            return react_1["default"].createElement(StringQuestion_1.StringQuestion, { question: question, fieldState: fieldState, setQuestionRef: setQuestionRef });
         }
         case "scale": {
             var fieldState = response.getFieldState(fieldKey);
             if (fieldState.hidden)
                 return null;
-            return react_1["default"].createElement(ScaleQuestion_1.ScaleQuestion, { question: question, fieldState: fieldState });
+            return react_1["default"].createElement(ScaleQuestion_1.ScaleQuestion, { question: question, fieldState: fieldState, setQuestionRef: setQuestionRef });
         }
         case "radio": {
             var fieldState = response.getFieldState(fieldKey);
             if (fieldState.hidden)
                 return null;
-            return react_1["default"].createElement(RadioQuestion_1.RadioQuestion, { question: question, fieldState: fieldState });
+            return react_1["default"].createElement(RadioQuestion_1.RadioQuestion, { question: question, fieldState: fieldState, setQuestionRef: setQuestionRef });
         }
         case "select": {
             var fieldState = response.getFieldState(fieldKey);
             if (fieldState.hidden)
                 return null;
-            return react_1["default"].createElement(SelectQuestion_1.SelectQuestion, { question: question, fieldState: fieldState });
+            return react_1["default"].createElement(SelectQuestion_1.SelectQuestion, { question: question, fieldState: fieldState, setQuestionRef: setQuestionRef });
         }
         case "date_parts": {
             var fieldState = response.getFieldState(fieldKey);
             if (fieldState.hidden)
                 return null;
-            return react_1["default"].createElement(DatePartsQuestion_1.DatePartsQuestion, { question: question, fieldState: fieldState });
+            return react_1["default"].createElement(DatePartsQuestion_1.DatePartsQuestion, { question: question, fieldState: fieldState, setQuestionRef: setQuestionRef });
         }
         case "integer": {
             var fieldState = response.getFieldState(fieldKey);
             if (fieldState.hidden)
                 return null;
-            return react_1["default"].createElement(IntegerQuestion_1.IntegerQuestion, { question: question, fieldState: fieldState });
+            return react_1["default"].createElement(IntegerQuestion_1.IntegerQuestion, { question: question, fieldState: fieldState, setQuestionRef: setQuestionRef });
         }
         case "float": {
             var fieldState = response.getFieldState(fieldKey);
             if (fieldState.hidden)
                 return null;
-            return react_1["default"].createElement(FloatQuestion_1.FloatQuestion, { question: question, fieldState: fieldState });
+            return react_1["default"].createElement(FloatQuestion_1.FloatQuestion, { question: question, fieldState: fieldState, setQuestionRef: setQuestionRef });
         }
         case "slider": {
             var fieldState = response.getFieldState(fieldKey);
             if (fieldState.hidden)
                 return null;
-            return react_1["default"].createElement(SliderQuestion_1.SliderQuestion, { question: question, fieldState: fieldState });
+            return react_1["default"].createElement(SliderQuestion_1.SliderQuestion, { question: question, fieldState: fieldState, setQuestionRef: setQuestionRef });
         }
         case "textarea": {
             var fieldState = response.getFieldState(fieldKey);
             if (fieldState.hidden)
                 return null;
-            return react_1["default"].createElement(TextareaQuestion_1.TextareaQuestion, { question: question, fieldState: fieldState });
+            return react_1["default"].createElement(TextareaQuestion_1.TextareaQuestion, { question: question, fieldState: fieldState, setQuestionRef: setQuestionRef });
         }
         case "check_box": {
             var fieldState = response.getFieldState(fieldKey);
             if (fieldState.hidden)
                 return null;
-            return react_1["default"].createElement(CheckBoxQuestion_1.CheckBoxQuestion, { question: question, fieldState: fieldState });
+            return react_1["default"].createElement(CheckBoxQuestion_1.CheckBoxQuestion, { question: question, fieldState: fieldState, setQuestionRef: setQuestionRef });
         }
     }
     throw new Error("unknown question type");

package/lib/components/items/QuestionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionItem.js","sourceRoot":"","sources":["../../../src/components/items/QuestionItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"QuestionItem.js","sourceRoot":"","sources":["../../../src/components/items/QuestionItem.tsx"],"names":[],"mappings":"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"}

package/lib/components/questions/CheckBoxQuestion.d.ts

@@ -4,6 +4,7 @@ declare type CheckBoxFieldState = IFieldState<Set<string>>;
 interface Props {
     question: ICheckBoxQuestion;
     fieldState: CheckBoxFieldState;
+    setQuestionRef: (key: string, ref: React.RefObject<HTMLElement>) => void;
 }
 export declare const CheckBoxQuestion: React.FunctionComponent<Props>;
 export {};

package/lib/components/questions/CheckBoxQuestion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxQuestion.d.ts","sourceRoot":"","sources":["../../../src/components/questions/CheckBoxQuestion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAW,WAAW,EAAE,MAAM,YAAY,CAAC;AAMrE,aAAK,kBAAkB,GAAG,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;AAEnD,UAAU,KAAK;IACb,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,UAAU,EAAE,kBAAkB,CAAC;CAChC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAuB3D,CAAC"}
+{"version":3,"file":"CheckBoxQuestion.d.ts","sourceRoot":"","sources":["../../../src/components/questions/CheckBoxQuestion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAmB,WAAW,EAAE,MAAM,YAAY,CAAC;AAM7E,aAAK,kBAAkB,GAAG,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;AAEnD,UAAU,KAAK;IACb,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CA6B3D,CAAC"}

package/lib/components/questions/CheckBoxQuestion.js

@@ -10,13 +10,15 @@ var MainLabel_1 = require("../MainLabel");
 var QuestionWrapper_1 = require("../QuestionWrapper");
 var QuestionDescription_1 = require("../QuestionDescription");
 var CheckBoxQuestion = function (_a) {
-    var question = _a.question, fieldState = _a.fieldState;
-    var fieldsClassNames = (0, classnames_1["default"])("fields", question.presentation !== "horizontal" ? "options".concat(question.options.length) : null);
-    return (react_1["default"].createElement(QuestionWrapper_1.QuestionWrapper, { question: question, fieldState: fieldState },
+    var question = _a.question, fieldState = _a.fieldState, setQuestionRef = _a.setQuestionRef;
+    var fieldsClassNames = (0, classnames_1["default"])("fields", question.presentation !== "horizontal" ? "options".concat(question.children.length) : null);
+    return (react_1["default"].createElement(QuestionWrapper_1.QuestionWrapper, { question: question, fieldState: fieldState, setQuestionRef: setQuestionRef },
         react_1["default"].createElement(MainLabel_1.MainLabel, { question: question }),
         react_1["default"].createElement("div", { className: "description-and-fields" },
             react_1["default"].createElement(QuestionDescription_1.QuestionDescription, { question: question }),
-            react_1["default"].createElement("div", { className: fieldsClassNames, id: htmlId(question) }, question.options.map(function (option, index) { return (react_1["default"].createElement(Option, { key: option.key, question: question, option: option, index: index, fieldState: fieldState })); })))));
+            react_1["default"].createElement("div", { className: fieldsClassNames, id: htmlId(question) }, question.children.map(function (child, index) { return (child.type === 'option'
+                ? react_1["default"].createElement(Option, { key: child.key, question: question, option: child, index: index, fieldState: fieldState })
+                : react_1["default"].createElement("div", { key: child.key, className: "inner-title", dangerouslySetInnerHTML: { __html: child.html } })); })))));
 };
 exports.CheckBoxQuestion = CheckBoxQuestion;
 var Option = function (_a) {
@@ -29,11 +31,11 @@ var Option = function (_a) {
         deselectable: false // TODO
     });
     var value = fieldState.value || new Set();
-    var checked = value.has(option.key);
-    var handleChange = function (event) { return fieldState.setValue(toggleValue(fieldState, option.key)); };
+    var checked = value.has(option.key) || false;
+    var handleChange = function (event) { return option.key && fieldState.setValue(toggleValue(fieldState, option.key)); };
     return (react_1["default"].createElement("div", { className: divClassNames },
         react_1["default"].createElement("div", { className: "radiocheckwrapper" },
-            react_1["default"].createElement("input", { type: "checkbox", name: question.key, id: option.viewId, className: inputClassNames, checked: checked, onChange: handleChange })),
+            react_1["default"].createElement("input", { type: "checkbox", name: question.key, id: option.viewId, className: inputClassNames, checked: checked, onChange: handleChange, onFocus: fieldState.setAsActiveQuestion })),
         react_1["default"].createElement(ShowValue, { question: question, option: option }),
         react_1["default"].createElement("div", { className: "labelwrapper" },
             react_1["default"].createElement("label", { htmlFor: option.viewId },