@posthog/browser-common 0.9.5 → 0.9.6

package/dist/surveys/components/IntroScreen.js

@@ -0,0 +1,78 @@
+"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__, {
+    IntroScreen: ()=>IntroScreen
+});
+const jsx_runtime_namespaceObject = require("preact/jsx-runtime");
+const external_preact_namespaceObject = require("preact");
+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 hooks_namespaceObject = require("preact/hooks");
+function IntroScreen({ header, description, contentType, forceDisableHtml, appearance, onStart }) {
+    const { isPopup, onPreviewSubmit, onPopupSurveyDismissed } = (0, hooks_namespaceObject.useContext)(external_surveys_extension_utils_js_namespaceObject.SurveyContext);
+    const renderCancelButton = isPopup && true !== appearance.hideCancelButton;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "intro-screen",
+        role: "status",
+        tabIndex: 0,
+        "aria-atomic": "true",
+        children: [
+            renderCancelButton && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_QuestionHeader_js_namespaceObject.Cancel, {
+                onClick: ()=>onPopupSurveyDismissed()
+            }),
+            header && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                className: "intro-screen-header",
+                children: header
+            }),
+            description && (0, external_surveys_extension_utils_js_namespaceObject.renderChildrenAsTextOrHtml)({
+                component: (0, external_preact_namespaceObject.h)('p', {
+                    className: 'intro-screen-body'
+                }),
+                children: description,
+                renderAsHtml: !forceDisableHtml && 'text' !== contentType
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BottomSection_js_namespaceObject.BottomSection, {
+                text: appearance.introScreenButtonText || 'Get started',
+                submitDisabled: false,
+                appearance: appearance,
+                onSubmit: onStart,
+                onPreviewSubmit: ()=>onPreviewSubmit(null)
+            })
+        ]
+    });
+}
+exports.IntroScreen = __webpack_exports__.IntroScreen;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "IntroScreen"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/surveys/components/IntroScreen.mjs

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { h } from "preact";
+import { SurveyContext, renderChildrenAsTextOrHtml } from "../surveys-extension-utils.mjs";
+import { BottomSection } from "./BottomSection.mjs";
+import { Cancel } from "./QuestionHeader.mjs";
+import { useContext } from "preact/hooks";
+function IntroScreen({ header, description, contentType, forceDisableHtml, appearance, onStart }) {
+    const { isPopup, onPreviewSubmit, onPopupSurveyDismissed } = useContext(SurveyContext);
+    const renderCancelButton = isPopup && true !== appearance.hideCancelButton;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "intro-screen",
+        role: "status",
+        tabIndex: 0,
+        "aria-atomic": "true",
+        children: [
+            renderCancelButton && /*#__PURE__*/ jsx(Cancel, {
+                onClick: ()=>onPopupSurveyDismissed()
+            }),
+            header && /*#__PURE__*/ jsx("h3", {
+                className: "intro-screen-header",
+                children: header
+            }),
+            description && renderChildrenAsTextOrHtml({
+                component: h('p', {
+                    className: 'intro-screen-body'
+                }),
+                children: description,
+                renderAsHtml: !forceDisableHtml && 'text' !== contentType
+            }),
+            /*#__PURE__*/ jsx(BottomSection, {
+                text: appearance.introScreenButtonText || 'Get started',
+                submitDisabled: false,
+                appearance: appearance,
+                onSubmit: onStart,
+                onPreviewSubmit: ()=>onPreviewSubmit(null)
+            })
+        ]
+    });
+}
+export { IntroScreen };

package/dist/surveys/components/PostHogLogo.d.ts

@@ -0,0 +1,5 @@
+interface PostHogLogoProps {
+    urlParams?: Record<string, string> | undefined;
+}
+export declare function PostHogLogo({ urlParams }: PostHogLogoProps): import("preact").JSX.Element;
+export {};

package/dist/surveys/components/PostHogLogo.js

@@ -0,0 +1,54 @@
+"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__, {
+    PostHogLogo: ()=>PostHogLogo
+});
+const jsx_runtime_namespaceObject = require("preact/jsx-runtime");
+const external_icons_js_namespaceObject = require("../icons.js");
+function PostHogLogo({ urlParams }) {
+    const queryString = urlParams ? Object.entries(urlParams).map(([key, value])=>`${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&') : '';
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("a", {
+        href: `https://posthog.com/surveys${queryString ? `?${queryString}` : ''}`,
+        target: "_blank",
+        rel: "noopener",
+        className: "footer-branding",
+        children: [
+            "Survey by ",
+            external_icons_js_namespaceObject.IconPosthogLogo
+        ]
+    });
+}
+exports.PostHogLogo = __webpack_exports__.PostHogLogo;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PostHogLogo"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/surveys/components/PostHogLogo.mjs

@@ -0,0 +1,16 @@
+import { jsxs } from "preact/jsx-runtime";
+import { IconPosthogLogo } from "../icons.mjs";
+function PostHogLogo({ urlParams }) {
+    const queryString = urlParams ? Object.entries(urlParams).map(([key, value])=>`${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&') : '';
+    return /*#__PURE__*/ jsxs("a", {
+        href: `https://posthog.com/surveys${queryString ? `?${queryString}` : ''}`,
+        target: "_blank",
+        rel: "noopener",
+        className: "footer-branding",
+        children: [
+            "Survey by ",
+            IconPosthogLogo
+        ]
+    });
+}
+export { PostHogLogo };

package/dist/surveys/components/QuestionHeader.d.ts

@@ -0,0 +1,10 @@
+import { h } from 'preact';
+import type { SurveyQuestion } from '../../types/surveys';
+export declare function QuestionHeader({ question, forceDisableHtml, htmlFor, }: {
+    question: Pick<SurveyQuestion, 'question' | 'description' | 'descriptionContentType' | 'type'>;
+    forceDisableHtml: boolean;
+    htmlFor?: string | undefined;
+}): h.JSX.Element;
+export declare function Cancel({ onClick }: {
+    onClick: () => void;
+}): h.JSX.Element;

package/dist/surveys/components/QuestionHeader.js

@@ -0,0 +1,82 @@
+"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__, {
+    Cancel: ()=>Cancel,
+    QuestionHeader: ()=>QuestionHeader
+});
+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 external_icons_js_namespaceObject = require("../icons.js");
+const external_surveys_extension_utils_js_namespaceObject = require("../surveys-extension-utils.js");
+function QuestionHeader({ question, forceDisableHtml, htmlFor }) {
+    const TitleComponent = question.type === external_survey_constants_js_namespaceObject.SurveyQuestionType.Open ? 'label' : 'h3';
+    const isHeaderEmpty = !question.question && !question.description;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        class: isHeaderEmpty ? 'question-header question-header--empty' : 'question-header',
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TitleComponent, {
+                className: "survey-question",
+                htmlFor: htmlFor,
+                children: question.question
+            }),
+            question.description && (0, external_surveys_extension_utils_js_namespaceObject.renderChildrenAsTextOrHtml)({
+                component: (0, external_preact_namespaceObject.h)('p', {
+                    className: "survey-question-description"
+                }),
+                children: question.description,
+                renderAsHtml: !forceDisableHtml && 'text' !== question.descriptionContentType
+            })
+        ]
+    });
+}
+function Cancel({ onClick }) {
+    const { isPreviewMode } = (0, hooks_namespaceObject.useContext)(external_surveys_extension_utils_js_namespaceObject.SurveyContext);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        className: "form-cancel",
+        onClick: onClick,
+        disabled: isPreviewMode,
+        "aria-label": "Close survey",
+        type: "button",
+        children: (0, external_icons_js_namespaceObject.cancelSVG)({
+            fill: 'black'
+        })
+    });
+}
+exports.Cancel = __webpack_exports__.Cancel;
+exports.QuestionHeader = __webpack_exports__.QuestionHeader;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "Cancel",
+    "QuestionHeader"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/surveys/components/QuestionHeader.mjs

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { h } from "preact";
+import { useContext } from "preact/hooks";
+import { SurveyQuestionType } from "../../survey-constants.mjs";
+import { cancelSVG } from "../icons.mjs";
+import { SurveyContext, renderChildrenAsTextOrHtml } from "../surveys-extension-utils.mjs";
+function QuestionHeader({ question, forceDisableHtml, htmlFor }) {
+    const TitleComponent = question.type === SurveyQuestionType.Open ? 'label' : 'h3';
+    const isHeaderEmpty = !question.question && !question.description;
+    return /*#__PURE__*/ jsxs("div", {
+        class: isHeaderEmpty ? 'question-header question-header--empty' : 'question-header',
+        children: [
+            /*#__PURE__*/ jsx(TitleComponent, {
+                className: "survey-question",
+                htmlFor: htmlFor,
+                children: question.question
+            }),
+            question.description && renderChildrenAsTextOrHtml({
+                component: h('p', {
+                    className: "survey-question-description"
+                }),
+                children: question.description,
+                renderAsHtml: !forceDisableHtml && 'text' !== question.descriptionContentType
+            })
+        ]
+    });
+}
+function Cancel({ onClick }) {
+    const { isPreviewMode } = useContext(SurveyContext);
+    return /*#__PURE__*/ jsx("button", {
+        className: "form-cancel",
+        onClick: onClick,
+        disabled: isPreviewMode,
+        "aria-label": "Close survey",
+        type: "button",
+        children: cancelSVG({
+            fill: 'black'
+        })
+    });
+}
+export { Cancel, QuestionHeader };

package/dist/surveys/components/QuestionTypes.d.ts

@@ -0,0 +1,31 @@
+import { type JSX } from 'preact';
+import type { BasicSurveyQuestion, LinkSurveyQuestion, MultipleSurveyQuestion, RatingSurveyQuestion, SurveyAppearance } from '../../types/surveys';
+export interface CommonQuestionProps {
+    forceDisableHtml: boolean;
+    appearance: SurveyAppearance;
+    onSubmit: (res: string | string[] | number | null) => void;
+    onPreviewSubmit: (res: string | string[] | number | null) => void;
+    initialValue?: (string | string[] | number | null) | undefined;
+    displayQuestionIndex: number;
+    canGoBack?: boolean | undefined;
+    onBack?: (() => void) | undefined;
+}
+export declare function OpenTextQuestion({ question, forceDisableHtml, appearance, onSubmit, onPreviewSubmit, displayQuestionIndex, initialValue, canGoBack, onBack, }: CommonQuestionProps & {
+    question: BasicSurveyQuestion;
+}): JSX.Element;
+export declare function LinkQuestion({ question, forceDisableHtml, appearance, onSubmit, onPreviewSubmit, canGoBack, onBack, }: CommonQuestionProps & {
+    question: LinkSurveyQuestion;
+}): JSX.Element;
+export declare function RatingQuestion({ question, forceDisableHtml, displayQuestionIndex, appearance, onSubmit, onPreviewSubmit, initialValue, canGoBack, onBack, }: CommonQuestionProps & {
+    question: RatingSurveyQuestion;
+}): JSX.Element;
+export declare function RatingButton({ num, active, displayQuestionIndex, setActiveNumber, }: {
+    num: number;
+    active: boolean;
+    displayQuestionIndex: number;
+    appearance: SurveyAppearance;
+    setActiveNumber: (num: number) => void;
+}): JSX.Element;
+export declare function MultipleChoiceQuestion({ question, forceDisableHtml, displayQuestionIndex, appearance, onSubmit, onPreviewSubmit, initialValue, canGoBack, onBack, }: CommonQuestionProps & {
+    question: MultipleSurveyQuestion;
+}): JSX.Element;