@micha.bigler/survey-renderer 0.1.0

package/dist/SurveyCompletionLayout.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Button, Paper, Stack, Typography } from "@mui/material";
+const SurveyCompletionLayout = ({ actionButtons = [], body = "", headline = "", primaryCard = null, resourceCard = null, rootId = "survey-completion-layout", }) => (_jsx(Paper, { id: rootId, elevation: 0, sx: {
+        border: "1px solid rgba(20, 83, 45, 0.08)",
+        boxShadow: "none",
+        p: { xs: 3, md: 4 },
+    }, children: _jsxs(Stack, { spacing: 3, children: [_jsxs(Stack, { spacing: 1.25, children: [_jsx(Typography, { variant: "h3", children: headline }), body ? (_jsx(Typography, { color: "text.secondary", sx: { maxWidth: 980, whiteSpace: "pre-line" }, children: body })) : null] }), primaryCard || resourceCard ? (_jsxs(Box, { sx: {
+                    display: "grid",
+                    gap: 2,
+                    gridTemplateColumns: {
+                        xs: "1fr",
+                        md: primaryCard && resourceCard ? "minmax(0, 1.6fr) minmax(0, 1fr)" : "1fr",
+                    },
+                }, children: [primaryCard ? (_jsx(Paper, { elevation: 0, sx: {
+                            backgroundColor: "rgba(255, 255, 255, 0.26)",
+                            border: "1px solid rgba(17, 17, 17, 0.08)",
+                            borderRadius: 3,
+                            p: { xs: 2, md: 2.5 },
+                        }, children: _jsxs(Stack, { spacing: 1.5, children: [primaryCard.title ? _jsx(Typography, { variant: "h5", children: primaryCard.title }) : null, primaryCard.body ? (_jsx(Typography, { color: "text.secondary", sx: { maxWidth: 920, whiteSpace: "pre-line" }, children: primaryCard.body })) : null, primaryCard.note ? (_jsx(Typography, { color: "text.secondary", sx: { maxWidth: 920, whiteSpace: "pre-line" }, children: primaryCard.note })) : null, Array.isArray(primaryCard.actions) && primaryCard.actions.length > 0 ? (_jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 1.5, children: primaryCard.actions.map((action) => (_jsx(Button, { component: action.href ? "a" : "button", href: action.href, onClick: action.onClick, rel: action.href ? "noreferrer" : undefined, sx: { minHeight: 52, px: 3 }, target: action.href ? action.target || "_self" : undefined, variant: action.variant || "contained", children: action.label }, action.key))) })) : null] }) })) : null, resourceCard ? (_jsx(Paper, { elevation: 0, sx: {
+                            backgroundColor: "rgba(16, 84, 43, 0.04)",
+                            border: "1px solid rgba(17, 17, 17, 0.08)",
+                            borderRadius: 3,
+                            p: { xs: 2, md: 2.5 },
+                        }, children: _jsxs(Stack, { spacing: 1.25, children: [resourceCard.title ? _jsx(Typography, { variant: "h6", children: resourceCard.title }) : null, resourceCard.body ? (_jsx(Typography, { color: "text.secondary", sx: { whiteSpace: "pre-line" }, children: resourceCard.body })) : null, resourceCard.action ? (_jsx(Button, { component: "a", href: resourceCard.action.href, rel: "noreferrer", sx: { alignSelf: "flex-start", minHeight: 48, px: 2.5 }, target: "_blank", variant: "outlined", children: resourceCard.action.label })) : null] }) })) : null] })) : null, actionButtons.length > 0 ? (_jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 1.5, children: actionButtons.map((action) => (_jsx(Button, { component: action.href ? "a" : "button", href: action.href, onClick: action.onClick, rel: action.href ? "noreferrer" : undefined, sx: { minHeight: 56, px: 3 }, target: action.href ? action.target || "_self" : undefined, variant: action.variant || "outlined", children: action.label }, action.key))) })) : null] }) }));
+export default SurveyCompletionLayout;

package/dist/SurveyDiscoverySelect.js

@@ -0,0 +1,271 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { Alert, Autocomplete, Box, Button, Chip, Paper, Stack, TextField, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { getDiscoveryDataset } from "./discoveryDatasets";
+import { buildDiscoveryDeck, buildDiscoveryItems, filterDiscoveryItemsByGate, resolveDiscoveryStrategy, serializeDiscoveryValue, } from "./discoveryEngine";
+import SurveyGeoSelect from "./SurveyGeoSelect";
+import SurveyQuestionHeader from "./SurveyQuestionHeader";
+const SWIPE_THRESHOLD = 110;
+function DiscoveryCard({ active, item, onSkip, onKeep }) {
+    const [dragX, setDragX] = React.useState(0);
+    const [dragging, setDragging] = React.useState(false);
+    const [imageFailed, setImageFailed] = React.useState(false);
+    const startXRef = React.useRef(0);
+    React.useEffect(() => {
+        setDragX(0);
+        setDragging(false);
+        setImageFailed(false);
+    }, [item === null || item === void 0 ? void 0 : item.imageUrl, item === null || item === void 0 ? void 0 : item.value]);
+    const rotation = dragX / 16;
+    const showImage = Boolean(item === null || item === void 0 ? void 0 : item.imageUrl) && !imageFailed;
+    const handlePointerDown = (event) => {
+        var _a, _b;
+        if (!active) {
+            return;
+        }
+        startXRef.current = event.clientX;
+        setDragging(true);
+        (_b = (_a = event.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, event.pointerId);
+    };
+    const handlePointerMove = (event) => {
+        if (!dragging || !active) {
+            return;
+        }
+        setDragX(event.clientX - startXRef.current);
+    };
+    const handlePointerEnd = () => {
+        if (!active) {
+            return;
+        }
+        const delta = dragX;
+        setDragging(false);
+        setDragX(0);
+        if (delta >= SWIPE_THRESHOLD) {
+            onKeep(item.value);
+            return;
+        }
+        if (delta <= -SWIPE_THRESHOLD) {
+            onSkip(item.value);
+        }
+    };
+    if (!item) {
+        return null;
+    }
+    return (_jsx(Paper, { elevation: 0, onPointerCancel: handlePointerEnd, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerEnd, sx: {
+            border: "1px solid rgba(17, 17, 17, 0.08)",
+            borderRadius: 4,
+            cursor: active ? "grab" : "default",
+            overflow: "hidden",
+            position: "relative",
+            touchAction: "pan-y",
+            transform: active ? `translateX(${dragX}px) rotate(${rotation}deg)` : "scale(1)",
+            transition: dragging ? "none" : "transform 220ms ease, opacity 220ms ease",
+            userSelect: "none",
+        }, children: _jsxs(Box, { sx: {
+                aspectRatio: "16 / 9",
+                alignItems: "flex-end",
+                background: "#f7eef3",
+                color: "#171117",
+                display: "flex",
+                minHeight: { xs: 260, sm: 320 },
+                p: { xs: 1.25, sm: 2 },
+                position: "relative",
+                width: "100%",
+            }, children: [showImage ? (_jsx(Box, { alt: item.imageAlt || item.label, component: "img", onError: () => setImageFailed(true), src: item.imageUrl, sx: {
+                        height: "100%",
+                        inset: 0,
+                        objectFit: "cover",
+                        position: "absolute",
+                        width: "100%",
+                    } })) : null, _jsx(Box, { sx: {
+                        background: showImage
+                            ? "linear-gradient(180deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.72) 100%)"
+                            : "none",
+                        inset: 0,
+                        position: "absolute",
+                    } }), _jsx(Stack, { justifyContent: "flex-end", spacing: 1, sx: { position: "relative", width: "100%", zIndex: 1 }, children: _jsx(Typography, { sx: {
+                            color: showImage ? "#ffffff" : "#171117",
+                            fontSize: { xs: 28, sm: 34 },
+                            fontWeight: 700,
+                            lineHeight: 1.05,
+                        }, children: item.label }) })] }) }));
+}
+function buildNextQueue(items, state, strategy) {
+    return buildDiscoveryDeck(items, state, strategy);
+}
+function selectedGateLabels(gateOptions, gateValues) {
+    const selectedValueKeys = new Set((gateValues || []).map(serializeDiscoveryValue));
+    return (gateOptions || [])
+        .filter((option) => selectedValueKeys.has(serializeDiscoveryValue(option.value)))
+        .map((option) => option.label || "");
+}
+const SurveyDiscoverySelect = ({ allOptionsByName, errorText, hint, label, onChange, options, uiConfig, value }) => {
+    const { t } = useTranslation();
+    const dataset = React.useMemo(() => getDiscoveryDataset(uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.datasetKey), [uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.datasetKey]);
+    const gatingConfig = (uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.gating) || null;
+    const hasGateStep = (gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.type) === "geo-select";
+    const strategy = React.useMemo(() => resolveDiscoveryStrategy((dataset === null || dataset === void 0 ? void 0 : dataset.strategy) || {}, (uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.strategy) || {}, {
+        deckSize: uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.deckSize,
+        maxSelections: uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.maxSelections,
+        randomShare: uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.randomShare,
+    }), [dataset === null || dataset === void 0 ? void 0 : dataset.strategy, uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.deckSize, uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.maxSelections, uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.randomShare, uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.strategy]);
+    const items = React.useMemo(() => buildDiscoveryItems(options, dataset), [dataset, options]);
+    const gateOptions = React.useMemo(() => (hasGateStep ? (allOptionsByName === null || allOptionsByName === void 0 ? void 0 : allOptionsByName[gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.sourceQuestionName]) || [] : []), [allOptionsByName, gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.sourceQuestionName, hasGateStep]);
+    const [gateValues, setGateValues] = React.useState([]);
+    const [seenValues, setSeenValues] = React.useState([]);
+    const [dismissedValues, setDismissedValues] = React.useState([]);
+    const [queue, setQueue] = React.useState([]);
+    const [queueCursor, setQueueCursor] = React.useState(0);
+    const preservedNextValueKeyRef = React.useRef("");
+    const previousGateKeyRef = React.useRef("");
+    const selectedValues = Array.isArray(value) ? value : [];
+    const selectedValueKeys = React.useMemo(() => selectedValues.map(serializeDiscoveryValue), [selectedValues]);
+    const seenValueKeys = React.useMemo(() => seenValues.map(serializeDiscoveryValue), [seenValues]);
+    const dismissedValueKeys = React.useMemo(() => dismissedValues.map(serializeDiscoveryValue), [dismissedValues]);
+    const gateLabels = React.useMemo(() => selectedGateLabels(gateOptions, gateValues), [gateOptions, gateValues]);
+    const filteredItems = React.useMemo(() => {
+        if (!hasGateStep) {
+            return items;
+        }
+        return filterDiscoveryItemsByGate(items, gateLabels, gatingConfig);
+    }, [gateLabels, gatingConfig, hasGateStep, items]);
+    const filteredOptionValueKeys = React.useMemo(() => new Set(filteredItems.map((item) => item.valueKey)), [filteredItems]);
+    const filteredOptions = React.useMemo(() => options.filter((option) => filteredOptionValueKeys.has(serializeDiscoveryValue(option.value))), [filteredOptionValueKeys, options]);
+    React.useEffect(() => {
+        setGateValues([]);
+    }, [gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.datasetKey, gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.sourceQuestionName]);
+    React.useEffect(() => {
+        if (!hasGateStep) {
+            return;
+        }
+        const gateKey = gateValues.map(serializeDiscoveryValue).sort().join("|");
+        if (gateKey === previousGateKeyRef.current) {
+            return;
+        }
+        previousGateKeyRef.current = gateKey;
+        preservedNextValueKeyRef.current = "";
+        setSeenValues([]);
+        setDismissedValues([]);
+        setQueue([]);
+        setQueueCursor(0);
+        const allowedValueKeys = new Set(filteredItems.map((item) => item.valueKey));
+        const nextSelectedValues = selectedValues.filter((entry) => allowedValueKeys.has(serializeDiscoveryValue(entry)));
+        if (nextSelectedValues.length !== selectedValues.length) {
+            onChange(nextSelectedValues);
+        }
+    }, [filteredItems, gateValues, hasGateStep, onChange, selectedValues]);
+    React.useEffect(() => {
+        const nextQueue = buildNextQueue(filteredItems, {
+            dismissedValues,
+            seenValues,
+            selectedValues,
+        }, strategy);
+        const preservedNextValueKey = preservedNextValueKeyRef.current;
+        if (preservedNextValueKey) {
+            const preservedIndex = nextQueue.findIndex((item) => item.valueKey === preservedNextValueKey);
+            if (preservedIndex > 0) {
+                const [preservedItem] = nextQueue.splice(preservedIndex, 1);
+                nextQueue.unshift(preservedItem);
+            }
+            preservedNextValueKeyRef.current = "";
+        }
+        setQueue(nextQueue);
+        setQueueCursor(0);
+    }, [dismissedValues, filteredItems, seenValues, selectedValues, strategy]);
+    const currentItem = queue[queueCursor] || null;
+    const previewItems = queue.slice(queueCursor + 1, queueCursor + 3);
+    const selectedItems = filteredItems.filter((item) => selectedValueKeys.includes(item.valueKey));
+    const maxReached = selectedValues.length >= strategy.maxSelections;
+    const commitSelection = React.useCallback((nextValues) => {
+        onChange(nextValues.slice(0, strategy.maxSelections));
+    }, [onChange, strategy.maxSelections]);
+    const markSeen = React.useCallback((nextValue) => {
+        setSeenValues((current) => (current.includes(nextValue) ? current : [...current, nextValue]));
+    }, []);
+    const moveForward = React.useCallback(() => {
+        var _a;
+        preservedNextValueKeyRef.current = ((_a = queue[queueCursor + 1]) === null || _a === void 0 ? void 0 : _a.valueKey) || "";
+        setQueueCursor((current) => current + 1);
+    }, [queue, queueCursor]);
+    const handleSkip = React.useCallback((nextValue) => {
+        markSeen(nextValue);
+        setDismissedValues((current) => (current.includes(nextValue) ? current : [...current, nextValue]));
+        moveForward();
+    }, [markSeen, moveForward]);
+    const handleKeep = React.useCallback((nextValue) => {
+        markSeen(nextValue);
+        if (!selectedValueKeys.includes(serializeDiscoveryValue(nextValue)) && selectedValues.length < strategy.maxSelections) {
+            commitSelection([...selectedValues, nextValue]);
+        }
+        moveForward();
+    }, [commitSelection, markSeen, moveForward, selectedValueKeys, selectedValues, strategy.maxSelections]);
+    const handleManualSelection = (_event, nextOptions) => {
+        const nextValues = nextOptions.map((option) => option.value).slice(0, strategy.maxSelections);
+        commitSelection(nextValues);
+    };
+    const hasRemainingDiscoverable = filteredItems.some((item) => item.discoverable &&
+        !selectedValueKeys.includes(item.valueKey) &&
+        !dismissedValueKeys.includes(item.valueKey) &&
+        !seenValueKeys.includes(item.valueKey));
+    return (_jsxs(Stack, { spacing: 1.5, children: [_jsx(SurveyQuestionHeader, { errorText: errorText, hint: hint, label: label }), hasGateStep ? (_jsx(SurveyGeoSelect, { hint: t("surveyRenderer.DISCOVERY_GATE_HINT"), label: t("surveyRenderer.DISCOVERY_GATE_LABEL", { max: (gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.maxSelections) || 1 }), maxSelections: (gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.maxSelections) || 1, multiple: true, onChange: setGateValues, options: gateOptions, uiConfig: {
+                    autocompletePlaceholderKey: (gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.autocompletePlaceholderKey) || "surveyRenderer.DISCOVERY_GATE_PLACEHOLDER",
+                    datasetKey: gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.datasetKey,
+                    emptyMessageKey: (gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.emptyMessageKey) || "surveyRenderer.DISCOVERY_GATE_EMPTY",
+                    featureLabelProperty: gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.featureLabelProperty,
+                    loadingMessageKey: (gatingConfig === null || gatingConfig === void 0 ? void 0 : gatingConfig.loadingMessageKey) || "surveyRenderer.MAP_LOADING",
+                }, value: gateValues })) : null, !hasGateStep || gateValues.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Stack, { spacing: 1.5, children: [_jsxs(Stack, { alignItems: { xs: "flex-start", sm: "center" }, direction: { xs: "column", sm: "row" }, justifyContent: "space-between", spacing: 1, children: [_jsx(Box, {}), _jsx(Typography, { color: "text.secondary", variant: "body2", children: t("surveyRenderer.DISCOVERY_HELP") })] }), maxReached ? (_jsx(Alert, { severity: "info", children: t("surveyRenderer.DISCOVERY_MAX_REACHED", { max: strategy.maxSelections }) })) : currentItem ? (_jsxs(Box, { sx: { position: "relative" }, children: [previewItems[1] ? (_jsx(Box, { sx: { left: 0, px: { xs: 1.25, sm: 3 }, position: "absolute", right: 0, top: 22, zIndex: 0 }, children: _jsx(Paper, { elevation: 0, sx: { backgroundColor: "rgba(255, 243, 249, 0.6)", borderRadius: 4, height: 22 } }) })) : null, previewItems[0] ? (_jsx(Box, { sx: { left: 0, px: { xs: 0.75, sm: 1.5 }, position: "absolute", right: 0, top: 12, zIndex: 0 }, children: _jsx(Paper, { elevation: 0, sx: { backgroundColor: "rgba(255, 243, 249, 0.78)", borderRadius: 4, height: 24 } }) })) : null, _jsx(Box, { sx: { position: "relative", zIndex: 1 }, children: _jsx(DiscoveryCard, { active: true, item: currentItem, onKeep: handleKeep, onSkip: handleSkip }) })] })) : (_jsx(Alert, { severity: hasRemainingDiscoverable ? "info" : "success", children: hasRemainingDiscoverable ? t("surveyRenderer.DISCOVERY_REFRESH") : t("surveyRenderer.DISCOVERY_DONE") })), _jsxs(Stack, { direction: "row", spacing: 1.25, sx: {
+                                    display: { xs: "none", sm: "flex" },
+                                }, children: [_jsx(Button, { disabled: !currentItem || maxReached, onClick: () => currentItem && handleSkip(currentItem.value), startIcon: _jsx(CloseRoundedIcon, {}), sx: {
+                                            backgroundColor: "#f5bfd8",
+                                            color: "#7a2455",
+                                            flex: 1,
+                                            minHeight: 52,
+                                            "&:hover": {
+                                                backgroundColor: "#eeabc9",
+                                            },
+                                        }, variant: "contained", children: t("surveyRenderer.DISCOVERY_SKIP") }), _jsx(Button, { disabled: !currentItem || maxReached, onClick: () => currentItem && handleKeep(currentItem.value), startIcon: _jsx(CheckRoundedIcon, {}), sx: { flex: 1, minHeight: 52 }, variant: "contained", children: t("surveyRenderer.DISCOVERY_SAVE") })] })] }), _jsx(Autocomplete, { fullWidth: true, getOptionLabel: (option) => option.label || "", isOptionEqualToValue: (option, candidate) => option.value === candidate.value, multiple: true, onChange: handleManualSelection, options: filteredOptions, renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => {
+                            const _a = getTagProps({ index }), { key } = _a, tagProps = __rest(_a, ["key"]);
+                            return (_createElement(Chip, Object.assign({}, tagProps, { key: key, label: option.label, sx: {
+                                    backgroundColor: "#ffffff",
+                                    border: "1px solid rgba(15, 23, 42, 0.10)",
+                                    borderRadius: 999,
+                                    fontSize: 14,
+                                    fontWeight: 600,
+                                    height: 34,
+                                    px: 0.5,
+                                    ".MuiChip-deleteIcon": {
+                                        color: "rgba(15, 23, 42, 0.52)",
+                                        fontSize: 18,
+                                        "&:hover": {
+                                            color: "#111111",
+                                        },
+                                    },
+                                } })));
+                        }), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { placeholder: t("surveyRenderer.DISCOVERY_AUTOCOMPLETE_PLACEHOLDER"), sx: {
+                                ".MuiAutocomplete-tag": {
+                                    margin: "4px 6px 4px 0",
+                                },
+                                ".MuiOutlinedInput-root": {
+                                    backgroundColor: "rgba(255, 243, 249, 0.96)",
+                                    borderRadius: 3,
+                                    paddingBottom: "8px !important",
+                                    paddingTop: "8px !important",
+                                },
+                            } }))), value: selectedItems })] })) : (_jsx(Alert, { severity: "info", children: t("surveyRenderer.DISCOVERY_GATE_REQUIRED") }))] }));
+};
+export default SurveyDiscoverySelect;

package/dist/SurveyFilteredPlaceSelect.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
+import { Alert, Box, InputAdornment, Stack, TextField, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { getDiscoveryDataset } from "./discoveryDatasets";
+import { buildDiscoveryItems, filterDiscoveryItemsByGate, serializeDiscoveryValue } from "./discoveryEngine";
+import SurveyQuestionHeader from "./SurveyQuestionHeader";
+function FilteredChoiceList({ maxSelections, onChange, options, selectedValues }) {
+    const selectedValueKeys = new Set((selectedValues || []).map(serializeDiscoveryValue));
+    return (_jsx(Stack, { spacing: 1.1, children: options.map((option) => {
+            const isSelected = selectedValueKeys.has(serializeDiscoveryValue(option.value));
+            return (_jsx(Box, { onClick: () => {
+                    if (isSelected) {
+                        onChange(selectedValues.filter((entry) => serializeDiscoveryValue(entry) !== serializeDiscoveryValue(option.value)));
+                        return;
+                    }
+                    if ((selectedValues || []).length >= maxSelections) {
+                        return;
+                    }
+                    onChange([...(selectedValues || []), option.value]);
+                }, sx: {
+                    backgroundColor: "rgba(255, 243, 249, 0.96)",
+                    border: "1px solid",
+                    borderColor: isSelected ? "primary.main" : "divider",
+                    borderRadius: 2,
+                    cursor: "pointer",
+                    p: 1.35,
+                    transition: "border-color 150ms ease, background-color 150ms ease",
+                    bgcolor: isSelected ? "rgba(13, 174, 209, 0.16)" : "rgba(255, 243, 249, 0.96)",
+                }, children: _jsxs(Stack, { spacing: 0.25, children: [_jsx(Typography, { children: option.label }), option.hint ? (_jsx(Typography, { color: "text.secondary", sx: { whiteSpace: "pre-line" }, variant: "body2", children: option.hint })) : null] }) }, option.value));
+        }) }));
+}
+const SurveyFilteredPlaceSelect = ({ allOptionsByName, answers, errorText, hint, label, onChange, options, uiConfig, value, }) => {
+    const { t } = useTranslation();
+    const dataset = React.useMemo(() => getDiscoveryDataset(uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.datasetKey), [uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.datasetKey]);
+    const sourceQuestionName = (uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.sourceQuestionName) || "";
+    const filterKey = (uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.filterKey) || "quarters";
+    const maxSelections = Math.max(1, (uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.maxSelections) || 5);
+    const sourceOptions = (allOptionsByName === null || allOptionsByName === void 0 ? void 0 : allOptionsByName[sourceQuestionName]) || [];
+    const sourceValues = Array.isArray(answers === null || answers === void 0 ? void 0 : answers[sourceQuestionName]) ? answers[sourceQuestionName] : [];
+    const selectedSourceValueKeys = React.useMemo(() => new Set(sourceValues.map(serializeDiscoveryValue)), [sourceValues]);
+    const selectedSourceLabels = React.useMemo(() => sourceOptions
+        .filter((option) => selectedSourceValueKeys.has(serializeDiscoveryValue(option.value)))
+        .map((option) => option.label || ""), [selectedSourceValueKeys, sourceOptions]);
+    const items = React.useMemo(() => buildDiscoveryItems(options, dataset), [dataset, options]);
+    const filteredItems = React.useMemo(() => filterDiscoveryItemsByGate(items, selectedSourceLabels, { filterKey }), [filterKey, items, selectedSourceLabels]);
+    const filteredOptionValueKeys = React.useMemo(() => new Set(filteredItems.map((item) => item.valueKey)), [filteredItems]);
+    const filteredOptions = React.useMemo(() => options.filter((option) => filteredOptionValueKeys.has(serializeDiscoveryValue(option.value))), [filteredOptionValueKeys, options]);
+    const [searchValue, setSearchValue] = React.useState("");
+    const selectedValues = Array.isArray(value) ? value : [];
+    const visibleOptions = React.useMemo(() => {
+        const normalizedSearch = searchValue.trim().toLowerCase();
+        if (!normalizedSearch) {
+            return filteredOptions;
+        }
+        return filteredOptions.filter((option) => (option.label || "").toLowerCase().includes(normalizedSearch));
+    }, [filteredOptions, searchValue]);
+    React.useEffect(() => {
+        const allowedValues = new Set(filteredOptions.map((option) => serializeDiscoveryValue(option.value)));
+        const nextSelectedValues = selectedValues.filter((entry) => allowedValues.has(serializeDiscoveryValue(entry)));
+        if (nextSelectedValues.length !== selectedValues.length) {
+            onChange(nextSelectedValues);
+        }
+    }, [filteredOptions, onChange, selectedValues]);
+    return (_jsxs(Stack, { spacing: 1.5, children: [_jsx(SurveyQuestionHeader, { errorText: errorText, hint: hint, label: label }), selectedSourceLabels.length === 0 ? (_jsx(Alert, { severity: "info", children: t("surveyRenderer.FILTERED_SELECT_REQUIRED") })) : null, selectedSourceLabels.length > 0 ? (_jsxs(_Fragment, { children: [selectedValues.length >= maxSelections ? (_jsx(Alert, { severity: "info", children: t("surveyRenderer.FILTERED_SELECT_MAX_REACHED", { max: maxSelections }) })) : null, !(uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.hideSearch) && (_jsx(TextField, { fullWidth: true, onChange: (event) => setSearchValue(event.target.value), placeholder: t("surveyRenderer.FILTERED_SELECT_SEARCH_PLACEHOLDER"), sx: {
+                            ".MuiOutlinedInput-root": {
+                                backgroundColor: "rgba(255, 243, 249, 0.96)",
+                            },
+                        }, value: searchValue, InputProps: {
+                            startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchRoundedIcon, { fontSize: "small" }) })),
+                        } })), visibleOptions.length > 0 ? (_jsx(FilteredChoiceList, { maxSelections: maxSelections, onChange: onChange, options: visibleOptions, selectedValues: selectedValues })) : (_jsx(Alert, { severity: "info", children: t("surveyRenderer.FILTERED_SELECT_EMPTY") }))] })) : null] }));
+};
+export default SurveyFilteredPlaceSelect;