@magicfeedback/popup-sdk 1.9.0 → 1.11.0

package/README.md

@@ -215,6 +215,26 @@ const renderer = new ReactNativePopupRenderer({
 `onReady` is optional: a host that opens its container on `onShow` still never shows the spinner,
 because the HTML reveals itself; the container just appears a few hundred ms before the card.
 
+### Focus on text questions
+
+When the first question of a page is a text field (text, long text, email or number), the cursor
+is placed in it so the user can start typing:
+
+- **When the popup opens:** only on devices with a mouse or trackpad (`pointer: fine`). On touch
+  devices it does nothing, so the keyboard never pops up over a popup the user has not touched.
+- **After Start, Next or Back:** on every device, since the user has just tapped.
+
+Only the first question counts: if the page starts with a rating and the text field comes after
+it, nothing is focused. The focus is never taken away from a field of the host page.
+
+The focus itself comes from `@magicfeedback/native` (its `autofocus` option, which the popup sets
+to `'navigation'`, and `focusFirstQuestion()` when the popup is revealed). Versions of
+`@magicfeedback/native` without that option simply ignore it.
+
+In React Native on iOS, the WebView ignores focus set from JavaScript unless the keyboard is
+allowed to open without a direct tap. `DeepdotsProvider` already does this; if you mount the
+WebView yourself, add `keyboardDisplayRequiresUserAction={false}` to it.
+
 ### `autoLaunch()`
 
 Starts the triggers derived from the popup definitions loaded during `init()`.
@@ -237,6 +257,8 @@ Example:
 popups.triggerEvent('search');
 ```
 
+It can be called right after `init()`: if the popup definitions are still loading, the event is kept and evaluated as soon as they arrive (the same applies to `triggerSurvey`).
+
 ### `triggerSurvey(surveyId, popupId?)`
 
 Opens a specific survey directly, bypassing trigger evaluation.
@@ -500,7 +522,7 @@ interface DeepdotsEvent {
 - `action`
 - `userId`
 
-`popup_clicked` is a general interaction event. Depending on the flow, `data.action` can contain values such as `loaded`, `start_survey`, `manual_send`, `back`, `complete`, or `close_icon`.
+`popup_clicked` means the user did something in the popup. On the web, `data.action` is one of `start_survey`, `manual_send`, `back`, `complete`, `close_icon`, or `partial` (the user answered a page and moved on; this one also marks the popup as `PARTIAL` in the backend). Loading the survey, the start of a submit, and validation or submit errors are not interactions and do not emit it. In React Native the bridge emits it once per popup, with `action: 'partial'`, on the first real interaction (sending an answer or going back).
 
 ## Important Behavior Notes
 

package/dist/assets/assets/style.css

@@ -1,7 +1,7 @@
 /**
  * NO EDITAR A MANO — generado por scripts/vendor-survey-css.mjs
  *
- * Copia de @magicfeedback/native@2.2.22 → dist/styles/magicfeedback-default.css
+ * Copia de @magicfeedback/native@2.2.31 → dist/styles/magicfeedback-default.css
  * (la hoja canónica del paquete, la que apunta su campo "style"), con estos cambios locales:
  *
  *  1. Sin el @import de Google Fonts (Nunito): no queremos una petición externa desde la
@@ -985,6 +985,9 @@ div.magicfeedback-radio {
     width: 100%;
     overflow-x: auto;
     border-radius: var(--mf-radius-md);
+    /* the layout follows the space the survey gets (a pop-in, a sidebar),
+       not the size of the window */
+    container-type: inline-size;
 }
 
 .magicfeedback-multi-question-matrix-table {
@@ -1036,6 +1039,296 @@ div.magicfeedback-radio {
     accent-color: var(--mf-primary);
 }
 
+.magicfeedback-multi-question-matrix-question {
+    min-width: 200px;
+    padding: 10px;
+}
+
+/* the column header names the option in a table; the per-cell label is for
+   screen readers until the rows stack */
+.magicfeedback-multi-question-matrix-option-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
+
+/* narrow container: every row becomes its own question with the options
+   stacked underneath, instead of a table cut off at the side */
+@container (max-width: 599px) {
+    .magicfeedback-multi-question-matrix-table,
+    .magicfeedback-multi-question-matrix-table tbody,
+    .magicfeedback-multi-question-matrix-table tr,
+    .magicfeedback-multi-question-matrix-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .magicfeedback-multi-question-matrix-table thead {
+        display: none;
+    }
+
+    .magicfeedback-multi-question-matrix-row-tr,
+    .magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
+        margin-bottom: var(--mf-space-lg);
+        background: transparent;
+        box-shadow: none;
+    }
+
+    @media (hover: hover) {
+        .magicfeedback-multi-question-matrix-row-tr:hover {
+            margin-bottom: var(--mf-space-lg);
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+
+    .magicfeedback-multi-question-matrix-table td.magicfeedback-multi-question-matrix-question {
+        min-width: 0;
+        padding: 0 0 var(--mf-space-sm);
+        text-align: start;
+    }
+
+    .magicfeedback-multi-question-matrix-question .magicfeedback-multi-question-matrix-label {
+        font-weight: 600;
+    }
+
+    .magicfeedback-multi-question-matrix-table td.magicfeedback-multi-question-matrix-option {
+        display: flex;
+        align-items: center;
+        gap: var(--mf-space-sm);
+        margin-bottom: var(--mf-space-sm);
+        padding: 0 var(--mf-space-md);
+        text-align: start;
+        background: var(--mf-bg-secondary);
+        border: 2px solid var(--mf-border);
+        border-radius: var(--mf-radius-md);
+        cursor: pointer;
+        transition: var(--mf-transition-fast);
+    }
+
+    @media (hover: hover) {
+        .magicfeedback-multi-question-matrix-option:hover {
+            border-color: var(--mf-primary-border);
+        }
+    }
+
+    .magicfeedback-multi-question-matrix-option:has(input:checked) {
+        border-color: var(--mf-primary);
+        background: var(--mf-primary-light);
+    }
+
+    .magicfeedback-multi-question-matrix-table .magicfeedback-multi-question-matrix-option input[type="radio"] {
+        flex-shrink: 0;
+    }
+
+    /* the whole card is the click target */
+    .magicfeedback-multi-question-matrix-option-label {
+        position: static;
+        flex: 1;
+        width: auto;
+        height: auto;
+        padding: var(--mf-space-md) 0;
+        overflow: visible;
+        clip: auto;
+        white-space: normal;
+        font-size: var(--mf-font-size-base);
+        color: var(--mf-text-primary);
+        cursor: pointer;
+    }
+}
+
+/* ========================================
+   MAXDIFF (BEST–WORST)
+   ======================================== */
+.magicfeedback-max-diff {
+    /* "least" gets its own hue, apart from the brand color "most" uses; dark
+       enough to read as header text and to hold the white center dot */
+    --mf-max-diff-worst: #b45309;
+    width: 100%;
+}
+
+.magicfeedback-max-diff-container {
+    width: 100%;
+    /* the layout follows the space the survey gets (a pop-in, a sidebar),
+       not the size of the window */
+    container-type: inline-size;
+}
+
+.magicfeedback-max-diff-progress {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-md);
+    margin-bottom: var(--mf-space-lg);
+}
+
+.magicfeedback-max-diff-progress-label {
+    font-size: 0.8125rem;
+    font-weight: var(--mf-font-weight-bold);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: var(--mf-text-secondary);
+}
+
+.magicfeedback-max-diff-progress-track {
+    flex: 1;
+    height: 6px;
+    overflow: hidden;
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-border);
+}
+
+.magicfeedback-max-diff-progress-fill {
+    display: block;
+    height: 100%;
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-primary);
+}
+
+.magicfeedback-max-diff-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.magicfeedback-max-diff-head,
+.magicfeedback-max-diff-head-spacer {
+    border-bottom: 1px solid var(--mf-border);
+}
+
+.magicfeedback-max-diff-head {
+    width: 11rem;
+    padding: 0 var(--mf-space-sm) var(--mf-space-sm);
+    font-size: 0.8125rem;
+    font-weight: var(--mf-font-weight-extrabold);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    text-align: center;
+    vertical-align: bottom;
+}
+
+.magicfeedback-max-diff-head-best {
+    color: var(--mf-primary);
+}
+
+.magicfeedback-max-diff-head-worst {
+    color: var(--mf-max-diff-worst);
+}
+
+.magicfeedback-max-diff-head-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.magicfeedback-max-diff-row {
+    transition: background-color 0.15s ease;
+}
+
+.magicfeedback-max-diff-row > * {
+    border-bottom: 1px solid var(--mf-border);
+}
+
+.magicfeedback-max-diff-row:has(.magicfeedback-max-diff-best:checked) {
+    background-color: color-mix(in srgb, var(--mf-primary) 8%, transparent);
+}
+
+.magicfeedback-max-diff-row:has(.magicfeedback-max-diff-worst:checked) {
+    background-color: color-mix(in srgb, var(--mf-max-diff-worst) 8%, transparent);
+}
+
+.magicfeedback-max-diff-item {
+    padding: var(--mf-space-md) var(--mf-space-sm);
+    font-size: 1.0625rem;
+    font-weight: var(--mf-font-weight-semibold);
+    line-height: 1.4;
+    text-align: center;
+    color: var(--mf-text-primary);
+}
+
+.magicfeedback-max-diff-row:has(input:checked) .magicfeedback-max-diff-item {
+    font-weight: var(--mf-font-weight-extrabold);
+}
+
+.magicfeedback-max-diff-cell {
+    padding: 0;
+}
+
+/* the whole cell is the click target */
+.magicfeedback-max-diff-pick {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 64px;
+    cursor: pointer;
+}
+
+.magicfeedback-max-diff-input {
+    appearance: none;
+    -webkit-appearance: none;
+    flex-shrink: 0;
+    width: 26px;
+    height: 26px;
+    margin: 0;
+    border: 2px solid color-mix(in srgb, var(--mf-text-secondary) 80%, white);
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-bg-secondary);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+@media (hover: hover) {
+    .magicfeedback-max-diff-pick:hover .magicfeedback-max-diff-input {
+        transform: scale(1.08);
+    }
+}
+
+.magicfeedback-max-diff-best:checked {
+    border-color: var(--mf-primary);
+    background: radial-gradient(circle, #FFFFFF 0 4px, var(--mf-primary) 4.5px);
+}
+
+.magicfeedback-max-diff-worst:checked {
+    border-color: var(--mf-max-diff-worst);
+    background: radial-gradient(circle, #FFFFFF 0 4px, var(--mf-max-diff-worst) 4.5px);
+}
+
+.magicfeedback-max-diff-input:focus-visible {
+    outline: 3px solid var(--mf-primary-border);
+    outline-offset: 3px;
+}
+
+/* narrow container: same table, slimmer pick columns and the header icon
+   stacked over its label */
+@container (max-width: 599px) {
+    .magicfeedback-max-diff-head {
+        width: 4.75rem;
+        padding-inline: 2px;
+        font-size: 0.6875rem;
+    }
+
+    .magicfeedback-max-diff-head-label {
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .magicfeedback-max-diff-item {
+        padding-inline: 4px;
+        font-size: var(--mf-font-size-base);
+    }
+
+    .magicfeedback-max-diff-pick {
+        min-height: 68px;
+    }
+
+    .magicfeedback-max-diff-input {
+        width: 28px;
+        height: 28px;
+    }
+}
+
 /* ========================================
    PRIORITY LIST
    ======================================== */
@@ -1226,6 +1519,15 @@ div.magicfeedback-radio {
     }
 }
 
+/* hidden on the first page; keep the submit button on the right */
+.magicfeedback-back[hidden] {
+    display: none;
+}
+
+.magicfeedback-action-container .magicfeedback-submit {
+    margin-left: auto;
+}
+
 /* ========================================
    SKIP & COUNTER
    ======================================== */

package/dist/{chunk-MTV7T4OW.mjs → chunk-GXEPYT33.mjs}

@@ -524,7 +524,7 @@ function ddSetSurveyBusy(el, busy){
 var style_default = `/**
  * NO EDITAR A MANO \u2014 generado por scripts/vendor-survey-css.mjs
  *
- * Copia de @magicfeedback/native@2.2.22 \u2192 dist/styles/magicfeedback-default.css
+ * Copia de @magicfeedback/native@2.2.31 \u2192 dist/styles/magicfeedback-default.css
  * (la hoja can\xF3nica del paquete, la que apunta su campo "style"), con estos cambios locales:
  *
  *  1. Sin el @import de Google Fonts (Nunito): no queremos una petici\xF3n externa desde la
@@ -1508,6 +1508,9 @@ div.magicfeedback-radio {
     width: 100%;
     overflow-x: auto;
     border-radius: var(--mf-radius-md);
+    /* the layout follows the space the survey gets (a pop-in, a sidebar),
+       not the size of the window */
+    container-type: inline-size;
 }
 
 .magicfeedback-multi-question-matrix-table {
@@ -1559,6 +1562,296 @@ div.magicfeedback-radio {
     accent-color: var(--mf-primary);
 }
 
+.magicfeedback-multi-question-matrix-question {
+    min-width: 200px;
+    padding: 10px;
+}
+
+/* the column header names the option in a table; the per-cell label is for
+   screen readers until the rows stack */
+.magicfeedback-multi-question-matrix-option-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
+
+/* narrow container: every row becomes its own question with the options
+   stacked underneath, instead of a table cut off at the side */
+@container (max-width: 599px) {
+    .magicfeedback-multi-question-matrix-table,
+    .magicfeedback-multi-question-matrix-table tbody,
+    .magicfeedback-multi-question-matrix-table tr,
+    .magicfeedback-multi-question-matrix-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .magicfeedback-multi-question-matrix-table thead {
+        display: none;
+    }
+
+    .magicfeedback-multi-question-matrix-row-tr,
+    .magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
+        margin-bottom: var(--mf-space-lg);
+        background: transparent;
+        box-shadow: none;
+    }
+
+    @media (hover: hover) {
+        .magicfeedback-multi-question-matrix-row-tr:hover {
+            margin-bottom: var(--mf-space-lg);
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+
+    .magicfeedback-multi-question-matrix-table td.magicfeedback-multi-question-matrix-question {
+        min-width: 0;
+        padding: 0 0 var(--mf-space-sm);
+        text-align: start;
+    }
+
+    .magicfeedback-multi-question-matrix-question .magicfeedback-multi-question-matrix-label {
+        font-weight: 600;
+    }
+
+    .magicfeedback-multi-question-matrix-table td.magicfeedback-multi-question-matrix-option {
+        display: flex;
+        align-items: center;
+        gap: var(--mf-space-sm);
+        margin-bottom: var(--mf-space-sm);
+        padding: 0 var(--mf-space-md);
+        text-align: start;
+        background: var(--mf-bg-secondary);
+        border: 2px solid var(--mf-border);
+        border-radius: var(--mf-radius-md);
+        cursor: pointer;
+        transition: var(--mf-transition-fast);
+    }
+
+    @media (hover: hover) {
+        .magicfeedback-multi-question-matrix-option:hover {
+            border-color: var(--mf-primary-border);
+        }
+    }
+
+    .magicfeedback-multi-question-matrix-option:has(input:checked) {
+        border-color: var(--mf-primary);
+        background: var(--mf-primary-light);
+    }
+
+    .magicfeedback-multi-question-matrix-table .magicfeedback-multi-question-matrix-option input[type="radio"] {
+        flex-shrink: 0;
+    }
+
+    /* the whole card is the click target */
+    .magicfeedback-multi-question-matrix-option-label {
+        position: static;
+        flex: 1;
+        width: auto;
+        height: auto;
+        padding: var(--mf-space-md) 0;
+        overflow: visible;
+        clip: auto;
+        white-space: normal;
+        font-size: var(--mf-font-size-base);
+        color: var(--mf-text-primary);
+        cursor: pointer;
+    }
+}
+
+/* ========================================
+   MAXDIFF (BEST\u2013WORST)
+   ======================================== */
+.magicfeedback-max-diff {
+    /* "least" gets its own hue, apart from the brand color "most" uses; dark
+       enough to read as header text and to hold the white center dot */
+    --mf-max-diff-worst: #b45309;
+    width: 100%;
+}
+
+.magicfeedback-max-diff-container {
+    width: 100%;
+    /* the layout follows the space the survey gets (a pop-in, a sidebar),
+       not the size of the window */
+    container-type: inline-size;
+}
+
+.magicfeedback-max-diff-progress {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-md);
+    margin-bottom: var(--mf-space-lg);
+}
+
+.magicfeedback-max-diff-progress-label {
+    font-size: 0.8125rem;
+    font-weight: var(--mf-font-weight-bold);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: var(--mf-text-secondary);
+}
+
+.magicfeedback-max-diff-progress-track {
+    flex: 1;
+    height: 6px;
+    overflow: hidden;
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-border);
+}
+
+.magicfeedback-max-diff-progress-fill {
+    display: block;
+    height: 100%;
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-primary);
+}
+
+.magicfeedback-max-diff-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.magicfeedback-max-diff-head,
+.magicfeedback-max-diff-head-spacer {
+    border-bottom: 1px solid var(--mf-border);
+}
+
+.magicfeedback-max-diff-head {
+    width: 11rem;
+    padding: 0 var(--mf-space-sm) var(--mf-space-sm);
+    font-size: 0.8125rem;
+    font-weight: var(--mf-font-weight-extrabold);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    text-align: center;
+    vertical-align: bottom;
+}
+
+.magicfeedback-max-diff-head-best {
+    color: var(--mf-primary);
+}
+
+.magicfeedback-max-diff-head-worst {
+    color: var(--mf-max-diff-worst);
+}
+
+.magicfeedback-max-diff-head-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.magicfeedback-max-diff-row {
+    transition: background-color 0.15s ease;
+}
+
+.magicfeedback-max-diff-row > * {
+    border-bottom: 1px solid var(--mf-border);
+}
+
+.magicfeedback-max-diff-row:has(.magicfeedback-max-diff-best:checked) {
+    background-color: color-mix(in srgb, var(--mf-primary) 8%, transparent);
+}
+
+.magicfeedback-max-diff-row:has(.magicfeedback-max-diff-worst:checked) {
+    background-color: color-mix(in srgb, var(--mf-max-diff-worst) 8%, transparent);
+}
+
+.magicfeedback-max-diff-item {
+    padding: var(--mf-space-md) var(--mf-space-sm);
+    font-size: 1.0625rem;
+    font-weight: var(--mf-font-weight-semibold);
+    line-height: 1.4;
+    text-align: center;
+    color: var(--mf-text-primary);
+}
+
+.magicfeedback-max-diff-row:has(input:checked) .magicfeedback-max-diff-item {
+    font-weight: var(--mf-font-weight-extrabold);
+}
+
+.magicfeedback-max-diff-cell {
+    padding: 0;
+}
+
+/* the whole cell is the click target */
+.magicfeedback-max-diff-pick {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 64px;
+    cursor: pointer;
+}
+
+.magicfeedback-max-diff-input {
+    appearance: none;
+    -webkit-appearance: none;
+    flex-shrink: 0;
+    width: 26px;
+    height: 26px;
+    margin: 0;
+    border: 2px solid color-mix(in srgb, var(--mf-text-secondary) 80%, white);
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-bg-secondary);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+@media (hover: hover) {
+    .magicfeedback-max-diff-pick:hover .magicfeedback-max-diff-input {
+        transform: scale(1.08);
+    }
+}
+
+.magicfeedback-max-diff-best:checked {
+    border-color: var(--mf-primary);
+    background: radial-gradient(circle, #FFFFFF 0 4px, var(--mf-primary) 4.5px);
+}
+
+.magicfeedback-max-diff-worst:checked {
+    border-color: var(--mf-max-diff-worst);
+    background: radial-gradient(circle, #FFFFFF 0 4px, var(--mf-max-diff-worst) 4.5px);
+}
+
+.magicfeedback-max-diff-input:focus-visible {
+    outline: 3px solid var(--mf-primary-border);
+    outline-offset: 3px;
+}
+
+/* narrow container: same table, slimmer pick columns and the header icon
+   stacked over its label */
+@container (max-width: 599px) {
+    .magicfeedback-max-diff-head {
+        width: 4.75rem;
+        padding-inline: 2px;
+        font-size: 0.6875rem;
+    }
+
+    .magicfeedback-max-diff-head-label {
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .magicfeedback-max-diff-item {
+        padding-inline: 4px;
+        font-size: var(--mf-font-size-base);
+    }
+
+    .magicfeedback-max-diff-pick {
+        min-height: 68px;
+    }
+
+    .magicfeedback-max-diff-input {
+        width: 28px;
+        height: 28px;
+    }
+}
+
 /* ========================================
    PRIORITY LIST
    ======================================== */
@@ -1749,6 +2042,15 @@ div.magicfeedback-radio {
     }
 }
 
+/* hidden on the first page; keep the submit button on the right */
+.magicfeedback-back[hidden] {
+    display: none;
+}
+
+.magicfeedback-action-container .magicfeedback-submit {
+    margin-left: auto;
+}
+
 /* ========================================
    SKIP & COUNTER
    ======================================== */
@@ -2439,4 +2741,4 @@ export {
   sdkWarn,
   sdkError
 };
-//# sourceMappingURL=chunk-MTV7T4OW.mjs.map
+//# sourceMappingURL=chunk-GXEPYT33.mjs.map