@posthog/browser-common 0.9.4 → 0.9.6

package/dist/surveys/components/QuestionTypes.js

@@ -0,0 +1,519 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    LinkQuestion: ()=>LinkQuestion,
+    MultipleChoiceQuestion: ()=>MultipleChoiceQuestion,
+    OpenTextQuestion: ()=>OpenTextQuestion,
+    RatingButton: ()=>RatingButton,
+    RatingQuestion: ()=>RatingQuestion
+});
+const jsx_runtime_namespaceObject = require("preact/jsx-runtime");
+const external_preact_namespaceObject = require("preact");
+const hooks_namespaceObject = require("preact/hooks");
+const external_survey_constants_js_namespaceObject = require("../../survey-constants.js");
+const core_namespaceObject = require("@posthog/core");
+const surveys_namespaceObject = require("@posthog/core/surveys");
+const external_icons_js_namespaceObject = require("../icons.js");
+const external_surveys_extension_utils_js_namespaceObject = require("../surveys-extension-utils.js");
+const external_BottomSection_js_namespaceObject = require("./BottomSection.js");
+const external_QuestionHeader_js_namespaceObject = require("./QuestionHeader.js");
+const isValidStringArray = (value)=>(0, core_namespaceObject.isArray)(value) && value.every((item)=>(0, core_namespaceObject.isString)(item));
+const initializeSelectedChoices = (initialValue, questionType)=>{
+    if ((0, core_namespaceObject.isString)(initialValue)) return initialValue;
+    if (isValidStringArray(initialValue)) return initialValue;
+    return questionType === external_survey_constants_js_namespaceObject.SurveyQuestionType.SingleChoice ? null : [];
+};
+const initializeOpenEndedState = (initialValue, choices)=>{
+    if ((0, core_namespaceObject.isString)(initialValue) && !choices.includes(initialValue)) return {
+        isSelected: true,
+        inputValue: initialValue
+    };
+    if (isValidStringArray(initialValue)) {
+        const openEndedValue = initialValue.find((choice)=>!choices.includes(choice));
+        if (openEndedValue) return {
+            isSelected: true,
+            inputValue: openEndedValue
+        };
+    }
+    return {
+        isSelected: false,
+        inputValue: ''
+    };
+};
+function OpenTextQuestion({ question, forceDisableHtml, appearance, onSubmit, onPreviewSubmit, displayQuestionIndex, initialValue, canGoBack, onBack }) {
+    const { isPreviewMode } = (0, external_surveys_extension_utils_js_namespaceObject.useSurveyContext)();
+    const inputRef = (0, hooks_namespaceObject.useRef)(null);
+    const [text, setText] = (0, hooks_namespaceObject.useState)(()=>{
+        if ((0, core_namespaceObject.isString)(initialValue)) return initialValue;
+        return '';
+    });
+    const disableAutofocus = appearance?.disableAutofocus;
+    (0, hooks_namespaceObject.useEffect)(()=>{
+        if (disableAutofocus) return;
+        setTimeout(()=>{
+            if (!isPreviewMode) inputRef.current?.focus();
+        }, 100);
+    }, [
+        isPreviewMode,
+        disableAutofocus
+    ]);
+    const htmlFor = `surveyQuestion${displayQuestionIndex}`;
+    const validationError = (0, hooks_namespaceObject.useMemo)(()=>(0, surveys_namespaceObject.getValidationError)(text, question.validation, question.optional), [
+        text,
+        question.validation,
+        question.optional
+    ]);
+    const minLength = (0, surveys_namespaceObject.getLengthFromRules)(question.validation, core_namespaceObject.SurveyValidationType.MinLength);
+    const maxLength = (0, surveys_namespaceObject.getLengthFromRules)(question.validation, core_namespaceObject.SurveyValidationType.MaxLength);
+    const requirementsHint = (0, hooks_namespaceObject.useMemo)(()=>(0, surveys_namespaceObject.getRequirementsHint)(minLength, maxLength), [
+        minLength,
+        maxLength
+    ]);
+    const handleSubmit = ()=>{
+        if (validationError) return;
+        onSubmit(text.trim());
+    };
+    const handlePreviewSubmit = ()=>{
+        if (validationError) return;
+        onPreviewSubmit(text.trim());
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_preact_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "question-container",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_QuestionHeader_js_namespaceObject.QuestionHeader, {
+                        question: question,
+                        forceDisableHtml: forceDisableHtml,
+                        htmlFor: htmlFor
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
+                        ref: inputRef,
+                        id: htmlFor,
+                        rows: 4,
+                        placeholder: appearance?.placeholder,
+                        minLength: minLength,
+                        maxLength: maxLength,
+                        onInput: (e)=>{
+                            setText(e.currentTarget.value);
+                            e.stopPropagation();
+                        },
+                        onKeyDown: (e)=>{
+                            e.stopPropagation();
+                            if ('Enter' === e.key && (e.metaKey || e.ctrlKey) && !validationError) {
+                                e.preventDefault();
+                                isPreviewMode ? handlePreviewSubmit() : handleSubmit();
+                            }
+                        },
+                        value: text
+                    }),
+                    requirementsHint && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "validation-hint",
+                        children: requirementsHint
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BottomSection_js_namespaceObject.BottomSection, {
+                text: question.buttonText || 'Submit',
+                submitDisabled: !!validationError,
+                appearance: appearance,
+                onSubmit: handleSubmit,
+                onPreviewSubmit: handlePreviewSubmit,
+                canGoBack: canGoBack,
+                onBack: onBack
+            })
+        ]
+    });
+}
+function LinkQuestion({ question, forceDisableHtml, appearance, onSubmit, onPreviewSubmit, canGoBack, onBack }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_preact_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "question-container",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_QuestionHeader_js_namespaceObject.QuestionHeader, {
+                    question: question,
+                    forceDisableHtml: forceDisableHtml
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BottomSection_js_namespaceObject.BottomSection, {
+                text: question.buttonText || 'Submit',
+                submitDisabled: false,
+                link: question.link,
+                appearance: appearance,
+                onSubmit: ()=>onSubmit('link clicked'),
+                onPreviewSubmit: ()=>onPreviewSubmit('link clicked'),
+                canGoBack: canGoBack,
+                onBack: onBack
+            })
+        ]
+    });
+}
+function RatingQuestion({ question, forceDisableHtml, displayQuestionIndex, appearance, onSubmit, onPreviewSubmit, initialValue, canGoBack, onBack }) {
+    const scale = question.scale;
+    const starting = 10 === question.scale ? 0 : 1;
+    const [rating, setRating] = (0, hooks_namespaceObject.useState)(()=>{
+        if ((0, core_namespaceObject.isNumber)(initialValue)) return initialValue;
+        if ((0, core_namespaceObject.isArray)(initialValue) && initialValue.length > 0 && (0, core_namespaceObject.isNumber)(parseInt(initialValue[0]))) return parseInt(initialValue[0]);
+        if ((0, core_namespaceObject.isString)(initialValue) && (0, core_namespaceObject.isNumber)(parseInt(initialValue))) return parseInt(initialValue);
+        return null;
+    });
+    const isThumbSurvey = 'emoji' === question.display && 2 === question.scale;
+    const { isPreviewMode } = (0, external_surveys_extension_utils_js_namespaceObject.useSurveyContext)();
+    const handleSubmit = (num)=>{
+        if (isPreviewMode) return onPreviewSubmit(num);
+        return onSubmit(num);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_preact_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "question-container",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_QuestionHeader_js_namespaceObject.QuestionHeader, {
+                        question: question,
+                        forceDisableHtml: forceDisableHtml
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "rating-section",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "rating-options",
+                                children: [
+                                    'emoji' === question.display && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: `rating-options-emoji${isThumbSurvey ? ' rating-options-emoji-2' : ''}`,
+                                        children: emojiScaleLists[question.scale]?.map((emoji, idx)=>{
+                                            const active = idx + 1 === rating;
+                                            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                                "aria-label": `Rate ${idx + 1}`,
+                                                className: `ratings-emoji question-${displayQuestionIndex}-rating-${idx} ${active ? 'rating-active' : ''}`,
+                                                value: idx + 1,
+                                                type: "button",
+                                                onClick: ()=>{
+                                                    const response = idx + 1;
+                                                    setRating(response);
+                                                    if (question.skipSubmitButton) handleSubmit(response);
+                                                },
+                                                children: emoji
+                                            }, idx);
+                                        })
+                                    }),
+                                    'number' === question.display && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "rating-options-number",
+                                        style: {
+                                            gridTemplateColumns: `repeat(${scale - starting + 1}, minmax(0, 1fr))`
+                                        },
+                                        children: getScaleNumbers(question.scale).map((number, idx)=>{
+                                            const active = rating === number;
+                                            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(RatingButton, {
+                                                displayQuestionIndex: displayQuestionIndex,
+                                                active: active,
+                                                appearance: appearance,
+                                                num: number,
+                                                setActiveNumber: (response)=>{
+                                                    setRating(response);
+                                                    if (question.skipSubmitButton) handleSubmit(response);
+                                                }
+                                            }, idx);
+                                        })
+                                    })
+                                ]
+                            }),
+                            !isThumbSurvey && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "rating-text",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        children: question.lowerBoundLabel
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        children: question.upperBoundLabel
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BottomSection_js_namespaceObject.BottomSection, {
+                text: question.buttonText || appearance?.submitButtonText || 'Submit',
+                submitDisabled: (0, core_namespaceObject.isNull)(rating) && !question.optional,
+                appearance: appearance,
+                onSubmit: ()=>onSubmit(rating),
+                onPreviewSubmit: ()=>onPreviewSubmit(rating),
+                skipSubmitButton: question.skipSubmitButton,
+                canGoBack: canGoBack,
+                onBack: onBack
+            })
+        ]
+    });
+}
+function RatingButton({ num, active, displayQuestionIndex, setActiveNumber }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        "aria-label": `Rate ${num}`,
+        className: `ratings-number question-${displayQuestionIndex}-rating-${num} ${active ? 'rating-active' : ''}`,
+        type: "button",
+        onClick: ()=>{
+            setActiveNumber(num);
+        },
+        children: num
+    });
+}
+function MultipleChoiceQuestion({ question, forceDisableHtml, displayQuestionIndex, appearance, onSubmit, onPreviewSubmit, initialValue, canGoBack, onBack }) {
+    const openChoiceInputRef = (0, hooks_namespaceObject.useRef)(null);
+    const choices = (0, hooks_namespaceObject.useMemo)(()=>(0, external_surveys_extension_utils_js_namespaceObject.getDisplayOrderChoices)(question), [
+        question
+    ]);
+    const [selectedChoices, setSelectedChoices] = (0, hooks_namespaceObject.useState)(()=>initializeSelectedChoices(initialValue, question.type));
+    const [openEndedState, setOpenEndedState] = (0, hooks_namespaceObject.useState)(()=>initializeOpenEndedState(initialValue, choices));
+    const { isPreviewMode } = (0, external_surveys_extension_utils_js_namespaceObject.useSurveyContext)();
+    const isSingleChoiceQuestion = question.type === external_survey_constants_js_namespaceObject.SurveyQuestionType.SingleChoice;
+    const isMultipleChoiceQuestion = question.type === external_survey_constants_js_namespaceObject.SurveyQuestionType.MultipleChoice;
+    const shouldSkipSubmit = question.skipSubmitButton && isSingleChoiceQuestion && !question.hasOpenChoice;
+    const handleChoiceChange = (val, isOpenChoice)=>{
+        if (isOpenChoice) {
+            const newOpenSelected = !openEndedState.isSelected;
+            setOpenEndedState((prev)=>({
+                    ...prev,
+                    isSelected: newOpenSelected,
+                    inputValue: newOpenSelected ? prev.inputValue : ''
+                }));
+            if (isSingleChoiceQuestion) setSelectedChoices('');
+            if (newOpenSelected) setTimeout(()=>openChoiceInputRef.current?.focus(), 75);
+            return;
+        }
+        if (isSingleChoiceQuestion) {
+            setSelectedChoices(val);
+            setOpenEndedState((prev)=>({
+                    ...prev,
+                    isSelected: false,
+                    inputValue: ''
+                }));
+            if (shouldSkipSubmit) {
+                onSubmit(val);
+                if (isPreviewMode) onPreviewSubmit(val);
+            }
+            return;
+        }
+        if (isMultipleChoiceQuestion && (0, core_namespaceObject.isArray)(selectedChoices)) selectedChoices.includes(val) ? setSelectedChoices(selectedChoices.filter((choice)=>choice !== val)) : setSelectedChoices([
+            ...selectedChoices,
+            val
+        ]);
+    };
+    const handleOpenEndedInputChange = (e)=>{
+        e.stopPropagation();
+        const newValue = e.currentTarget.value;
+        setOpenEndedState((prev)=>({
+                ...prev,
+                inputValue: newValue
+            }));
+        if (isSingleChoiceQuestion) setSelectedChoices(newValue);
+    };
+    const handleOpenEndedKeyDown = (e)=>{
+        e.stopPropagation();
+        if ('Enter' === e.key && !isSubmitDisabled()) {
+            e.preventDefault();
+            handleSubmit();
+        }
+        if ('Escape' === e.key) {
+            e.preventDefault();
+            setOpenEndedState((prev)=>({
+                    ...prev,
+                    isSelected: false,
+                    inputValue: ''
+                }));
+            if (isSingleChoiceQuestion) setSelectedChoices(null);
+        }
+    };
+    const isSubmitDisabled = ()=>{
+        if (question.optional) return false;
+        if ((0, core_namespaceObject.isNull)(selectedChoices)) return true;
+        if ((0, core_namespaceObject.isArray)(selectedChoices)) {
+            if (!openEndedState.isSelected && 0 === selectedChoices.length) return true;
+        }
+        if (openEndedState.isSelected && '' === openEndedState.inputValue.trim()) return true;
+        return false;
+    };
+    const handleSubmit = ()=>{
+        if (openEndedState.isSelected && isMultipleChoiceQuestion) {
+            if ((0, core_namespaceObject.isArray)(selectedChoices)) isPreviewMode ? onPreviewSubmit([
+                ...selectedChoices,
+                openEndedState.inputValue
+            ]) : onSubmit([
+                ...selectedChoices,
+                openEndedState.inputValue
+            ]);
+        } else isPreviewMode ? onPreviewSubmit(selectedChoices) : onSubmit(selectedChoices);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_preact_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "question-container",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_QuestionHeader_js_namespaceObject.QuestionHeader, {
+                        question: question,
+                        forceDisableHtml: forceDisableHtml
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("fieldset", {
+                        className: "multiple-choice-options limit-height",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("legend", {
+                                className: "sr-only",
+                                children: isMultipleChoiceQuestion ? ' Select all that apply' : ' Select one'
+                            }),
+                            choices.map((choice, idx)=>{
+                                const isOpenChoice = !!question.hasOpenChoice && idx === question.choices.length - 1;
+                                const inputId = `surveyQuestion${displayQuestionIndex}Choice${idx}`;
+                                const openInputId = `${inputId}Open`;
+                                const isChecked = isOpenChoice ? openEndedState.isSelected : isSingleChoiceQuestion ? selectedChoices === choice : (0, core_namespaceObject.isArray)(selectedChoices) && selectedChoices.includes(choice);
+                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("label", {
+                                    className: isOpenChoice ? 'choice-option-open' : '',
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                            className: "response-choice",
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                                                    type: isSingleChoiceQuestion ? 'radio' : 'checkbox',
+                                                    name: inputId,
+                                                    checked: isChecked,
+                                                    onChange: ()=>handleChoiceChange(choice, isOpenChoice),
+                                                    id: inputId,
+                                                    "aria-controls": openInputId
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                    children: isOpenChoice ? `${choice}:` : choice
+                                                })
+                                            ]
+                                        }),
+                                        isOpenChoice && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                                            type: "text",
+                                            ref: openChoiceInputRef,
+                                            id: openInputId,
+                                            name: `question${displayQuestionIndex}Open`,
+                                            value: openEndedState.inputValue,
+                                            onKeyDown: handleOpenEndedKeyDown,
+                                            onInput: handleOpenEndedInputChange,
+                                            onClick: (e)=>{
+                                                if (!openEndedState.isSelected) handleChoiceChange(choice, true);
+                                                e.stopPropagation();
+                                            },
+                                            "aria-label": `${choice} - please specify`
+                                        })
+                                    ]
+                                }, idx);
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BottomSection_js_namespaceObject.BottomSection, {
+                text: question.buttonText || 'Submit',
+                submitDisabled: isSubmitDisabled(),
+                appearance: appearance,
+                onSubmit: handleSubmit,
+                onPreviewSubmit: handleSubmit,
+                skipSubmitButton: shouldSkipSubmit,
+                canGoBack: canGoBack,
+                onBack: onBack
+            })
+        ]
+    });
+}
+const fiveScaleNumbers = [
+    1,
+    2,
+    3,
+    4,
+    5
+];
+const sevenScaleNumbers = [
+    1,
+    2,
+    3,
+    4,
+    5,
+    6,
+    7
+];
+const tenScaleNumbers = [
+    0,
+    1,
+    2,
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10
+];
+const emojiScaleLists = {
+    2: [
+        external_icons_js_namespaceObject.thumbsUpEmoji,
+        external_icons_js_namespaceObject.thumbsDownEmoji
+    ],
+    3: [
+        external_icons_js_namespaceObject.dissatisfiedEmoji,
+        external_icons_js_namespaceObject.neutralEmoji,
+        external_icons_js_namespaceObject.satisfiedEmoji
+    ],
+    5: [
+        external_icons_js_namespaceObject.veryDissatisfiedEmoji,
+        external_icons_js_namespaceObject.dissatisfiedEmoji,
+        external_icons_js_namespaceObject.neutralEmoji,
+        external_icons_js_namespaceObject.satisfiedEmoji,
+        external_icons_js_namespaceObject.verySatisfiedEmoji
+    ]
+};
+function getScaleNumbers(scale) {
+    switch(scale){
+        case 5:
+            return fiveScaleNumbers;
+        case 7:
+            return sevenScaleNumbers;
+        case 10:
+            return tenScaleNumbers;
+        default:
+            return fiveScaleNumbers;
+    }
+}
+exports.LinkQuestion = __webpack_exports__.LinkQuestion;
+exports.MultipleChoiceQuestion = __webpack_exports__.MultipleChoiceQuestion;
+exports.OpenTextQuestion = __webpack_exports__.OpenTextQuestion;
+exports.RatingButton = __webpack_exports__.RatingButton;
+exports.RatingQuestion = __webpack_exports__.RatingQuestion;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "LinkQuestion",
+    "MultipleChoiceQuestion",
+    "OpenTextQuestion",
+    "RatingButton",
+    "RatingQuestion"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});