@constructor-io/constructorio-ui-quizzes 1.17.24 → 1.17.26

package/lib/cjs/components/CioQuiz/actions.js

@@ -8,6 +8,8 @@ var QuestionTypes;
     QuestionTypes["Cover"] = "cover";
     QuestionTypes["SingleSelect"] = "single";
     QuestionTypes["MultipleSelect"] = "multiple";
+    QuestionTypes["SingleFilterValue"] = "single_filter_value";
+    QuestionTypes["MultipleFilterValues"] = "multiple_filter_values";
     QuestionTypes["Next"] = "next";
     QuestionTypes["Skip"] = "skip";
     QuestionTypes["Back"] = "back";

package/lib/cjs/components/CioQuiz/index.js

@@ -13,6 +13,7 @@ const SessionPromptModal_1 = tslib_1.__importDefault(require("../SessionPromptMo
 const ShareResultsModal_1 = tslib_1.__importDefault(require("../ShareResultsModal/ShareResultsModal"));
 const utils_1 = require("../../utils");
 const ProgressBar_1 = tslib_1.__importDefault(require("../ProgressBar/ProgressBar"));
+const actions_1 = require("./actions");
 function CioQuiz(props) {
     var _a;
     const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, getShareResultsButtonProps, } = (0, useQuiz_1.default)(props);
@@ -70,7 +71,9 @@ function CioQuiz(props) {
     const questionData = (_a = state.quiz.currentQuestion) === null || _a === void 0 ? void 0 : _a.next_question;
     const questionType = questionData === null || questionData === void 0 ? void 0 : questionData.type;
     const questionImages = questionData === null || questionData === void 0 ? void 0 : questionData.images;
-    const displayBackgroundImage = (questionType === 'single' || questionType === 'multiple') && questionImages;
+    const displayBackgroundImage = (questionType === actions_1.QuestionTypes.SingleSelect ||
+        questionType === actions_1.QuestionTypes.MultipleSelect) &&
+        questionImages;
     if (state.quiz.requestState === constants_1.RequestStates.Success) {
         return (react_1.default.createElement("div", { className: 'cio-quiz', style: { overflow: showShareModal || showSessionPrompt ? 'hidden' : undefined } },
             displayBackgroundImage && (0, utils_1.renderImages)(questionImages, 'cio-question-background-image'),

package/lib/cjs/components/CioQuiz/quizApiReducer.js

@@ -15,14 +15,16 @@ function apiReducer(state, action) {
         case actions_1.QuizAPIActionTypes.SET_IS_ERROR:
             return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Error, quizCurrentQuestion: undefined, quizResults: undefined, selectedOptionsWithAttributes: undefined, matchedOptions: undefined });
         case actions_1.QuizAPIActionTypes.SET_CURRENT_QUESTION: {
-            const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, } = (0, utils_1.getQuestionTypes)((_c = (_b = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question) === null || _c === void 0 ? void 0 : _c.type);
+            const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, isSingleFilterQuestion, isMultipleFilterQuestion, } = (0, utils_1.getQuestionTypes)((_c = (_b = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question) === null || _c === void 0 ? void 0 : _c.type);
             const quizFirstQuestion = state.quizFirstQuestion || ((_d = action.payload) === null || _d === void 0 ? void 0 : _d.quizCurrentQuestion);
             return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizCurrentQuestion: Object.assign(Object.assign({}, (_e = action.payload) === null || _e === void 0 ? void 0 : _e.quizCurrentQuestion), { isFirstQuestion: ((_f = quizFirstQuestion === null || quizFirstQuestion === void 0 ? void 0 : quizFirstQuestion.next_question) === null || _f === void 0 ? void 0 : _f.id) ===
                         ((_j = (_h = (_g = action.payload) === null || _g === void 0 ? void 0 : _g.quizCurrentQuestion) === null || _h === void 0 ? void 0 : _h.next_question) === null || _j === void 0 ? void 0 : _j.id), isOpenQuestion,
                     isCoverQuestion,
                     isSingleQuestion,
                     isMultipleQuestion,
-                    isSelectQuestion }), quizFirstQuestion, quizResults: undefined, selectedOptionsWithAttributes: undefined, matchedOptions: undefined });
+                    isSelectQuestion,
+                    isSingleFilterQuestion,
+                    isMultipleFilterQuestion }), quizFirstQuestion, quizResults: undefined, selectedOptionsWithAttributes: undefined, matchedOptions: undefined });
         }
         case actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS: {
             const selectedOptionsWithAttributes = ((_k = action.payload) === null || _k === void 0 ? void 0 : _k.quizResults.quiz_selected_options.filter((option) => option.has_attribute).map((option) => option.value)) || [];

package/lib/cjs/components/CioQuiz/quizLocalReducer.js

@@ -14,8 +14,33 @@ function answerInputReducer(state, action) {
             value: action.payload.input,
         } });
 }
-function quizLocalReducer(state, action) {
+function handleNextQuestion(state) {
     var _a;
+    const { answers, answerInputs } = state;
+    const newAnswers = [...answers];
+    const lastAnswerInputIndex = answers.length;
+    const currentAnswerInput = (_a = Object.values(state.answerInputs)) === null || _a === void 0 ? void 0 : _a[lastAnswerInputIndex];
+    switch (currentAnswerInput.type) {
+        case actions_1.QuestionTypes.OpenText:
+            newAnswers.push(['true']);
+            break;
+        case actions_1.QuestionTypes.Cover:
+            newAnswers.push(['seen']);
+            break;
+        case actions_1.QuestionTypes.SingleSelect:
+        case actions_1.QuestionTypes.MultipleSelect:
+        case actions_1.QuestionTypes.SingleFilterValue:
+        case actions_1.QuestionTypes.MultipleFilterValues:
+            newAnswers.push(currentAnswerInput.value.map((answer) => answer.id));
+            break;
+        default:
+            newAnswers.push([]);
+    }
+    return Object.assign(Object.assign({}, state), { 
+        // We now commit current answers to prevAnswerInputs
+        prevAnswerInputs: answerInputs, answers: newAnswers, isQuizCompleted: false });
+}
+function quizLocalReducer(state, action) {
     switch (action.type) {
         case actions_1.QuestionTypes.OpenText:
             return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
@@ -25,28 +50,12 @@ function quizLocalReducer(state, action) {
             return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
         case actions_1.QuestionTypes.MultipleSelect:
             return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
+        case actions_1.QuestionTypes.SingleFilterValue:
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
+        case actions_1.QuestionTypes.MultipleFilterValues:
+            return Object.assign(Object.assign({}, state), { answerInputs: answerInputReducer(state.answerInputs, action), isQuizCompleted: false });
         case actions_1.QuestionTypes.Next: {
-            const { answers, answerInputs } = state;
-            const newAnswers = [...answers];
-            const lastAnswerInputIndex = answers.length;
-            const currentAnswerInput = (_a = Object.values(state.answerInputs)) === null || _a === void 0 ? void 0 : _a[lastAnswerInputIndex];
-            switch (currentAnswerInput.type) {
-                case actions_1.QuestionTypes.OpenText:
-                    newAnswers.push(['true']);
-                    break;
-                case actions_1.QuestionTypes.Cover:
-                    newAnswers.push(['seen']);
-                    break;
-                case actions_1.QuestionTypes.SingleSelect:
-                case actions_1.QuestionTypes.MultipleSelect:
-                    newAnswers.push(currentAnswerInput.value.map((answer) => answer.id));
-                    break;
-                default:
-                    newAnswers.push([]);
-            }
-            return Object.assign(Object.assign({}, state), { 
-                // We now commit current answers to prevAnswerInputs
-                prevAnswerInputs: answerInputs, answers: newAnswers, isQuizCompleted: false });
+            return handleNextQuestion(state);
         }
         case actions_1.QuestionTypes.Skip: {
             const { answers, answerInputs } = state;
@@ -62,6 +71,8 @@ function quizLocalReducer(state, action) {
                     break;
                 case actions_1.QuestionTypes.SingleSelect:
                 case actions_1.QuestionTypes.MultipleSelect:
+                case actions_1.QuestionTypes.SingleFilterValue:
+                case actions_1.QuestionTypes.MultipleFilterValues:
                 default:
                     newAnswers.push([]);
             }

package/lib/cjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -16,7 +16,10 @@ function SelectTypeQuestion() {
     if (state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) {
         question = state.quiz.currentQuestion.next_question;
         hasImages = question === null || question === void 0 ? void 0 : question.options.some((option) => option.images);
-        instructions = (question === null || question === void 0 ? void 0 : question.type) === actions_1.QuestionTypes.MultipleSelect && 'Select one or more options';
+        instructions =
+            ((question === null || question === void 0 ? void 0 : question.type) === actions_1.QuestionTypes.MultipleSelect ||
+                question.type === actions_1.QuestionTypes.MultipleFilterValues) &&
+                'Select one or more options';
     }
     if (question) {
         return (react_1.default.createElement("div", { className: 'cio-select-question-container', "data-cnstrc-question-type": question.type, "data-question-key": question.key },

package/lib/cjs/hooks/usePropsGetters/useSelectInputProps.js

@@ -10,11 +10,12 @@ function useSelectInputProps(quizAnswerChanged, nextQuestion, currentQuestionDat
     const [selected, setSelected] = (0, react_1.useState)({});
     const singleSelectClicked = (0, react_1.useRef)({});
     const toggleIdSelected = (0, react_1.useCallback)((id) => {
-        if (type === actions_1.QuestionTypes.SingleSelect) {
+        if (type === actions_1.QuestionTypes.SingleSelect || type === actions_1.QuestionTypes.SingleFilterValue) {
             singleSelectClicked.current = true;
             setSelected({ [id]: true });
+            return;
         }
-        else if (type === actions_1.QuestionTypes.MultipleSelect) {
+        if (type === actions_1.QuestionTypes.MultipleSelect || type === actions_1.QuestionTypes.MultipleFilterValues) {
             if (selected[id]) {
                 const newState = Object.assign({}, selected);
                 delete newState[id];
@@ -39,7 +40,7 @@ function useSelectInputProps(quizAnswerChanged, nextQuestion, currentQuestionDat
             const prevSelected = {};
             if (Array.isArray(currentAnswer === null || currentAnswer === void 0 ? void 0 : currentAnswer.value)) {
                 (_a = currentAnswer === null || currentAnswer === void 0 ? void 0 : currentAnswer.value) === null || _a === void 0 ? void 0 : _a.forEach((answer) => {
-                    prevSelected[Number(answer.id)] = true;
+                    prevSelected[answer.id] = true;
                     setSelected(prevSelected);
                 });
             }
@@ -52,11 +53,20 @@ function useSelectInputProps(quizAnswerChanged, nextQuestion, currentQuestionDat
     }, [currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.id]);
     // Update global state
     (0, react_1.useEffect)(() => {
-        var _a, _b;
-        if ((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === 'multiple' || (currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === 'single') {
+        var _a, _b, _c, _d;
+        if ((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === actions_1.QuestionTypes.MultipleSelect ||
+            (currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === actions_1.QuestionTypes.SingleSelect) {
             const selectedAnswers = (_b = (_a = currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.options) === null || _a === void 0 ? void 0 : _a.filter((opt) => selected[Number(opt.id)])) === null || _b === void 0 ? void 0 : _b.map((opt) => ({ id: opt.id, value: opt.value }));
             quizAnswerChanged(selectedAnswers);
         }
+        if ((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === actions_1.QuestionTypes.MultipleFilterValues ||
+            (currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === actions_1.QuestionTypes.SingleFilterValue) {
+            const selectedAnswers = (_d = (_c = currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.options) === null || _c === void 0 ? void 0 : _c.filter((opt) => selected[String(opt.id)])) === null || _d === void 0 ? void 0 : _d.map((opt) => ({
+                id: opt.id,
+                value: opt.value,
+            }));
+            quizAnswerChanged(selectedAnswers);
+        }
     }, [
         selected,
         currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.id,
@@ -67,7 +77,9 @@ function useSelectInputProps(quizAnswerChanged, nextQuestion, currentQuestionDat
     // Go to next question only every time answerInputs (answers input state) changes...
     // and it's a singleSelectQuestion and user has just clicked on an option
     (0, react_1.useEffect)(() => {
-        if ((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === 'single' && singleSelectClicked.current) {
+        if (((currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === actions_1.QuestionTypes.SingleSelect ||
+            (currentQuestionData === null || currentQuestionData === void 0 ? void 0 : currentQuestionData.type) === actions_1.QuestionTypes.SingleFilterValue) &&
+            singleSelectClicked.current) {
             nextQuestion();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/cjs/hooks/useQuizEvents/useQuizAnswerChangeHandler.js

@@ -29,6 +29,8 @@ const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
                     break;
                 case actions_1.QuestionTypes.SingleSelect:
                 case actions_1.QuestionTypes.MultipleSelect:
+                case actions_1.QuestionTypes.SingleFilterValue:
+                case actions_1.QuestionTypes.MultipleFilterValues:
                     dispatchLocalState({
                         type: currentQuestion.next_question.type,
                         payload: {

package/lib/cjs/utils.js

@@ -77,13 +77,17 @@ const getQuestionTypes = (questionType) => {
     const isCoverQuestion = questionType === actions_1.QuestionTypes.Cover;
     const isSingleQuestion = questionType === actions_1.QuestionTypes.SingleSelect;
     const isMultipleQuestion = questionType === actions_1.QuestionTypes.MultipleSelect;
-    const isSelectQuestion = isSingleQuestion || isMultipleQuestion;
+    const isSingleFilterQuestion = questionType === actions_1.QuestionTypes.SingleFilterValue;
+    const isMultipleFilterQuestion = questionType === actions_1.QuestionTypes.MultipleFilterValues;
+    const isSelectQuestion = isSingleQuestion || isMultipleQuestion || isSingleFilterQuestion || isMultipleFilterQuestion;
     return {
         isOpenQuestion,
         isCoverQuestion,
         isSingleQuestion,
         isMultipleQuestion,
         isSelectQuestion,
+        isSingleFilterQuestion,
+        isMultipleFilterQuestion,
     };
 };
 exports.getQuestionTypes = getQuestionTypes;

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.17.24';
+exports.default = '1.17.26';

package/lib/mjs/components/CioQuiz/actions.js

@@ -5,6 +5,8 @@ export var QuestionTypes;
     QuestionTypes["Cover"] = "cover";
     QuestionTypes["SingleSelect"] = "single";
     QuestionTypes["MultipleSelect"] = "multiple";
+    QuestionTypes["SingleFilterValue"] = "single_filter_value";
+    QuestionTypes["MultipleFilterValues"] = "multiple_filter_values";
     QuestionTypes["Next"] = "next";
     QuestionTypes["Skip"] = "skip";
     QuestionTypes["Back"] = "back";

package/lib/mjs/components/CioQuiz/index.js

@@ -10,6 +10,7 @@ import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
 import ShareResultsModal from '../ShareResultsModal/ShareResultsModal';
 import { convertPrimaryColorsToString, renderImages } from '../../utils';
 import ProgressBar from '../ProgressBar/ProgressBar';
+import { QuestionTypes } from './actions';
 export default function CioQuiz(props) {
     const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, getShareResultsButtonProps, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
@@ -66,7 +67,9 @@ export default function CioQuiz(props) {
     const questionData = state.quiz.currentQuestion?.next_question;
     const questionType = questionData?.type;
     const questionImages = questionData?.images;
-    const displayBackgroundImage = (questionType === 'single' || questionType === 'multiple') && questionImages;
+    const displayBackgroundImage = (questionType === QuestionTypes.SingleSelect ||
+        questionType === QuestionTypes.MultipleSelect) &&
+        questionImages;
     if (state.quiz.requestState === RequestStates.Success) {
         return (React.createElement("div", { className: 'cio-quiz', style: { overflow: showShareModal || showSessionPrompt ? 'hidden' : undefined } },
             displayBackgroundImage && renderImages(questionImages, 'cio-question-background-image'),

package/lib/mjs/components/CioQuiz/quizApiReducer.js

@@ -23,7 +23,7 @@ export default function apiReducer(state, action) {
                 matchedOptions: undefined,
             };
         case QuizAPIActionTypes.SET_CURRENT_QUESTION: {
-            const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, } = getQuestionTypes(action.payload?.quizCurrentQuestion?.next_question?.type);
+            const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, isSingleFilterQuestion, isMultipleFilterQuestion, } = getQuestionTypes(action.payload?.quizCurrentQuestion?.next_question?.type);
             const quizFirstQuestion = state.quizFirstQuestion || action.payload?.quizCurrentQuestion;
             return {
                 ...state,
@@ -37,6 +37,8 @@ export default function apiReducer(state, action) {
                     isSingleQuestion,
                     isMultipleQuestion,
                     isSelectQuestion,
+                    isSingleFilterQuestion,
+                    isMultipleFilterQuestion,
                 },
                 quizFirstQuestion,
                 quizResults: undefined,

package/lib/mjs/components/CioQuiz/quizLocalReducer.js

@@ -14,6 +14,35 @@ function answerInputReducer(state, action) {
         },
     };
 }
+function handleNextQuestion(state) {
+    const { answers, answerInputs } = state;
+    const newAnswers = [...answers];
+    const lastAnswerInputIndex = answers.length;
+    const currentAnswerInput = Object.values(state.answerInputs)?.[lastAnswerInputIndex];
+    switch (currentAnswerInput.type) {
+        case QuestionTypes.OpenText:
+            newAnswers.push(['true']);
+            break;
+        case QuestionTypes.Cover:
+            newAnswers.push(['seen']);
+            break;
+        case QuestionTypes.SingleSelect:
+        case QuestionTypes.MultipleSelect:
+        case QuestionTypes.SingleFilterValue:
+        case QuestionTypes.MultipleFilterValues:
+            newAnswers.push(currentAnswerInput.value.map((answer) => answer.id));
+            break;
+        default:
+            newAnswers.push([]);
+    }
+    return {
+        ...state,
+        // We now commit current answers to prevAnswerInputs
+        prevAnswerInputs: answerInputs,
+        answers: newAnswers,
+        isQuizCompleted: false,
+    };
+}
 export default function quizLocalReducer(state, action) {
     switch (action.type) {
         case QuestionTypes.OpenText:
@@ -40,32 +69,20 @@ export default function quizLocalReducer(state, action) {
                 answerInputs: answerInputReducer(state.answerInputs, action),
                 isQuizCompleted: false,
             };
-        case QuestionTypes.Next: {
-            const { answers, answerInputs } = state;
-            const newAnswers = [...answers];
-            const lastAnswerInputIndex = answers.length;
-            const currentAnswerInput = Object.values(state.answerInputs)?.[lastAnswerInputIndex];
-            switch (currentAnswerInput.type) {
-                case QuestionTypes.OpenText:
-                    newAnswers.push(['true']);
-                    break;
-                case QuestionTypes.Cover:
-                    newAnswers.push(['seen']);
-                    break;
-                case QuestionTypes.SingleSelect:
-                case QuestionTypes.MultipleSelect:
-                    newAnswers.push(currentAnswerInput.value.map((answer) => answer.id));
-                    break;
-                default:
-                    newAnswers.push([]);
-            }
+        case QuestionTypes.SingleFilterValue:
             return {
                 ...state,
-                // We now commit current answers to prevAnswerInputs
-                prevAnswerInputs: answerInputs,
-                answers: newAnswers,
+                answerInputs: answerInputReducer(state.answerInputs, action),
                 isQuizCompleted: false,
             };
+        case QuestionTypes.MultipleFilterValues:
+            return {
+                ...state,
+                answerInputs: answerInputReducer(state.answerInputs, action),
+                isQuizCompleted: false,
+            };
+        case QuestionTypes.Next: {
+            return handleNextQuestion(state);
         }
         case QuestionTypes.Skip: {
             const { answers, answerInputs } = state;
@@ -81,6 +98,8 @@ export default function quizLocalReducer(state, action) {
                     break;
                 case QuestionTypes.SingleSelect:
                 case QuestionTypes.MultipleSelect:
+                case QuestionTypes.SingleFilterValue:
+                case QuestionTypes.MultipleFilterValues:
                 default:
                     newAnswers.push([]);
             }

package/lib/mjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -12,7 +12,10 @@ function SelectTypeQuestion() {
     if (state?.quiz.currentQuestion) {
         question = state.quiz.currentQuestion.next_question;
         hasImages = question?.options.some((option) => option.images);
-        instructions = question?.type === QuestionTypes.MultipleSelect && 'Select one or more options';
+        instructions =
+            (question?.type === QuestionTypes.MultipleSelect ||
+                question.type === QuestionTypes.MultipleFilterValues) &&
+                'Select one or more options';
     }
     if (question) {
         return (React.createElement("div", { className: 'cio-select-question-container', "data-cnstrc-question-type": question.type, "data-question-key": question.key },

package/lib/mjs/hooks/usePropsGetters/useSelectInputProps.js

@@ -7,11 +7,12 @@ export default function useSelectInputProps(quizAnswerChanged, nextQuestion, cur
     const [selected, setSelected] = useState({});
     const singleSelectClicked = useRef({});
     const toggleIdSelected = useCallback((id) => {
-        if (type === QuestionTypes.SingleSelect) {
+        if (type === QuestionTypes.SingleSelect || type === QuestionTypes.SingleFilterValue) {
             singleSelectClicked.current = true;
             setSelected({ [id]: true });
+            return;
         }
-        else if (type === QuestionTypes.MultipleSelect) {
+        if (type === QuestionTypes.MultipleSelect || type === QuestionTypes.MultipleFilterValues) {
             if (selected[id]) {
                 const newState = { ...selected };
                 delete newState[id];
@@ -35,7 +36,7 @@ export default function useSelectInputProps(quizAnswerChanged, nextQuestion, cur
             const prevSelected = {};
             if (Array.isArray(currentAnswer?.value)) {
                 currentAnswer?.value?.forEach((answer) => {
-                    prevSelected[Number(answer.id)] = true;
+                    prevSelected[answer.id] = true;
                     setSelected(prevSelected);
                 });
             }
@@ -48,12 +49,23 @@ export default function useSelectInputProps(quizAnswerChanged, nextQuestion, cur
     }, [currentQuestionData?.id]);
     // Update global state
     useEffect(() => {
-        if (currentQuestionData?.type === 'multiple' || currentQuestionData?.type === 'single') {
+        if (currentQuestionData?.type === QuestionTypes.MultipleSelect ||
+            currentQuestionData?.type === QuestionTypes.SingleSelect) {
             const selectedAnswers = currentQuestionData?.options
                 ?.filter((opt) => selected[Number(opt.id)])
                 ?.map((opt) => ({ id: opt.id, value: opt.value }));
             quizAnswerChanged(selectedAnswers);
         }
+        if (currentQuestionData?.type === QuestionTypes.MultipleFilterValues ||
+            currentQuestionData?.type === QuestionTypes.SingleFilterValue) {
+            const selectedAnswers = currentQuestionData?.options
+                ?.filter((opt) => selected[String(opt.id)])
+                ?.map((opt) => ({
+                id: opt.id,
+                value: opt.value,
+            }));
+            quizAnswerChanged(selectedAnswers);
+        }
     }, [
         selected,
         currentQuestionData?.id,
@@ -64,7 +76,9 @@ export default function useSelectInputProps(quizAnswerChanged, nextQuestion, cur
     // Go to next question only every time answerInputs (answers input state) changes...
     // and it's a singleSelectQuestion and user has just clicked on an option
     useEffect(() => {
-        if (currentQuestionData?.type === 'single' && singleSelectClicked.current) {
+        if ((currentQuestionData?.type === QuestionTypes.SingleSelect ||
+            currentQuestionData?.type === QuestionTypes.SingleFilterValue) &&
+            singleSelectClicked.current) {
             nextQuestion();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/mjs/hooks/useQuizEvents/useQuizAnswerChangeHandler.js

@@ -26,6 +26,8 @@ const useQuizAnswerChangeHandler = (quizApiState, dispatchLocalState) => {
                     break;
                 case QuestionTypes.SingleSelect:
                 case QuestionTypes.MultipleSelect:
+                case QuestionTypes.SingleFilterValue:
+                case QuestionTypes.MultipleFilterValues:
                     dispatchLocalState({
                         type: currentQuestion.next_question.type,
                         payload: {

package/lib/mjs/utils.js

@@ -70,13 +70,17 @@ export const getQuestionTypes = (questionType) => {
     const isCoverQuestion = questionType === QuestionTypes.Cover;
     const isSingleQuestion = questionType === QuestionTypes.SingleSelect;
     const isMultipleQuestion = questionType === QuestionTypes.MultipleSelect;
-    const isSelectQuestion = isSingleQuestion || isMultipleQuestion;
+    const isSingleFilterQuestion = questionType === QuestionTypes.SingleFilterValue;
+    const isMultipleFilterQuestion = questionType === QuestionTypes.MultipleFilterValues;
+    const isSelectQuestion = isSingleQuestion || isMultipleQuestion || isSingleFilterQuestion || isMultipleFilterQuestion;
     return {
         isOpenQuestion,
         isCoverQuestion,
         isSingleQuestion,
         isMultipleQuestion,
         isSelectQuestion,
+        isSingleFilterQuestion,
+        isMultipleFilterQuestion,
     };
 };
 export function getPreferredColorScheme() {

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.17.24';
+export default '1.17.26';

package/lib/types/components/CioQuiz/actions.d.ts

@@ -5,6 +5,8 @@ export declare enum QuestionTypes {
     Cover = "cover",
     SingleSelect = "single",
     MultipleSelect = "multiple",
+    SingleFilterValue = "single_filter_value",
+    MultipleFilterValues = "multiple_filter_values",
     Next = "next",
     Skip = "skip",
     Back = "back",
@@ -23,7 +25,7 @@ interface Action<Type, Payload = {}> {
     type: Type;
     payload?: Payload;
 }
-export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload> | Action<QuestionTypes.Cover, CoverQuestionPayload>;
+export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload> | Action<QuestionTypes.SingleFilterValue, SelectQuestionPayload> | Action<QuestionTypes.MultipleFilterValues, SelectQuestionPayload> | Action<QuestionTypes.Cover, CoverQuestionPayload>;
 export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Skip, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
 export declare enum QuizAPIActionTypes {
     SET_IS_LOADING = 0,

package/lib/types/types.d.ts

@@ -105,13 +105,15 @@ export interface QuizSessionStorageState {
     skipToResults: boolean;
     hasSessionStorageState: () => boolean;
 }
-export type InputQuestionsTypes = QuestionTypes.OpenText | QuestionTypes.Cover | QuestionTypes.SingleSelect | QuestionTypes.MultipleSelect;
+export type InputQuestionsTypes = QuestionTypes.OpenText | QuestionTypes.Cover | QuestionTypes.SingleSelect | QuestionTypes.MultipleSelect | QuestionTypes.SingleFilterValue | QuestionTypes.MultipleFilterValues;
 export type CurrentQuestion = NextQuestionResponse & {
     isFirstQuestion: boolean;
     isOpenQuestion: boolean;
     isCoverQuestion: boolean;
     isSingleQuestion: boolean;
     isMultipleQuestion: boolean;
+    isSingleFilterQuestion: boolean;
+    isMultipleFilterQuestion: boolean;
     isSelectQuestion: boolean;
 };
 export declare namespace QuizEventsReturn {
@@ -217,7 +219,7 @@ export interface SelectInputProps {
     onKeyDown: React.KeyboardEventHandler<HTMLElement>;
     role: 'button';
     tabIndex: number;
-    key: number;
+    key: number | string;
 }
 export type GetOpenTextInputProps = () => OpenTextInputProps;
 export type GetCoverQuestionProps = () => CoverQuestionProps;

package/lib/types/utils.d.ts

@@ -27,6 +27,8 @@ export declare const getQuestionTypes: (questionType?: `${QuestionTypes}`) => {
     isSingleQuestion: boolean;
     isMultipleQuestion: boolean;
     isSelectQuestion: boolean;
+    isSingleFilterQuestion: boolean;
+    isMultipleFilterQuestion: boolean;
 };
 export declare function getPreferredColorScheme(): string;
 export declare function isFunction(fn: any): boolean;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.17.24";
+declare const _default: "1.17.26";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.17.24",
+  "version": "1.17.26",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -25,11 +25,13 @@
     },
     ".": {
       "import": "./lib/mjs/index.js",
-      "require": "./lib/cjs/index.js"
+      "require": "./lib/cjs/index.js",
+      "types": "./lib/types/index.d.ts"
     },
     "./cjs": {
       "import": "./lib/cjs/index.js",
-      "require": "./lib/cjs/index.js"
+      "require": "./lib/cjs/index.js",
+      "types": "./lib/types/index.d.ts"
     }
   },
   "files": [
@@ -59,7 +61,7 @@
     "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause' --excludePackages 'picocolors@1.0.0'"
   },
   "peerDependencies": {
-    "@constructor-io/constructorio-client-javascript": "^2.42.3",
+    "@constructor-io/constructorio-client-javascript": "^2.65.1",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0",
     "tslib": "^2.4.0"
@@ -112,6 +114,7 @@
     "typescript": "^4.9.4",
     "vite": "^4.2.1",
     "vite-plugin-css-injected-by-js": "^3.1.0",
-    "webpack": "^5.75.0"
+    "webpack": "^5.75.0",
+    "whatwg-fetch": "^3.6.20"
   }
 }