posthog-js 1.136.8 → 1.138.0

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "posthog-js",
-    "version": "1.136.8",
+    "version": "1.138.0",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
     "repository": "https://github.com/PostHog/posthog-js",
     "author": "hey@posthog.com",

package/lib/src/constants.d.ts

@@ -18,6 +18,7 @@ export declare const PERSISTENCE_EARLY_ACCESS_FEATURES = "$early_access_features
 export declare const STORED_PERSON_PROPERTIES_KEY = "$stored_person_properties";
 export declare const STORED_GROUP_PROPERTIES_KEY = "$stored_group_properties";
 export declare const SURVEYS = "$surveys";
+export declare const SURVEYS_ACTIVATED = "$surveys_activated";
 export declare const FLAG_CALL_REPORTED = "$flag_call_reported";
 export declare const USER_STATE = "$user_state";
 export declare const CLIENT_SESSION_PROPS = "$client_session_props";

package/lib/src/constants.js

@@ -23,6 +23,7 @@ export var PERSISTENCE_EARLY_ACCESS_FEATURES = '$early_access_features';
 export var STORED_PERSON_PROPERTIES_KEY = '$stored_person_properties';
 export var STORED_GROUP_PROPERTIES_KEY = '$stored_group_properties';
 export var SURVEYS = '$surveys';
+export var SURVEYS_ACTIVATED = '$surveys_activated';
 export var FLAG_CALL_REPORTED = '$flag_call_reported';
 export var USER_STATE = '$user_state';
 export var CLIENT_SESSION_PROPS = '$client_session_props';

package/lib/src/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,mBAAmB;AAEnB,0FAA0F;AAC1F,MAAM,CAAC,IAAM,sBAAsB,GAAG,qBAAqB,CAAA;AAC3D,MAAM,CAAC,IAAM,WAAW,GAAG,aAAa,CAAA;AACxC,MAAM,CAAC,IAAM,YAAY,GAAG,SAAS,CAAA;AACrC,MAAM,CAAC,IAAM,gBAAgB,GAAG,SAAS,CAAA;AACzC,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAU,CAAA;AAC1C,MAAM,CAAC,IAAM,gCAAgC,GAAG,mCAAmC,CAAA;AACnF,MAAM,CAAC,IAAM,4BAA4B,GAAG,+BAA+B,CAAA;AAC3E,MAAM,CAAC,IAAM,qCAAqC,GAAG,wCAAwC,CAAA;AAC7F,MAAM,CAAC,IAAM,yCAAyC,GAAG,4CAA4C,CAAA;AACrG,MAAM,CAAC,IAAM,yCAAyC,GAAG,4CAA4C,CAAA;AACrG,MAAM,CAAC,IAAM,kCAAkC,GAAG,qCAAqC,CAAA;AACvF,MAAM,CAAC,IAAM,6BAA6B,GAAG,qBAAqB,CAAA;AAClE,MAAM,CAAC,IAAM,kCAAkC,GAAG,0BAA0B,CAAA;AAC5E,MAAM,CAAC,IAAM,UAAU,GAAG,QAAQ,CAAA;AAClC,MAAM,CAAC,IAAM,4BAA4B,GAAG,qBAAqB,CAAA;AACjE,MAAM,CAAC,IAAM,qBAAqB,GAAG,wBAAwB,CAAA;AAC7D,MAAM,CAAC,IAAM,iCAAiC,GAAG,wBAAwB,CAAA;AACzE,MAAM,CAAC,IAAM,4BAA4B,GAAG,2BAA2B,CAAA;AACvE,MAAM,CAAC,IAAM,2BAA2B,GAAG,0BAA0B,CAAA;AACrE,MAAM,CAAC,IAAM,OAAO,GAAG,UAAU,CAAA;AACjC,MAAM,CAAC,IAAM,kBAAkB,GAAG,qBAAqB,CAAA;AACvD,MAAM,CAAC,IAAM,UAAU,GAAG,aAAa,CAAA;AACvC,MAAM,CAAC,IAAM,oBAAoB,GAAG,uBAAuB,CAAA;AAC3D,MAAM,CAAC,IAAM,kBAAkB,GAAG,qBAAqB,CAAA;AACvD,MAAM,CAAC,IAAM,uBAAuB,GAAG,0BAA0B,CAAA;AACjE,MAAM,CAAC,IAAM,qBAAqB,GAAG,wBAAwB,CAAA;AAC7D,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAA;AAC9C,MAAM,CAAC,IAAM,UAAU,GAAG,qBAAqB,CAAA;AAE/C,0FAA0F;AAC1F,MAAM,CAAC,IAAM,+BAA+B,GAAG;IAC3C,sBAAsB;IACtB,YAAY;IACZ,gBAAgB;IAChB,gBAAgB;IAChB,qCAAqC;IACrC,4BAA4B;IAC5B,UAAU;IACV,qBAAqB;IACrB,UAAU;IACV,iCAAiC;IACjC,2BAA2B;IAC3B,4BAA4B;IAC5B,OAAO;IACP,kBAAkB;IAClB,oBAAoB;IACpB,kBAAkB;IAClB,uBAAuB;IACvB,qBAAqB;IACrB,wBAAwB;CAC3B,CAAA","sourcesContent":["/*\n * Constants\n */\n\n/* PROPERTY KEYS */\n\n// This key is deprecated, but we want to check for it to see whether aliasing is allowed.\nexport const PEOPLE_DISTINCT_ID_KEY = '$people_distinct_id'\nexport const DISTINCT_ID = 'distinct_id'\nexport const ALIAS_ID_KEY = '__alias'\nexport const CAMPAIGN_IDS_KEY = '__cmpns'\nexport const EVENT_TIMERS_KEY = '__timers'\nexport const AUTOCAPTURE_DISABLED_SERVER_SIDE = '$autocapture_disabled_server_side'\nexport const HEATMAPS_ENABLED_SERVER_SIDE = '$heatmaps_enabled_server_side'\nexport const SESSION_RECORDING_ENABLED_SERVER_SIDE = '$session_recording_enabled_server_side'\nexport const CONSOLE_LOG_RECORDING_ENABLED_SERVER_SIDE = '$console_log_recording_enabled_server_side'\nexport const SESSION_RECORDING_NETWORK_PAYLOAD_CAPTURE = '$session_recording_network_payload_capture'\nexport const SESSION_RECORDING_CANVAS_RECORDING = '$session_recording_canvas_recording'\nexport const SESSION_RECORDING_SAMPLE_RATE = '$replay_sample_rate'\nexport const SESSION_RECORDING_MINIMUM_DURATION = '$replay_minimum_duration'\nexport const SESSION_ID = '$sesid'\nexport const SESSION_RECORDING_IS_SAMPLED = '$session_is_sampled'\nexport const ENABLED_FEATURE_FLAGS = '$enabled_feature_flags'\nexport const PERSISTENCE_EARLY_ACCESS_FEATURES = '$early_access_features'\nexport const STORED_PERSON_PROPERTIES_KEY = '$stored_person_properties'\nexport const STORED_GROUP_PROPERTIES_KEY = '$stored_group_properties'\nexport const SURVEYS = '$surveys'\nexport const FLAG_CALL_REPORTED = '$flag_call_reported'\nexport const USER_STATE = '$user_state'\nexport const CLIENT_SESSION_PROPS = '$client_session_props'\nexport const CAPTURE_RATE_LIMIT = '$capture_rate_limit'\nexport const INITIAL_CAMPAIGN_PARAMS = '$initial_campaign_params'\nexport const INITIAL_REFERRER_INFO = '$initial_referrer_info'\nexport const ENABLE_PERSON_PROCESSING = '$epp'\nexport const TOOLBAR_ID = '__POSTHOG_TOOLBAR__'\n\n// These are properties that are reserved and will not be automatically included in events\nexport const PERSISTENCE_RESERVED_PROPERTIES = [\n    PEOPLE_DISTINCT_ID_KEY,\n    ALIAS_ID_KEY,\n    CAMPAIGN_IDS_KEY,\n    EVENT_TIMERS_KEY,\n    SESSION_RECORDING_ENABLED_SERVER_SIDE,\n    HEATMAPS_ENABLED_SERVER_SIDE,\n    SESSION_ID,\n    ENABLED_FEATURE_FLAGS,\n    USER_STATE,\n    PERSISTENCE_EARLY_ACCESS_FEATURES,\n    STORED_GROUP_PROPERTIES_KEY,\n    STORED_PERSON_PROPERTIES_KEY,\n    SURVEYS,\n    FLAG_CALL_REPORTED,\n    CLIENT_SESSION_PROPS,\n    CAPTURE_RATE_LIMIT,\n    INITIAL_CAMPAIGN_PARAMS,\n    INITIAL_REFERRER_INFO,\n    ENABLE_PERSON_PROCESSING,\n]\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,mBAAmB;AAEnB,0FAA0F;AAC1F,MAAM,CAAC,IAAM,sBAAsB,GAAG,qBAAqB,CAAA;AAC3D,MAAM,CAAC,IAAM,WAAW,GAAG,aAAa,CAAA;AACxC,MAAM,CAAC,IAAM,YAAY,GAAG,SAAS,CAAA;AACrC,MAAM,CAAC,IAAM,gBAAgB,GAAG,SAAS,CAAA;AACzC,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAU,CAAA;AAC1C,MAAM,CAAC,IAAM,gCAAgC,GAAG,mCAAmC,CAAA;AACnF,MAAM,CAAC,IAAM,4BAA4B,GAAG,+BAA+B,CAAA;AAC3E,MAAM,CAAC,IAAM,qCAAqC,GAAG,wCAAwC,CAAA;AAC7F,MAAM,CAAC,IAAM,yCAAyC,GAAG,4CAA4C,CAAA;AACrG,MAAM,CAAC,IAAM,yCAAyC,GAAG,4CAA4C,CAAA;AACrG,MAAM,CAAC,IAAM,kCAAkC,GAAG,qCAAqC,CAAA;AACvF,MAAM,CAAC,IAAM,6BAA6B,GAAG,qBAAqB,CAAA;AAClE,MAAM,CAAC,IAAM,kCAAkC,GAAG,0BAA0B,CAAA;AAC5E,MAAM,CAAC,IAAM,UAAU,GAAG,QAAQ,CAAA;AAClC,MAAM,CAAC,IAAM,4BAA4B,GAAG,qBAAqB,CAAA;AACjE,MAAM,CAAC,IAAM,qBAAqB,GAAG,wBAAwB,CAAA;AAC7D,MAAM,CAAC,IAAM,iCAAiC,GAAG,wBAAwB,CAAA;AACzE,MAAM,CAAC,IAAM,4BAA4B,GAAG,2BAA2B,CAAA;AACvE,MAAM,CAAC,IAAM,2BAA2B,GAAG,0BAA0B,CAAA;AACrE,MAAM,CAAC,IAAM,OAAO,GAAG,UAAU,CAAA;AACjC,MAAM,CAAC,IAAM,iBAAiB,GAAG,oBAAoB,CAAA;AACrD,MAAM,CAAC,IAAM,kBAAkB,GAAG,qBAAqB,CAAA;AACvD,MAAM,CAAC,IAAM,UAAU,GAAG,aAAa,CAAA;AACvC,MAAM,CAAC,IAAM,oBAAoB,GAAG,uBAAuB,CAAA;AAC3D,MAAM,CAAC,IAAM,kBAAkB,GAAG,qBAAqB,CAAA;AACvD,MAAM,CAAC,IAAM,uBAAuB,GAAG,0BAA0B,CAAA;AACjE,MAAM,CAAC,IAAM,qBAAqB,GAAG,wBAAwB,CAAA;AAC7D,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAA;AAC9C,MAAM,CAAC,IAAM,UAAU,GAAG,qBAAqB,CAAA;AAE/C,0FAA0F;AAC1F,MAAM,CAAC,IAAM,+BAA+B,GAAG;IAC3C,sBAAsB;IACtB,YAAY;IACZ,gBAAgB;IAChB,gBAAgB;IAChB,qCAAqC;IACrC,4BAA4B;IAC5B,UAAU;IACV,qBAAqB;IACrB,UAAU;IACV,iCAAiC;IACjC,2BAA2B;IAC3B,4BAA4B;IAC5B,OAAO;IACP,kBAAkB;IAClB,oBAAoB;IACpB,kBAAkB;IAClB,uBAAuB;IACvB,qBAAqB;IACrB,wBAAwB;CAC3B,CAAA","sourcesContent":["/*\n * Constants\n */\n\n/* PROPERTY KEYS */\n\n// This key is deprecated, but we want to check for it to see whether aliasing is allowed.\nexport const PEOPLE_DISTINCT_ID_KEY = '$people_distinct_id'\nexport const DISTINCT_ID = 'distinct_id'\nexport const ALIAS_ID_KEY = '__alias'\nexport const CAMPAIGN_IDS_KEY = '__cmpns'\nexport const EVENT_TIMERS_KEY = '__timers'\nexport const AUTOCAPTURE_DISABLED_SERVER_SIDE = '$autocapture_disabled_server_side'\nexport const HEATMAPS_ENABLED_SERVER_SIDE = '$heatmaps_enabled_server_side'\nexport const SESSION_RECORDING_ENABLED_SERVER_SIDE = '$session_recording_enabled_server_side'\nexport const CONSOLE_LOG_RECORDING_ENABLED_SERVER_SIDE = '$console_log_recording_enabled_server_side'\nexport const SESSION_RECORDING_NETWORK_PAYLOAD_CAPTURE = '$session_recording_network_payload_capture'\nexport const SESSION_RECORDING_CANVAS_RECORDING = '$session_recording_canvas_recording'\nexport const SESSION_RECORDING_SAMPLE_RATE = '$replay_sample_rate'\nexport const SESSION_RECORDING_MINIMUM_DURATION = '$replay_minimum_duration'\nexport const SESSION_ID = '$sesid'\nexport const SESSION_RECORDING_IS_SAMPLED = '$session_is_sampled'\nexport const ENABLED_FEATURE_FLAGS = '$enabled_feature_flags'\nexport const PERSISTENCE_EARLY_ACCESS_FEATURES = '$early_access_features'\nexport const STORED_PERSON_PROPERTIES_KEY = '$stored_person_properties'\nexport const STORED_GROUP_PROPERTIES_KEY = '$stored_group_properties'\nexport const SURVEYS = '$surveys'\nexport const SURVEYS_ACTIVATED = '$surveys_activated'\nexport const FLAG_CALL_REPORTED = '$flag_call_reported'\nexport const USER_STATE = '$user_state'\nexport const CLIENT_SESSION_PROPS = '$client_session_props'\nexport const CAPTURE_RATE_LIMIT = '$capture_rate_limit'\nexport const INITIAL_CAMPAIGN_PARAMS = '$initial_campaign_params'\nexport const INITIAL_REFERRER_INFO = '$initial_referrer_info'\nexport const ENABLE_PERSON_PROCESSING = '$epp'\nexport const TOOLBAR_ID = '__POSTHOG_TOOLBAR__'\n\n// These are properties that are reserved and will not be automatically included in events\nexport const PERSISTENCE_RESERVED_PROPERTIES = [\n    PEOPLE_DISTINCT_ID_KEY,\n    ALIAS_ID_KEY,\n    CAMPAIGN_IDS_KEY,\n    EVENT_TIMERS_KEY,\n    SESSION_RECORDING_ENABLED_SERVER_SIDE,\n    HEATMAPS_ENABLED_SERVER_SIDE,\n    SESSION_ID,\n    ENABLED_FEATURE_FLAGS,\n    USER_STATE,\n    PERSISTENCE_EARLY_ACCESS_FEATURES,\n    STORED_GROUP_PROPERTIES_KEY,\n    STORED_PERSON_PROPERTIES_KEY,\n    SURVEYS,\n    FLAG_CALL_REPORTED,\n    CLIENT_SESSION_PROPS,\n    CAPTURE_RATE_LIMIT,\n    INITIAL_CAMPAIGN_PARAMS,\n    INITIAL_REFERRER_INFO,\n    ENABLE_PERSON_PROCESSING,\n]\n"]}

package/lib/src/extensions/surveys/components/ConfirmationMessage.d.ts

@@ -1,8 +1,11 @@
-import { SurveyAppearance } from '../../../posthog-surveys-types';
-export declare function ConfirmationMessage({ header, description, appearance, onClose, styleOverrides, }: {
+import { SurveyAppearance, SurveyQuestionDescriptionContentType } from '../../../posthog-surveys-types';
+import { h } from 'preact';
+export declare function ConfirmationMessage({ header, description, contentType, forceDisableHtml, appearance, onClose, styleOverrides, }: {
     header: string;
     description: string;
+    forceDisableHtml: boolean;
+    contentType?: SurveyQuestionDescriptionContentType;
     appearance: SurveyAppearance;
     onClose: () => void;
     styleOverrides?: React.CSSProperties;
-}): JSX.Element;
+}): h.JSX.Element;

package/lib/src/extensions/surveys/components/ConfirmationMessage.jsx

@@ -11,9 +11,10 @@ var __assign = (this && this.__assign) || function () {
 };
 import { BottomSection } from './BottomSection';
 import { Cancel } from './QuestionHeader';
-import { defaultSurveyAppearance, getContrastingTextColor } from '../surveys-utils';
+import { defaultSurveyAppearance, getContrastingTextColor, renderChildrenAsTextOrHtml } from '../surveys-utils';
+import { h } from 'preact';
 export function ConfirmationMessage(_a) {
-    var header = _a.header, description = _a.description, appearance = _a.appearance, onClose = _a.onClose, styleOverrides = _a.styleOverrides;
+    var header = _a.header, description = _a.description, contentType = _a.contentType, forceDisableHtml = _a.forceDisableHtml, appearance = _a.appearance, onClose = _a.onClose, styleOverrides = _a.styleOverrides;
     var textColor = getContrastingTextColor(appearance.backgroundColor || defaultSurveyAppearance.backgroundColor);
     return (<>
             <div className="thank-you-message" style={__assign({}, styleOverrides)}>
@@ -22,7 +23,13 @@ export function ConfirmationMessage(_a) {
                     <h3 className="thank-you-message-header" style={{ color: textColor }}>
                         {header}
                     </h3>
-                    {description && (<div style={{ color: textColor }} className="thank-you-message-body" dangerouslySetInnerHTML={{ __html: description }}/>)}
+                    {description &&
+            renderChildrenAsTextOrHtml({
+                component: h('div', { className: 'thank-you-message-body' }),
+                children: description,
+                renderAsHtml: !forceDisableHtml && contentType !== 'text',
+                style: { color: textColor },
+            })}
                     <BottomSection text={'Close'} submitDisabled={false} appearance={appearance} onSubmit={function () { return onClose(); }}/>
                 </div>
             </div>

package/lib/src/extensions/surveys/components/ConfirmationMessage.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationMessage.jsx","sourceRoot":"","sources":["../../../../../src/extensions/surveys/components/ConfirmationMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAEnF,MAAM,UAAU,mBAAmB,CAAC,EAYnC;QAXG,MAAM,YAAA,EACN,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,cAAc,oBAAA;IAQd,IAAM,SAAS,GAAG,uBAAuB,CAAC,UAAU,CAAC,eAAe,IAAI,uBAAuB,CAAC,eAAe,CAAC,CAAA;IAEhH,OAAO,CACH,EACI;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,mBAAmB,CAAC,KAAK,CAAC,cAAM,cAAc,EAAG,CAC5D;gBAAA,CAAC,GAAG,CAAC,SAAS,CAAC,6BAA6B,CACxC;oBAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,cAAM,OAAA,OAAO,EAAE,EAAT,CAAS,CAAC,EACjC;oBAAA,CAAC,EAAE,CAAC,SAAS,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CACjE;wBAAA,CAAC,MAAM,CACX;oBAAA,EAAE,EAAE,CACJ;oBAAA,CAAC,WAAW,IAAI,CACZ,CAAC,GAAG,CACA,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAC5B,SAAS,CAAC,wBAAwB,CAClC,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EACnD,CACL,CACD;oBAAA,CAAC,aAAa,CACV,IAAI,CAAC,CAAC,OAAO,CAAC,CACd,cAAc,CAAC,CAAC,KAAK,CAAC,CACtB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,QAAQ,CAAC,CAAC,cAAM,OAAA,OAAO,EAAE,EAAT,CAAS,CAAC,EAElC;gBAAA,EAAE,GAAG,CACT;YAAA,EAAE,GAAG,CACT;QAAA,GAAG,CACN,CAAA;AACL,CAAC","sourcesContent":["import { BottomSection } from './BottomSection'\nimport { Cancel } from './QuestionHeader'\nimport { SurveyAppearance } from '../../../posthog-surveys-types'\nimport { defaultSurveyAppearance, getContrastingTextColor } from '../surveys-utils'\n\nexport function ConfirmationMessage({\n    header,\n    description,\n    appearance,\n    onClose,\n    styleOverrides,\n}: {\n    header: string\n    description: string\n    appearance: SurveyAppearance\n    onClose: () => void\n    styleOverrides?: React.CSSProperties\n}) {\n    const textColor = getContrastingTextColor(appearance.backgroundColor || defaultSurveyAppearance.backgroundColor)\n\n    return (\n        <>\n            <div className=\"thank-you-message\" style={{ ...styleOverrides }}>\n                <div className=\"thank-you-message-container\">\n                    <Cancel onClick={() => onClose()} />\n                    <h3 className=\"thank-you-message-header\" style={{ color: textColor }}>\n                        {header}\n                    </h3>\n                    {description && (\n                        <div\n                            style={{ color: textColor }}\n                            className=\"thank-you-message-body\"\n                            dangerouslySetInnerHTML={{ __html: description }}\n                        />\n                    )}\n                    <BottomSection\n                        text={'Close'}\n                        submitDisabled={false}\n                        appearance={appearance}\n                        onSubmit={() => onClose()}\n                    />\n                </div>\n            </div>\n        </>\n    )\n}\n"]}
+{"version":3,"file":"ConfirmationMessage.jsx","sourceRoot":"","sources":["../../../../../src/extensions/surveys/components/ConfirmationMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAA;AAC/G,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAA;AAE1B,MAAM,UAAU,mBAAmB,CAAC,EAgBnC;QAfG,MAAM,YAAA,EACN,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,gBAAgB,sBAAA,EAChB,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,cAAc,oBAAA;IAUd,IAAM,SAAS,GAAG,uBAAuB,CAAC,UAAU,CAAC,eAAe,IAAI,uBAAuB,CAAC,eAAe,CAAC,CAAA;IAEhH,OAAO,CACH,EACI;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,mBAAmB,CAAC,KAAK,CAAC,cAAM,cAAc,EAAG,CAC5D;gBAAA,CAAC,GAAG,CAAC,SAAS,CAAC,6BAA6B,CACxC;oBAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,cAAM,OAAA,OAAO,EAAE,EAAT,CAAS,CAAC,EACjC;oBAAA,CAAC,EAAE,CAAC,SAAS,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CACjE;wBAAA,CAAC,MAAM,CACX;oBAAA,EAAE,EAAE,CACJ;oBAAA,CAAC,WAAW;YACR,0BAA0B,CAAC;gBACvB,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;gBAC5D,QAAQ,EAAE,WAAW;gBACrB,YAAY,EAAE,CAAC,gBAAgB,IAAI,WAAW,KAAK,MAAM;gBACzD,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;aAC9B,CAAC,CACN;oBAAA,CAAC,aAAa,CACV,IAAI,CAAC,CAAC,OAAO,CAAC,CACd,cAAc,CAAC,CAAC,KAAK,CAAC,CACtB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,QAAQ,CAAC,CAAC,cAAM,OAAA,OAAO,EAAE,EAAT,CAAS,CAAC,EAElC;gBAAA,EAAE,GAAG,CACT;YAAA,EAAE,GAAG,CACT;QAAA,GAAG,CACN,CAAA;AACL,CAAC","sourcesContent":["import { BottomSection } from './BottomSection'\nimport { Cancel } from './QuestionHeader'\nimport { SurveyAppearance, SurveyQuestionDescriptionContentType } from '../../../posthog-surveys-types'\nimport { defaultSurveyAppearance, getContrastingTextColor, renderChildrenAsTextOrHtml } from '../surveys-utils'\nimport { h } from 'preact'\n\nexport function ConfirmationMessage({\n    header,\n    description,\n    contentType,\n    forceDisableHtml,\n    appearance,\n    onClose,\n    styleOverrides,\n}: {\n    header: string\n    description: string\n    forceDisableHtml: boolean\n    contentType?: SurveyQuestionDescriptionContentType\n    appearance: SurveyAppearance\n    onClose: () => void\n    styleOverrides?: React.CSSProperties\n}) {\n    const textColor = getContrastingTextColor(appearance.backgroundColor || defaultSurveyAppearance.backgroundColor)\n\n    return (\n        <>\n            <div className=\"thank-you-message\" style={{ ...styleOverrides }}>\n                <div className=\"thank-you-message-container\">\n                    <Cancel onClick={() => onClose()} />\n                    <h3 className=\"thank-you-message-header\" style={{ color: textColor }}>\n                        {header}\n                    </h3>\n                    {description &&\n                        renderChildrenAsTextOrHtml({\n                            component: h('div', { className: 'thank-you-message-body' }),\n                            children: description,\n                            renderAsHtml: !forceDisableHtml && contentType !== 'text',\n                            style: { color: textColor },\n                        })}\n                    <BottomSection\n                        text={'Close'}\n                        submitDisabled={false}\n                        appearance={appearance}\n                        onSubmit={() => onClose()}\n                    />\n                </div>\n            </div>\n        </>\n    )\n}\n"]}

package/lib/src/extensions/surveys/components/QuestionHeader.d.ts

@@ -1,8 +1,12 @@
-export declare function QuestionHeader({ question, description, backgroundColor, }: {
+import { SurveyQuestionDescriptionContentType } from '../../../posthog-surveys-types';
+import { h } from 'preact';
+export declare function QuestionHeader({ question, description, descriptionContentType, backgroundColor, forceDisableHtml, }: {
     question: string;
     description?: string | null;
+    descriptionContentType?: SurveyQuestionDescriptionContentType;
+    forceDisableHtml: boolean;
     backgroundColor?: string;
-}): JSX.Element;
+}): h.JSX.Element;
 export declare function Cancel({ onClick }: {
     onClick: () => void;
-}): JSX.Element;
+}): h.JSX.Element;

package/lib/src/extensions/surveys/components/QuestionHeader.jsx

@@ -1,11 +1,17 @@
-import { SurveyContext, defaultSurveyAppearance } from '../surveys-utils';
+import { SurveyContext, defaultSurveyAppearance, renderChildrenAsTextOrHtml } from '../surveys-utils';
 import { cancelSVG } from '../icons';
 import { useContext } from 'preact/hooks';
+import { h } from 'preact';
 export function QuestionHeader(_a) {
-    var question = _a.question, description = _a.description, backgroundColor = _a.backgroundColor;
+    var question = _a.question, description = _a.description, descriptionContentType = _a.descriptionContentType, backgroundColor = _a.backgroundColor, forceDisableHtml = _a.forceDisableHtml;
     return (<div style={{ backgroundColor: backgroundColor || defaultSurveyAppearance.backgroundColor }}>
             <div className="survey-question">{question}</div>
-            {description && <div className="description" dangerouslySetInnerHTML={{ __html: description }}/>}
+            {description &&
+            renderChildrenAsTextOrHtml({
+                component: h('div', { className: 'description' }),
+                children: description,
+                renderAsHtml: !forceDisableHtml && descriptionContentType !== 'text',
+            })}
         </div>);
 }
 export function Cancel(_a) {

package/lib/src/extensions/surveys/components/QuestionHeader.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionHeader.jsx","sourceRoot":"","sources":["../../../../../src/extensions/surveys/components/QuestionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,UAAU,cAAc,CAAC,EAQ9B;QAPG,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,eAAe,qBAAA;IAMf,OAAO,CACH,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,eAAe,EAAE,eAAe,IAAI,uBAAuB,CAAC,eAAe,EAAE,CAAC,CACxF;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAChD;YAAA,CAAC,WAAW,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAG,CACrG;QAAA,EAAE,GAAG,CAAC,CACT,CAAA;AACL,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,EAAoC;QAAlC,OAAO,aAAA;IACpB,IAAA,aAAa,GAAK,UAAU,CAAC,aAAa,CAAC,cAA9B,CAA8B;IAEnD,OAAO,CACH,CAAC,GAAG,CAAC,SAAS,CAAC,oBAAoB,CAC/B;YAAA,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CACtE;gBAAA,CAAC,SAAS,CACd;YAAA,EAAE,MAAM,CACZ;QAAA,EAAE,GAAG,CAAC,CACT,CAAA;AACL,CAAC","sourcesContent":["import { SurveyContext, defaultSurveyAppearance } from '../surveys-utils'\nimport { cancelSVG } from '../icons'\nimport { useContext } from 'preact/hooks'\n\nexport function QuestionHeader({\n    question,\n    description,\n    backgroundColor,\n}: {\n    question: string\n    description?: string | null\n    backgroundColor?: string\n}) {\n    return (\n        <div style={{ backgroundColor: backgroundColor || defaultSurveyAppearance.backgroundColor }}>\n            <div className=\"survey-question\">{question}</div>\n            {description && <div className=\"description\" dangerouslySetInnerHTML={{ __html: description }} />}\n        </div>\n    )\n}\n\nexport function Cancel({ onClick }: { onClick: () => void }) {\n    const { isPreviewMode } = useContext(SurveyContext)\n\n    return (\n        <div className=\"cancel-btn-wrapper\">\n            <button className=\"form-cancel\" onClick={onClick} disabled={isPreviewMode}>\n                {cancelSVG}\n            </button>\n        </div>\n    )\n}\n"]}
+{"version":3,"file":"QuestionHeader.jsx","sourceRoot":"","sources":["../../../../../src/extensions/surveys/components/QuestionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAA;AACrG,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAA;AAE1B,MAAM,UAAU,cAAc,CAAC,EAY9B;QAXG,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,sBAAsB,4BAAA,EACtB,eAAe,qBAAA,EACf,gBAAgB,sBAAA;IAQhB,OAAO,CACH,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,eAAe,EAAE,eAAe,IAAI,uBAAuB,CAAC,eAAe,EAAE,CAAC,CACxF;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAChD;YAAA,CAAC,WAAW;YACR,0BAA0B,CAAC;gBACvB,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;gBACjD,QAAQ,EAAE,WAAW;gBACrB,YAAY,EAAE,CAAC,gBAAgB,IAAI,sBAAsB,KAAK,MAAM;aACvE,CAAC,CACV;QAAA,EAAE,GAAG,CAAC,CACT,CAAA;AACL,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,EAAoC;QAAlC,OAAO,aAAA;IACpB,IAAA,aAAa,GAAK,UAAU,CAAC,aAAa,CAAC,cAA9B,CAA8B;IAEnD,OAAO,CACH,CAAC,GAAG,CAAC,SAAS,CAAC,oBAAoB,CAC/B;YAAA,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CACtE;gBAAA,CAAC,SAAS,CACd;YAAA,EAAE,MAAM,CACZ;QAAA,EAAE,GAAG,CAAC,CACT,CAAA;AACL,CAAC","sourcesContent":["import { SurveyContext, defaultSurveyAppearance, renderChildrenAsTextOrHtml } from '../surveys-utils'\nimport { cancelSVG } from '../icons'\nimport { useContext } from 'preact/hooks'\nimport { SurveyQuestionDescriptionContentType } from '../../../posthog-surveys-types'\nimport { h } from 'preact'\n\nexport function QuestionHeader({\n    question,\n    description,\n    descriptionContentType,\n    backgroundColor,\n    forceDisableHtml,\n}: {\n    question: string\n    description?: string | null\n    descriptionContentType?: SurveyQuestionDescriptionContentType\n    forceDisableHtml: boolean\n    backgroundColor?: string\n}) {\n    return (\n        <div style={{ backgroundColor: backgroundColor || defaultSurveyAppearance.backgroundColor }}>\n            <div className=\"survey-question\">{question}</div>\n            {description &&\n                renderChildrenAsTextOrHtml({\n                    component: h('div', { className: 'description' }),\n                    children: description,\n                    renderAsHtml: !forceDisableHtml && descriptionContentType !== 'text',\n                })}\n        </div>\n    )\n}\n\nexport function Cancel({ onClick }: { onClick: () => void }) {\n    const { isPreviewMode } = useContext(SurveyContext)\n\n    return (\n        <div className=\"cancel-btn-wrapper\">\n            <button className=\"form-cancel\" onClick={onClick} disabled={isPreviewMode}>\n                {cancelSVG}\n            </button>\n        </div>\n    )\n}\n"]}

package/lib/src/extensions/surveys/components/QuestionTypes.d.ts

@@ -1,16 +1,19 @@
 import { BasicSurveyQuestion, SurveyAppearance, LinkSurveyQuestion, RatingSurveyQuestion, MultipleSurveyQuestion } from '../../../posthog-surveys-types';
-export declare function OpenTextQuestion({ question, appearance, onSubmit, }: {
+export declare function OpenTextQuestion({ question, forceDisableHtml, appearance, onSubmit, }: {
     question: BasicSurveyQuestion;
+    forceDisableHtml: boolean;
     appearance: SurveyAppearance;
     onSubmit: (text: string) => void;
 }): JSX.Element;
-export declare function LinkQuestion({ question, appearance, onSubmit, }: {
+export declare function LinkQuestion({ question, forceDisableHtml, appearance, onSubmit, }: {
     question: LinkSurveyQuestion;
+    forceDisableHtml: boolean;
     appearance: SurveyAppearance;
     onSubmit: (clicked: string) => void;
 }): JSX.Element;
-export declare function RatingQuestion({ question, displayQuestionIndex, appearance, onSubmit, }: {
+export declare function RatingQuestion({ question, forceDisableHtml, displayQuestionIndex, appearance, onSubmit, }: {
     question: RatingSurveyQuestion;
+    forceDisableHtml: boolean;
     displayQuestionIndex: number;
     appearance: SurveyAppearance;
     onSubmit: (rating: number | null) => void;
@@ -22,8 +25,9 @@ export declare function RatingButton({ num, active, displayQuestionIndex, appear
     appearance: any;
     setActiveNumber: (num: number) => void;
 }): JSX.Element;
-export declare function MultipleChoiceQuestion({ question, displayQuestionIndex, appearance, onSubmit, }: {
+export declare function MultipleChoiceQuestion({ question, forceDisableHtml, displayQuestionIndex, appearance, onSubmit, }: {
     question: MultipleSurveyQuestion;
+    forceDisableHtml: boolean;
     displayQuestionIndex: number;
     appearance: SurveyAppearance;
     onSubmit: (choices: string | string[] | null) => void;

package/lib/src/extensions/surveys/components/QuestionTypes.jsx

@@ -32,35 +32,35 @@ import { defaultSurveyAppearance, getDisplayOrderChoices, SurveyContext } from '
 import { BottomSection } from './BottomSection';
 import { Cancel, QuestionHeader } from './QuestionHeader';
 export function OpenTextQuestion(_a) {
-    var question = _a.question, appearance = _a.appearance, onSubmit = _a.onSubmit;
+    var question = _a.question, forceDisableHtml = _a.forceDisableHtml, appearance = _a.appearance, onSubmit = _a.onSubmit;
     var textRef = useRef(null);
     var _b = __read(useState(''), 2), text = _b[0], setText = _b[1];
     var handleCloseSurveyPopup = useContext(SurveyContext).handleCloseSurveyPopup;
     return (<div className="survey-box" style={{ backgroundColor: appearance.backgroundColor || defaultSurveyAppearance.backgroundColor }} ref={textRef}>
             <Cancel onClick={function () { return handleCloseSurveyPopup(); }}/>
-            <QuestionHeader question={question.question} description={question.description} backgroundColor={appearance.backgroundColor}/>
+            <QuestionHeader question={question.question} description={question.description} descriptionContentType={question.descriptionContentType} backgroundColor={appearance.backgroundColor} forceDisableHtml={forceDisableHtml}/>
             <textarea rows={4} placeholder={appearance === null || appearance === void 0 ? void 0 : appearance.placeholder} onInput={function (e) { return setText(e.currentTarget.value); }}/>
             <BottomSection text={question.buttonText || 'Submit'} submitDisabled={!text && !question.optional} appearance={appearance} onSubmit={function () { return onSubmit(text); }}/>
         </div>);
 }
 export function LinkQuestion(_a) {
-    var question = _a.question, appearance = _a.appearance, onSubmit = _a.onSubmit;
+    var question = _a.question, forceDisableHtml = _a.forceDisableHtml, appearance = _a.appearance, onSubmit = _a.onSubmit;
     var handleCloseSurveyPopup = useContext(SurveyContext).handleCloseSurveyPopup;
     return (<div className="survey-box">
             <Cancel onClick={function () { return handleCloseSurveyPopup(); }}/>
-            <QuestionHeader question={question.question} description={question.description}/>
+            <QuestionHeader question={question.question} description={question.description} descriptionContentType={question.descriptionContentType} forceDisableHtml={forceDisableHtml}/>
             <BottomSection text={question.buttonText || 'Submit'} submitDisabled={false} link={question.link} appearance={appearance} onSubmit={function () { return onSubmit('link clicked'); }}/>
         </div>);
 }
 export function RatingQuestion(_a) {
-    var question = _a.question, displayQuestionIndex = _a.displayQuestionIndex, appearance = _a.appearance, onSubmit = _a.onSubmit;
+    var question = _a.question, forceDisableHtml = _a.forceDisableHtml, displayQuestionIndex = _a.displayQuestionIndex, appearance = _a.appearance, onSubmit = _a.onSubmit;
     var scale = question.scale;
     var starting = question.scale === 10 ? 0 : 1;
     var _b = __read(useState(null), 2), rating = _b[0], setRating = _b[1];
     var handleCloseSurveyPopup = useContext(SurveyContext).handleCloseSurveyPopup;
     return (<div className="survey-box">
             <Cancel onClick={function () { return handleCloseSurveyPopup(); }}/>
-            <QuestionHeader question={question.question} description={question.description} backgroundColor={appearance.backgroundColor}/>
+            <QuestionHeader question={question.question} description={question.description} descriptionContentType={question.descriptionContentType} forceDisableHtml={forceDisableHtml} backgroundColor={appearance.backgroundColor}/>
             <div className="rating-section">
                 <div className="rating-options">
                     {question.display === 'emoji' && (<div className="rating-options-emoji">
@@ -104,7 +104,7 @@ export function RatingButton(_a) {
         </button>);
 }
 export function MultipleChoiceQuestion(_a) {
-    var question = _a.question, displayQuestionIndex = _a.displayQuestionIndex, appearance = _a.appearance, onSubmit = _a.onSubmit;
+    var question = _a.question, forceDisableHtml = _a.forceDisableHtml, displayQuestionIndex = _a.displayQuestionIndex, appearance = _a.appearance, onSubmit = _a.onSubmit;
     var textRef = useRef(null);
     var choices = useMemo(function () { return getDisplayOrderChoices(question); }, [question]);
     var _b = __read(useState(question.type === SurveyQuestionType.MultipleChoice ? [] : null), 2), selectedChoices = _b[0], setSelectedChoices = _b[1];
@@ -114,7 +114,7 @@ export function MultipleChoiceQuestion(_a) {
     var inputType = question.type === SurveyQuestionType.SingleChoice ? 'radio' : 'checkbox';
     return (<div className="survey-box" style={{ backgroundColor: appearance.backgroundColor || defaultSurveyAppearance.backgroundColor }} ref={textRef}>
             <Cancel onClick={function () { return handleCloseSurveyPopup(); }}/>
-            <QuestionHeader question={question.question} description={question.description} backgroundColor={appearance.backgroundColor}/>
+            <QuestionHeader question={question.question} description={question.description} descriptionContentType={question.descriptionContentType} forceDisableHtml={forceDisableHtml} backgroundColor={appearance.backgroundColor}/>
             <div className="multiple-choice-options">
                 {/* Remove the last element from the choices, if hasOpenChoice is set */}
                 {/* shuffle all other options here if question.shuffleOptions is set */}

package/lib/src/extensions/surveys/components/QuestionTypes.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionTypes.jsx","sourceRoot":"","sources":["../../../../../src/extensions/surveys/components/QuestionTypes.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    BasicSurveyQuestion,\n    SurveyAppearance,\n    LinkSurveyQuestion,\n    RatingSurveyQuestion,\n    MultipleSurveyQuestion,\n    SurveyQuestionType,\n} from '../../../posthog-surveys-types'\nimport { RefObject } from 'preact'\nimport { useRef, useState, useMemo, useContext } from 'preact/hooks'\nimport { isNull, isArray } from '../../../utils/type-utils'\nimport { useContrastingTextColor } from '../hooks/useContrastingTextColor'\nimport {\n    checkSVG,\n    dissatisfiedEmoji,\n    neutralEmoji,\n    satisfiedEmoji,\n    veryDissatisfiedEmoji,\n    verySatisfiedEmoji,\n} from '../icons'\nimport { defaultSurveyAppearance, getDisplayOrderChoices, SurveyContext } from '../surveys-utils'\nimport { BottomSection } from './BottomSection'\nimport { Cancel, QuestionHeader } from './QuestionHeader'\n\nexport function OpenTextQuestion({\n    question,\n    appearance,\n    onSubmit,\n}: {\n    question: BasicSurveyQuestion\n    appearance: SurveyAppearance\n    onSubmit: (text: string) => void\n}) {\n    const textRef = useRef(null)\n    const [text, setText] = useState('')\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    return (\n        <div\n            className=\"survey-box\"\n            style={{ backgroundColor: appearance.backgroundColor || defaultSurveyAppearance.backgroundColor }}\n            ref={textRef}\n        >\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                backgroundColor={appearance.backgroundColor}\n            />\n            <textarea rows={4} placeholder={appearance?.placeholder} onInput={(e) => setText(e.currentTarget.value)} />\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={!text && !question.optional}\n                appearance={appearance}\n                onSubmit={() => onSubmit(text)}\n            />\n        </div>\n    )\n}\n\nexport function LinkQuestion({\n    question,\n    appearance,\n    onSubmit,\n}: {\n    question: LinkSurveyQuestion\n    appearance: SurveyAppearance\n    onSubmit: (clicked: string) => void\n}) {\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    return (\n        <div className=\"survey-box\">\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader question={question.question} description={question.description} />\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={false}\n                link={question.link}\n                appearance={appearance}\n                onSubmit={() => onSubmit('link clicked')}\n            />\n        </div>\n    )\n}\n\nexport function RatingQuestion({\n    question,\n    displayQuestionIndex,\n    appearance,\n    onSubmit,\n}: {\n    question: RatingSurveyQuestion\n    displayQuestionIndex: number\n    appearance: SurveyAppearance\n    onSubmit: (rating: number | null) => void\n}) {\n    const scale = question.scale\n    const starting = question.scale === 10 ? 0 : 1\n    const [rating, setRating] = useState<number | null>(null)\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    return (\n        <div className=\"survey-box\">\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                backgroundColor={appearance.backgroundColor}\n            />\n            <div className=\"rating-section\">\n                <div className=\"rating-options\">\n                    {question.display === 'emoji' && (\n                        <div className=\"rating-options-emoji\">\n                            {(question.scale === 3 ? threeScaleEmojis : fiveScaleEmojis).map((emoji, idx) => {\n                                const active = idx + 1 === rating\n                                return (\n                                    <button\n                                        className={`ratings-emoji question-${displayQuestionIndex}-rating-${idx} ${\n                                            active ? 'rating-active' : null\n                                        }`}\n                                        value={idx + 1}\n                                        key={idx}\n                                        type=\"button\"\n                                        onClick={() => {\n                                            setRating(idx + 1)\n                                        }}\n                                    >\n                                        {emoji}\n                                    </button>\n                                )\n                            })}\n                        </div>\n                    )}\n                    {question.display === 'number' && (\n                        <div\n                            className=\"rating-options-number\"\n                            style={{ gridTemplateColumns: `repeat(${scale - starting + 1}, minmax(0, 1fr))` }}\n                        >\n                            {(question.scale === 5 ? fiveScaleNumbers : tenScaleNumbers).map((number, idx) => {\n                                const active = rating === number\n                                return (\n                                    <RatingButton\n                                        key={idx}\n                                        displayQuestionIndex={displayQuestionIndex}\n                                        active={active}\n                                        appearance={appearance}\n                                        num={number}\n                                        setActiveNumber={(num) => {\n                                            setRating(num)\n                                        }}\n                                    />\n                                )\n                            })}\n                        </div>\n                    )}\n                </div>\n                <div className=\"rating-text\">\n                    <div>{question.lowerBoundLabel}</div>\n                    <div>{question.upperBoundLabel}</div>\n                </div>\n            </div>\n            <BottomSection\n                text={question.buttonText || appearance?.submitButtonText || 'Submit'}\n                submitDisabled={isNull(rating) && !question.optional}\n                appearance={appearance}\n                onSubmit={() => onSubmit(rating)}\n            />\n        </div>\n    )\n}\n\nexport function RatingButton({\n    num,\n    active,\n    displayQuestionIndex,\n    appearance,\n    setActiveNumber,\n}: {\n    num: number\n    active: boolean\n    displayQuestionIndex: number\n    appearance: any\n    setActiveNumber: (num: number) => void\n}) {\n    const { textColor, ref } = useContrastingTextColor({ appearance, defaultTextColor: 'black', forceUpdate: active })\n    return (\n        <button\n            ref={ref as RefObject<HTMLButtonElement>}\n            className={`ratings-number question-${displayQuestionIndex}-rating-${num} ${\n                active ? 'rating-active' : null\n            }`}\n            type=\"button\"\n            onClick={() => {\n                setActiveNumber(num)\n            }}\n            style={{\n                color: textColor,\n                backgroundColor: active ? appearance.ratingButtonActiveColor : appearance.ratingButtonColor,\n                borderColor: appearance.borderColor,\n            }}\n        >\n            {num}\n        </button>\n    )\n}\n\nexport function MultipleChoiceQuestion({\n    question,\n    displayQuestionIndex,\n    appearance,\n    onSubmit,\n}: {\n    question: MultipleSurveyQuestion\n    displayQuestionIndex: number\n    appearance: SurveyAppearance\n    onSubmit: (choices: string | string[] | null) => void\n}) {\n    const textRef = useRef(null)\n    const choices = useMemo(() => getDisplayOrderChoices(question), [question])\n    const [selectedChoices, setSelectedChoices] = useState<string | string[] | null>(\n        question.type === SurveyQuestionType.MultipleChoice ? [] : null\n    )\n    const [openChoiceSelected, setOpenChoiceSelected] = useState(false)\n    const [openEndedInput, setOpenEndedInput] = useState('')\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    const inputType = question.type === SurveyQuestionType.SingleChoice ? 'radio' : 'checkbox'\n    return (\n        <div\n            className=\"survey-box\"\n            style={{ backgroundColor: appearance.backgroundColor || defaultSurveyAppearance.backgroundColor }}\n            ref={textRef}\n        >\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                backgroundColor={appearance.backgroundColor}\n            />\n            <div className=\"multiple-choice-options\">\n                {/* Remove the last element from the choices, if hasOpenChoice is set */}\n                {/* shuffle all other options here if question.shuffleOptions is set */}\n                {/* Always ensure that the open ended choice is the last option */}\n                {choices.map((choice: string, idx: number) => {\n                    let choiceClass = 'choice-option'\n                    const val = choice\n                    const option = choice\n                    if (!!question.hasOpenChoice && idx === question.choices.length - 1) {\n                        choiceClass += ' choice-option-open'\n                    }\n                    return (\n                        <div className={choiceClass}>\n                            <input\n                                type={inputType}\n                                id={`surveyQuestion${displayQuestionIndex}Choice${idx}`}\n                                name={`question${displayQuestionIndex}`}\n                                value={val}\n                                disabled={!val}\n                                onInput={() => {\n                                    if (question.hasOpenChoice && idx === question.choices.length - 1) {\n                                        return setOpenChoiceSelected(!openChoiceSelected)\n                                    }\n                                    if (question.type === SurveyQuestionType.SingleChoice) {\n                                        return setSelectedChoices(val)\n                                    }\n                                    if (\n                                        question.type === SurveyQuestionType.MultipleChoice &&\n                                        isArray(selectedChoices)\n                                    ) {\n                                        if (selectedChoices.includes(val)) {\n                                            // filter out values because clicking on a selected choice should deselect it\n                                            return setSelectedChoices(\n                                                selectedChoices.filter((choice) => choice !== val)\n                                            )\n                                        }\n                                        return setSelectedChoices([...selectedChoices, val])\n                                    }\n                                }}\n                            />\n                            <label\n                                htmlFor={`surveyQuestion${displayQuestionIndex}Choice${idx}`}\n                                style={{ color: 'black' }}\n                            >\n                                {question.hasOpenChoice && idx === question.choices.length - 1 ? (\n                                    <>\n                                        <span>{option}:</span>\n                                        <input\n                                            type=\"text\"\n                                            id={`surveyQuestion${displayQuestionIndex}Choice${idx}Open`}\n                                            name={`question${displayQuestionIndex}`}\n                                            onInput={(e) => {\n                                                const userValue = e.currentTarget.value\n                                                if (question.type === SurveyQuestionType.SingleChoice) {\n                                                    return setSelectedChoices(userValue)\n                                                }\n                                                if (\n                                                    question.type === SurveyQuestionType.MultipleChoice &&\n                                                    isArray(selectedChoices)\n                                                ) {\n                                                    return setOpenEndedInput(userValue)\n                                                }\n                                            }}\n                                        />\n                                    </>\n                                ) : (\n                                    option\n                                )}\n                            </label>\n                            <span className=\"choice-check\" style={{ color: 'black' }}>\n                                {checkSVG}\n                            </span>\n                        </div>\n                    )\n                })}\n            </div>\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={\n                    (isNull(selectedChoices) ||\n                        (isArray(selectedChoices) && !openChoiceSelected && selectedChoices.length === 0) ||\n                        (isArray(selectedChoices) &&\n                            openChoiceSelected &&\n                            !openEndedInput &&\n                            selectedChoices.length === 0 &&\n                            !question.optional)) &&\n                    !question.optional\n                }\n                appearance={appearance}\n                onSubmit={() => {\n                    if (openChoiceSelected && question.type === SurveyQuestionType.MultipleChoice) {\n                        if (isArray(selectedChoices)) {\n                            onSubmit([...selectedChoices, openEndedInput])\n                        }\n                    } else {\n                        onSubmit(selectedChoices)\n                    }\n                }}\n            />\n        </div>\n    )\n}\n\nconst threeScaleEmojis = [dissatisfiedEmoji, neutralEmoji, satisfiedEmoji]\nconst fiveScaleEmojis = [veryDissatisfiedEmoji, dissatisfiedEmoji, neutralEmoji, satisfiedEmoji, verySatisfiedEmoji]\nconst fiveScaleNumbers = [1, 2, 3, 4, 5]\nconst tenScaleNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\n"]}
+{"version":3,"file":"QuestionTypes.jsx","sourceRoot":"","sources":["../../../../../src/extensions/surveys/components/QuestionTypes.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    BasicSurveyQuestion,\n    SurveyAppearance,\n    LinkSurveyQuestion,\n    RatingSurveyQuestion,\n    MultipleSurveyQuestion,\n    SurveyQuestionType,\n} from '../../../posthog-surveys-types'\nimport { RefObject } from 'preact'\nimport { useRef, useState, useMemo, useContext } from 'preact/hooks'\nimport { isNull, isArray } from '../../../utils/type-utils'\nimport { useContrastingTextColor } from '../hooks/useContrastingTextColor'\nimport {\n    checkSVG,\n    dissatisfiedEmoji,\n    neutralEmoji,\n    satisfiedEmoji,\n    veryDissatisfiedEmoji,\n    verySatisfiedEmoji,\n} from '../icons'\nimport { defaultSurveyAppearance, getDisplayOrderChoices, SurveyContext } from '../surveys-utils'\nimport { BottomSection } from './BottomSection'\nimport { Cancel, QuestionHeader } from './QuestionHeader'\n\nexport function OpenTextQuestion({\n    question,\n    forceDisableHtml,\n    appearance,\n    onSubmit,\n}: {\n    question: BasicSurveyQuestion\n    forceDisableHtml: boolean\n    appearance: SurveyAppearance\n    onSubmit: (text: string) => void\n}) {\n    const textRef = useRef(null)\n    const [text, setText] = useState('')\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    return (\n        <div\n            className=\"survey-box\"\n            style={{ backgroundColor: appearance.backgroundColor || defaultSurveyAppearance.backgroundColor }}\n            ref={textRef}\n        >\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                descriptionContentType={question.descriptionContentType}\n                backgroundColor={appearance.backgroundColor}\n                forceDisableHtml={forceDisableHtml}\n            />\n            <textarea rows={4} placeholder={appearance?.placeholder} onInput={(e) => setText(e.currentTarget.value)} />\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={!text && !question.optional}\n                appearance={appearance}\n                onSubmit={() => onSubmit(text)}\n            />\n        </div>\n    )\n}\n\nexport function LinkQuestion({\n    question,\n    forceDisableHtml,\n    appearance,\n    onSubmit,\n}: {\n    question: LinkSurveyQuestion\n    forceDisableHtml: boolean\n    appearance: SurveyAppearance\n    onSubmit: (clicked: string) => void\n}) {\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    return (\n        <div className=\"survey-box\">\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                descriptionContentType={question.descriptionContentType}\n                forceDisableHtml={forceDisableHtml}\n            />\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={false}\n                link={question.link}\n                appearance={appearance}\n                onSubmit={() => onSubmit('link clicked')}\n            />\n        </div>\n    )\n}\n\nexport function RatingQuestion({\n    question,\n    forceDisableHtml,\n    displayQuestionIndex,\n    appearance,\n    onSubmit,\n}: {\n    question: RatingSurveyQuestion\n    forceDisableHtml: boolean\n    displayQuestionIndex: number\n    appearance: SurveyAppearance\n    onSubmit: (rating: number | null) => void\n}) {\n    const scale = question.scale\n    const starting = question.scale === 10 ? 0 : 1\n    const [rating, setRating] = useState<number | null>(null)\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    return (\n        <div className=\"survey-box\">\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                descriptionContentType={question.descriptionContentType}\n                forceDisableHtml={forceDisableHtml}\n                backgroundColor={appearance.backgroundColor}\n            />\n            <div className=\"rating-section\">\n                <div className=\"rating-options\">\n                    {question.display === 'emoji' && (\n                        <div className=\"rating-options-emoji\">\n                            {(question.scale === 3 ? threeScaleEmojis : fiveScaleEmojis).map((emoji, idx) => {\n                                const active = idx + 1 === rating\n                                return (\n                                    <button\n                                        className={`ratings-emoji question-${displayQuestionIndex}-rating-${idx} ${\n                                            active ? 'rating-active' : null\n                                        }`}\n                                        value={idx + 1}\n                                        key={idx}\n                                        type=\"button\"\n                                        onClick={() => {\n                                            setRating(idx + 1)\n                                        }}\n                                    >\n                                        {emoji}\n                                    </button>\n                                )\n                            })}\n                        </div>\n                    )}\n                    {question.display === 'number' && (\n                        <div\n                            className=\"rating-options-number\"\n                            style={{ gridTemplateColumns: `repeat(${scale - starting + 1}, minmax(0, 1fr))` }}\n                        >\n                            {(question.scale === 5 ? fiveScaleNumbers : tenScaleNumbers).map((number, idx) => {\n                                const active = rating === number\n                                return (\n                                    <RatingButton\n                                        key={idx}\n                                        displayQuestionIndex={displayQuestionIndex}\n                                        active={active}\n                                        appearance={appearance}\n                                        num={number}\n                                        setActiveNumber={(num) => {\n                                            setRating(num)\n                                        }}\n                                    />\n                                )\n                            })}\n                        </div>\n                    )}\n                </div>\n                <div className=\"rating-text\">\n                    <div>{question.lowerBoundLabel}</div>\n                    <div>{question.upperBoundLabel}</div>\n                </div>\n            </div>\n            <BottomSection\n                text={question.buttonText || appearance?.submitButtonText || 'Submit'}\n                submitDisabled={isNull(rating) && !question.optional}\n                appearance={appearance}\n                onSubmit={() => onSubmit(rating)}\n            />\n        </div>\n    )\n}\n\nexport function RatingButton({\n    num,\n    active,\n    displayQuestionIndex,\n    appearance,\n    setActiveNumber,\n}: {\n    num: number\n    active: boolean\n    displayQuestionIndex: number\n    appearance: any\n    setActiveNumber: (num: number) => void\n}) {\n    const { textColor, ref } = useContrastingTextColor({ appearance, defaultTextColor: 'black', forceUpdate: active })\n    return (\n        <button\n            ref={ref as RefObject<HTMLButtonElement>}\n            className={`ratings-number question-${displayQuestionIndex}-rating-${num} ${\n                active ? 'rating-active' : null\n            }`}\n            type=\"button\"\n            onClick={() => {\n                setActiveNumber(num)\n            }}\n            style={{\n                color: textColor,\n                backgroundColor: active ? appearance.ratingButtonActiveColor : appearance.ratingButtonColor,\n                borderColor: appearance.borderColor,\n            }}\n        >\n            {num}\n        </button>\n    )\n}\n\nexport function MultipleChoiceQuestion({\n    question,\n    forceDisableHtml,\n    displayQuestionIndex,\n    appearance,\n    onSubmit,\n}: {\n    question: MultipleSurveyQuestion\n    forceDisableHtml: boolean\n    displayQuestionIndex: number\n    appearance: SurveyAppearance\n    onSubmit: (choices: string | string[] | null) => void\n}) {\n    const textRef = useRef(null)\n    const choices = useMemo(() => getDisplayOrderChoices(question), [question])\n    const [selectedChoices, setSelectedChoices] = useState<string | string[] | null>(\n        question.type === SurveyQuestionType.MultipleChoice ? [] : null\n    )\n    const [openChoiceSelected, setOpenChoiceSelected] = useState(false)\n    const [openEndedInput, setOpenEndedInput] = useState('')\n    const { handleCloseSurveyPopup } = useContext(SurveyContext)\n\n    const inputType = question.type === SurveyQuestionType.SingleChoice ? 'radio' : 'checkbox'\n    return (\n        <div\n            className=\"survey-box\"\n            style={{ backgroundColor: appearance.backgroundColor || defaultSurveyAppearance.backgroundColor }}\n            ref={textRef}\n        >\n            <Cancel onClick={() => handleCloseSurveyPopup()} />\n            <QuestionHeader\n                question={question.question}\n                description={question.description}\n                descriptionContentType={question.descriptionContentType}\n                forceDisableHtml={forceDisableHtml}\n                backgroundColor={appearance.backgroundColor}\n            />\n            <div className=\"multiple-choice-options\">\n                {/* Remove the last element from the choices, if hasOpenChoice is set */}\n                {/* shuffle all other options here if question.shuffleOptions is set */}\n                {/* Always ensure that the open ended choice is the last option */}\n                {choices.map((choice: string, idx: number) => {\n                    let choiceClass = 'choice-option'\n                    const val = choice\n                    const option = choice\n                    if (!!question.hasOpenChoice && idx === question.choices.length - 1) {\n                        choiceClass += ' choice-option-open'\n                    }\n                    return (\n                        <div className={choiceClass}>\n                            <input\n                                type={inputType}\n                                id={`surveyQuestion${displayQuestionIndex}Choice${idx}`}\n                                name={`question${displayQuestionIndex}`}\n                                value={val}\n                                disabled={!val}\n                                onInput={() => {\n                                    if (question.hasOpenChoice && idx === question.choices.length - 1) {\n                                        return setOpenChoiceSelected(!openChoiceSelected)\n                                    }\n                                    if (question.type === SurveyQuestionType.SingleChoice) {\n                                        return setSelectedChoices(val)\n                                    }\n                                    if (\n                                        question.type === SurveyQuestionType.MultipleChoice &&\n                                        isArray(selectedChoices)\n                                    ) {\n                                        if (selectedChoices.includes(val)) {\n                                            // filter out values because clicking on a selected choice should deselect it\n                                            return setSelectedChoices(\n                                                selectedChoices.filter((choice) => choice !== val)\n                                            )\n                                        }\n                                        return setSelectedChoices([...selectedChoices, val])\n                                    }\n                                }}\n                            />\n                            <label\n                                htmlFor={`surveyQuestion${displayQuestionIndex}Choice${idx}`}\n                                style={{ color: 'black' }}\n                            >\n                                {question.hasOpenChoice && idx === question.choices.length - 1 ? (\n                                    <>\n                                        <span>{option}:</span>\n                                        <input\n                                            type=\"text\"\n                                            id={`surveyQuestion${displayQuestionIndex}Choice${idx}Open`}\n                                            name={`question${displayQuestionIndex}`}\n                                            onInput={(e) => {\n                                                const userValue = e.currentTarget.value\n                                                if (question.type === SurveyQuestionType.SingleChoice) {\n                                                    return setSelectedChoices(userValue)\n                                                }\n                                                if (\n                                                    question.type === SurveyQuestionType.MultipleChoice &&\n                                                    isArray(selectedChoices)\n                                                ) {\n                                                    return setOpenEndedInput(userValue)\n                                                }\n                                            }}\n                                        />\n                                    </>\n                                ) : (\n                                    option\n                                )}\n                            </label>\n                            <span className=\"choice-check\" style={{ color: 'black' }}>\n                                {checkSVG}\n                            </span>\n                        </div>\n                    )\n                })}\n            </div>\n            <BottomSection\n                text={question.buttonText || 'Submit'}\n                submitDisabled={\n                    (isNull(selectedChoices) ||\n                        (isArray(selectedChoices) && !openChoiceSelected && selectedChoices.length === 0) ||\n                        (isArray(selectedChoices) &&\n                            openChoiceSelected &&\n                            !openEndedInput &&\n                            selectedChoices.length === 0 &&\n                            !question.optional)) &&\n                    !question.optional\n                }\n                appearance={appearance}\n                onSubmit={() => {\n                    if (openChoiceSelected && question.type === SurveyQuestionType.MultipleChoice) {\n                        if (isArray(selectedChoices)) {\n                            onSubmit([...selectedChoices, openEndedInput])\n                        }\n                    } else {\n                        onSubmit(selectedChoices)\n                    }\n                }}\n            />\n        </div>\n    )\n}\n\nconst threeScaleEmojis = [dissatisfiedEmoji, neutralEmoji, satisfiedEmoji]\nconst fiveScaleEmojis = [veryDissatisfiedEmoji, dissatisfiedEmoji, neutralEmoji, satisfiedEmoji, verySatisfiedEmoji]\nconst fiveScaleNumbers = [1, 2, 3, 4, 5]\nconst tenScaleNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\n"]}

package/lib/src/extensions/surveys/surveys-utils.d.ts

@@ -1,5 +1,6 @@
 import { PostHog } from '../../posthog-core';
 import { Survey, SurveyAppearance, MultipleSurveyQuestion, SurveyQuestion } from '../../posthog-surveys-types';
+import { VNode } from 'preact';
 export declare const style: (appearance: SurveyAppearance | null) => string;
 export declare function getContrastingTextColor(color?: string): "black" | "white";
 export declare function getTextColor(el: HTMLElement): "black" | "white";
@@ -15,3 +16,15 @@ export declare const SurveyContext: import("preact").Context<{
     previewPageIndex: number | undefined;
     handleCloseSurveyPopup: () => void;
 }>;
+interface RenderProps {
+    component: VNode<{
+        className: string;
+    }>;
+    children: string;
+    renderAsHtml?: boolean;
+    style?: React.CSSProperties;
+}
+export declare const renderChildrenAsTextOrHtml: ({ component, children, renderAsHtml, style }: RenderProps) => VNode<{
+    className: string;
+}>;
+export {};

package/lib/src/extensions/surveys/surveys-utils.jsx

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { window as _window, document as _document } from '../../utils/globals';
-import { createContext } from 'preact';
+import { cloneElement, createContext } from 'preact';
 // We cast the types here which is dangerous but protected by the top level generateSurveys call
 var window = _window;
 var document = _document;
@@ -294,11 +294,23 @@ export var getDisplayOrderQuestions = function (survey) {
     if (!survey.appearance || !survey.appearance.shuffleQuestions) {
         return survey.questions;
     }
-    return shuffle(survey.questions);
+    return reverseIfUnshuffled(survey.questions, shuffle(survey.questions));
 };
 export var SurveyContext = createContext({
     isPreviewMode: false,
     previewPageIndex: 0,
     handleCloseSurveyPopup: function () { },
 });
+export var renderChildrenAsTextOrHtml = function (_a) {
+    var component = _a.component, children = _a.children, renderAsHtml = _a.renderAsHtml, style = _a.style;
+    return renderAsHtml
+        ? cloneElement(component, {
+            dangerouslySetInnerHTML: { __html: children },
+            style: style,
+        })
+        : cloneElement(component, {
+            children: children,
+            style: style,
+        });
+};
 //# sourceMappingURL=surveys-utils.jsx.map