pcm-shared-components 2.1.390 → 2.1.392

package/dist/components/Reservation/AnimalVehicleDetailsEditor/index.js

@@ -54,6 +54,22 @@ const REQUIRED_ERROR_KEY_BY_TYPE = {
   yes_no: 'animal.required_error_yes_no'
 };
 
+// A native <input type="date"> only opens its calendar popup on its own when the browser's tiny
+// built-in icon is clicked -- clicking anywhere else in the field just places the text caret
+// (still lets someone type the year/month/day directly, which showPicker() doesn't change). Most
+// people expect clicking anywhere in the box to open the calendar. showPicker() is Chrome/Edge/
+// Firefox only as of this writing (not Safari) and throws if called on a disabled/read-only input
+// or outside a user gesture, so this fails silently rather than breaking the click -- on an
+// unsupported browser, the field just falls back to manual typing and the browser's own
+// icon-click affordance, exactly as before.
+const openNativeDatePicker = e => {
+  try {
+    e.target.showPicker?.();
+  } catch {
+    // ignore -- unsupported browser or transient DOM state, typing/icon-click still work
+  }
+};
+
 /**
  * Tab-per-item editor for a lot's animal or vehicle detail fields: one tab per item (green
  * check when every required field is answered, amber warning triangle otherwise), an "Add"
@@ -285,234 +301,241 @@ export const AnimalVehicleDetailsEditor = props => {
     onClick: () => requestRemove(selectedItem)
   }, /*#__PURE__*/React.createElement(DeleteOutlineIcon, {
     fontSize: "small"
-  }))), /*#__PURE__*/React.createElement("div", {
-    ref: fieldsContainerRef,
-    className: "grid grid-cols-2",
-    style: {
-      columnGap: 12,
-      rowGap: 16,
-      gridAutoFlow: 'row dense'
-    }
-  }, fieldConfig.map(field => {
-    const rawValue = selectedItem.values?.[field.key] ?? '';
-    const revealKey = `${selectedItem.id}_${field.key}`;
-    const wasDrifted = isFieldDrifted(field, rawValue);
-    const showAsDrifted = wasDrifted && !revealedDriftKeys.has(revealKey);
-    // Once a drifted field is revealed, the live control gets an EMPTY value, never
-    // the mismatched raw one -- a drifted answer is never editable-in-place, only
-    // replaceable. Not drifted (or already revealed): behaves exactly as before.
-    const value = showAsDrifted ? rawValue : wasDrifted ? field.type === 'select_multiple' ? [] : '' : rawValue;
-    const showError = field.required && !isFieldAnswered(field.type, value);
-    // No "(Optional)" suffix -- required fields already say so via the asterisk, so
-    // spelling out the alternative on every other field was redundant noise, and the
-    // extra length was long enough to wrap onto a second line in a narrow column,
-    // throwing that field's input out of vertical alignment with its paired neighbor.
-    const labelText = field.required ? `${field.label} *` : field.label;
-    const wrapperClassName = ['select', 'textarea', 'select_multiple'].includes(field.type) ? 'col-span-full' : undefined;
-    let control;
-    if (showAsDrifted) {
-      // Generic stringify -- this renders whatever type the field used to be, which
-      // may no longer match field.type at all, so it can't reuse any type-specific
-      // control (a boolean/array/string all need to display as plain read text here).
-      const displayText = typeof rawValue === 'boolean' ? rawValue ? i18next.t('common.app.yes') : i18next.t('common.app.no') : Array.isArray(rawValue) ? rawValue.join(', ') : String(rawValue);
-      control = /*#__PURE__*/React.createElement("div", {
-        className: "flex flex-col",
-        style: {
-          gap: 4
-        }
-      }, /*#__PURE__*/React.createElement(Paper, {
-        variant: "outlined",
-        className: "flex items-center",
-        sx: {
-          gap: 6,
-          px: 1.5,
-          py: 1,
-          bgcolor: 'action.hover'
-        }
-      }, /*#__PURE__*/React.createElement(WarningAmberIcon, {
-        fontSize: "small",
-        color: "warning"
-      }), /*#__PURE__*/React.createElement(Typography, {
+  }))), (() => {
+    const pairableFields = fieldConfig.filter(f => !['select', 'textarea', 'select_multiple'].includes(f.type));
+    const orphanField = pairableFields.length % 2 === 1 ? pairableFields[pairableFields.length - 1] : null;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: fieldsContainerRef,
+      className: "grid grid-cols-2",
+      style: {
+        columnGap: 12,
+        rowGap: 16,
+        gridAutoFlow: 'row dense'
+      }
+    }, fieldConfig.map(field => {
+      const rawValue = selectedItem.values?.[field.key] ?? '';
+      const revealKey = `${selectedItem.id}_${field.key}`;
+      const wasDrifted = isFieldDrifted(field, rawValue);
+      const showAsDrifted = wasDrifted && !revealedDriftKeys.has(revealKey);
+      // Once a drifted field is revealed, the live control gets an EMPTY value, never
+      // the mismatched raw one -- a drifted answer is never editable-in-place, only
+      // replaceable. Not drifted (or already revealed): behaves exactly as before.
+      const value = showAsDrifted ? rawValue : wasDrifted ? field.type === 'select_multiple' ? [] : '' : rawValue;
+      const showError = field.required && !isFieldAnswered(field.type, value);
+      // No "(Optional)" suffix -- required fields already say so via the asterisk, so
+      // spelling out the alternative on every other field was redundant noise, and the
+      // extra length was long enough to wrap onto a second line in a narrow column,
+      // throwing that field's input out of vertical alignment with its paired neighbor.
+      const labelText = field.required ? `${field.label} *` : field.label;
+      const wrapperClassName = ['select', 'textarea', 'select_multiple'].includes(field.type) || field === orphanField ? 'col-span-full' : undefined;
+      let control;
+      if (showAsDrifted) {
+        // Generic stringify -- this renders whatever type the field used to be, which
+        // may no longer match field.type at all, so it can't reuse any type-specific
+        // control (a boolean/array/string all need to display as plain read text here).
+        const displayText = typeof rawValue === 'boolean' ? rawValue ? i18next.t('common.app.yes') : i18next.t('common.app.no') : Array.isArray(rawValue) ? rawValue.join(', ') : String(rawValue);
+        control = /*#__PURE__*/React.createElement("div", {
+          className: "flex flex-col",
+          style: {
+            gap: 4
+          }
+        }, /*#__PURE__*/React.createElement(Paper, {
+          variant: "outlined",
+          className: "flex items-center",
+          sx: {
+            gap: 6,
+            px: 1.5,
+            py: 1,
+            bgcolor: 'action.hover'
+          }
+        }, /*#__PURE__*/React.createElement(WarningAmberIcon, {
+          fontSize: "small",
+          color: "warning"
+        }), /*#__PURE__*/React.createElement(Typography, {
+          variant: "body2",
+          sx: {
+            flex: 1,
+            wordBreak: 'break-word'
+          }
+        }, displayText)), /*#__PURE__*/React.createElement("div", {
+          className: "flex items-center",
+          style: {
+            gap: 4
+          }
+        }, /*#__PURE__*/React.createElement(Typography, {
+          variant: "caption",
+          color: "text.secondary"
+        }, i18next.t('animal.field_drifted_hint')), /*#__PURE__*/React.createElement(Button, {
+          size: "small",
+          onClick: () => revealDrift(revealKey),
+          sx: {
+            textTransform: 'none',
+            minWidth: 0,
+            p: 0
+          }
+        }, i18next.t('animal.field_drifted_replace'))));
+      } else if (field.type === 'number') {
+        control = /*#__PURE__*/React.createElement(TextField, {
+          name: field.key,
+          value: value,
+          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
+          onKeyDown: e => {
+            if (e.key === 'e' || e.key === 'E') e.preventDefault();
+          },
+          variant: "outlined",
+          size: "small",
+          error: showError,
+          helperText: showError ? requiredErrorText(field.type) : '',
+          inputProps: {
+            maxLength: field.maxLength || 45
+          },
+          type: "number",
+          placeholder: field.placeholder,
+          fullWidth: true,
+          InputProps: {
+            endAdornment: field.unit ? /*#__PURE__*/React.createElement(InputAdornment, {
+              position: "end"
+            }, field.unit) : undefined
+          }
+        });
+      } else if (field.type === 'select') {
+        control = /*#__PURE__*/React.createElement(TextField, {
+          select: true,
+          name: field.key,
+          value: value,
+          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
+          variant: "outlined",
+          size: "small",
+          error: showError,
+          helperText: showError ? requiredErrorText(field.type) : '',
+          fullWidth: true
+        }, /*#__PURE__*/React.createElement(MenuItem, {
+          value: ""
+        }, /*#__PURE__*/React.createElement("em", null, field.placeholder || i18next.t('common.app.select'))), (field.options || []).map(opt => /*#__PURE__*/React.createElement(MenuItem, {
+          key: opt,
+          value: opt
+        }, opt)));
+      } else if (field.type === 'textarea') {
+        control = /*#__PURE__*/React.createElement(TextField, {
+          name: field.key,
+          value: value,
+          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
+          variant: "outlined",
+          size: "small",
+          error: showError,
+          helperText: showError ? requiredErrorText(field.type) : '',
+          inputProps: {
+            maxLength: field.maxLength || 45
+          },
+          placeholder: field.placeholder,
+          multiline: true,
+          rows: 3,
+          fullWidth: true
+        });
+      } else if (field.type === 'select_multiple') {
+        const selectedValues = Array.isArray(value) ? value : [];
+        control = /*#__PURE__*/React.createElement(TextField, {
+          select: true,
+          name: field.key,
+          value: selectedValues,
+          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
+          variant: "outlined",
+          size: "small",
+          error: showError,
+          helperText: showError ? requiredErrorText(field.type) : '',
+          fullWidth: true,
+          SelectProps: {
+            multiple: true,
+            renderValue: selected => /*#__PURE__*/React.createElement("div", {
+              className: "flex flex-wrap gap-4"
+            }, selected.map(opt => /*#__PURE__*/React.createElement(Chip, {
+              key: opt,
+              label: opt,
+              size: "small"
+            })))
+          }
+        }, (field.options || []).map(opt => /*#__PURE__*/React.createElement(MenuItem, {
+          key: opt,
+          value: opt
+        }, /*#__PURE__*/React.createElement(Checkbox, {
+          checked: selectedValues.indexOf(opt) > -1
+        }), /*#__PURE__*/React.createElement(ListItemText, {
+          primary: opt
+        }))));
+      } else if (field.type === 'yes_no') {
+        const toggleValue = value === true ? 'yes' : value === false ? 'no' : null;
+        control = /*#__PURE__*/React.createElement(ToggleButtonGroup, {
+          value: toggleValue,
+          exclusive: true,
+          onChange: (_, val) => {
+            if (val !== null) onFieldChange(selectedItem.id, field.key, val === 'yes');
+          },
+          fullWidth: true,
+          size: "small",
+          color: showError ? 'error' : 'standard'
+        }, /*#__PURE__*/React.createElement(ToggleButton, {
+          value: "yes"
+        }, i18next.t('common.app.yes')), /*#__PURE__*/React.createElement(ToggleButton, {
+          value: "no"
+        }, i18next.t('common.app.no')));
+      } else if (field.type === 'date') {
+        // Native date input, not each host app's own local DateTimeField wrapper --
+        // this component can't depend on either app's app-local component tree.
+        // Value is a plain 'YYYY-MM-DD' string in and out, same convention both apps
+        // already use for this field type.
+        control = /*#__PURE__*/React.createElement(TextField, {
+          name: field.key,
+          type: "date",
+          value: value,
+          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
+          variant: "outlined",
+          size: "small",
+          error: showError,
+          helperText: showError ? requiredErrorText(field.type) : '',
+          fullWidth: true,
+          InputLabelProps: {
+            shrink: true
+          },
+          inputProps: {
+            onClick: openNativeDatePicker
+          }
+        });
+      } else {
+        // 'text' (default/unknown type too, for backward compat)
+        control = /*#__PURE__*/React.createElement(TextField, {
+          name: field.key,
+          value: value,
+          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
+          variant: "outlined",
+          size: "small",
+          error: showError,
+          helperText: showError ? requiredErrorText(field.type) : '',
+          inputProps: {
+            maxLength: field.maxLength || 45
+          },
+          type: "text",
+          placeholder: field.placeholder,
+          fullWidth: true
+        });
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: wrapperClassName,
+        key: revealKey,
+        "data-field-invalid": showError ? 'true' : undefined
+      }, /*#__PURE__*/React.createElement(Typography, {
         variant: "body2",
         sx: {
-          flex: 1,
-          wordBreak: 'break-word'
-        }
-      }, displayText)), /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center",
-        style: {
-          gap: 4
+          fontWeight: 500,
+          mb: 0.5,
+          color: showError ? 'error.main' : 'text.primary'
         }
-      }, /*#__PURE__*/React.createElement(Typography, {
+      }, labelText), control, field.type === 'yes_no' && !showAsDrifted && showError && /*#__PURE__*/React.createElement(Typography, {
         variant: "caption",
-        color: "text.secondary"
-      }, i18next.t('animal.field_drifted_hint')), /*#__PURE__*/React.createElement(Button, {
-        size: "small",
-        onClick: () => revealDrift(revealKey),
-        sx: {
-          textTransform: 'none',
-          minWidth: 0,
-          p: 0
-        }
-      }, i18next.t('animal.field_drifted_replace'))));
-    } else if (field.type === 'number') {
-      control = /*#__PURE__*/React.createElement(TextField, {
-        name: field.key,
-        value: value,
-        onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-        onKeyDown: e => {
-          if (e.key === 'e' || e.key === 'E') e.preventDefault();
-        },
-        variant: "outlined",
-        size: "small",
-        error: showError,
-        helperText: showError ? requiredErrorText(field.type) : '',
-        inputProps: {
-          maxLength: field.maxLength || 45
-        },
-        type: "number",
-        placeholder: field.placeholder,
-        fullWidth: true,
-        InputProps: {
-          endAdornment: field.unit ? /*#__PURE__*/React.createElement(InputAdornment, {
-            position: "end"
-          }, field.unit) : undefined
-        }
-      });
-    } else if (field.type === 'select') {
-      control = /*#__PURE__*/React.createElement(TextField, {
-        select: true,
-        name: field.key,
-        value: value,
-        onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-        variant: "outlined",
-        size: "small",
-        error: showError,
-        helperText: showError ? requiredErrorText(field.type) : '',
-        fullWidth: true
-      }, /*#__PURE__*/React.createElement(MenuItem, {
-        value: ""
-      }, /*#__PURE__*/React.createElement("em", null, field.placeholder || i18next.t('common.app.select'))), (field.options || []).map(opt => /*#__PURE__*/React.createElement(MenuItem, {
-        key: opt,
-        value: opt
-      }, opt)));
-    } else if (field.type === 'textarea') {
-      control = /*#__PURE__*/React.createElement(TextField, {
-        name: field.key,
-        value: value,
-        onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-        variant: "outlined",
-        size: "small",
-        error: showError,
-        helperText: showError ? requiredErrorText(field.type) : '',
-        inputProps: {
-          maxLength: field.maxLength || 45
-        },
-        placeholder: field.placeholder,
-        multiline: true,
-        rows: 3,
-        fullWidth: true
-      });
-    } else if (field.type === 'select_multiple') {
-      const selectedValues = Array.isArray(value) ? value : [];
-      control = /*#__PURE__*/React.createElement(TextField, {
-        select: true,
-        name: field.key,
-        value: selectedValues,
-        onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-        variant: "outlined",
-        size: "small",
-        error: showError,
-        helperText: showError ? requiredErrorText(field.type) : '',
-        fullWidth: true,
-        SelectProps: {
-          multiple: true,
-          renderValue: selected => /*#__PURE__*/React.createElement("div", {
-            className: "flex flex-wrap gap-4"
-          }, selected.map(opt => /*#__PURE__*/React.createElement(Chip, {
-            key: opt,
-            label: opt,
-            size: "small"
-          })))
-        }
-      }, (field.options || []).map(opt => /*#__PURE__*/React.createElement(MenuItem, {
-        key: opt,
-        value: opt
-      }, /*#__PURE__*/React.createElement(Checkbox, {
-        checked: selectedValues.indexOf(opt) > -1
-      }), /*#__PURE__*/React.createElement(ListItemText, {
-        primary: opt
-      }))));
-    } else if (field.type === 'yes_no') {
-      const toggleValue = value === true ? 'yes' : value === false ? 'no' : null;
-      control = /*#__PURE__*/React.createElement(ToggleButtonGroup, {
-        value: toggleValue,
-        exclusive: true,
-        onChange: (_, val) => {
-          if (val !== null) onFieldChange(selectedItem.id, field.key, val === 'yes');
-        },
-        fullWidth: true,
-        size: "small",
-        color: showError ? 'error' : 'standard'
-      }, /*#__PURE__*/React.createElement(ToggleButton, {
-        value: "yes"
-      }, i18next.t('common.app.yes')), /*#__PURE__*/React.createElement(ToggleButton, {
-        value: "no"
-      }, i18next.t('common.app.no')));
-    } else if (field.type === 'date') {
-      // Native date input, not each host app's own local DateTimeField wrapper --
-      // this component can't depend on either app's app-local component tree.
-      // Value is a plain 'YYYY-MM-DD' string in and out, same convention both apps
-      // already use for this field type.
-      control = /*#__PURE__*/React.createElement(TextField, {
-        name: field.key,
-        type: "date",
-        value: value,
-        onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-        variant: "outlined",
-        size: "small",
-        error: showError,
-        helperText: showError ? requiredErrorText(field.type) : '',
-        fullWidth: true,
-        InputLabelProps: {
-          shrink: true
-        }
-      });
-    } else {
-      // 'text' (default/unknown type too, for backward compat)
-      control = /*#__PURE__*/React.createElement(TextField, {
-        name: field.key,
-        value: value,
-        onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-        variant: "outlined",
-        size: "small",
-        error: showError,
-        helperText: showError ? requiredErrorText(field.type) : '',
-        inputProps: {
-          maxLength: field.maxLength || 45
-        },
-        type: "text",
-        placeholder: field.placeholder,
-        fullWidth: true
-      });
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      className: wrapperClassName,
-      key: revealKey,
-      "data-field-invalid": showError ? 'true' : undefined
-    }, /*#__PURE__*/React.createElement(Typography, {
-      variant: "body2",
-      sx: {
-        fontWeight: 500,
-        mb: 0.5,
-        color: showError ? 'error.main' : 'text.primary'
-      }
-    }, labelText), control, field.type === 'yes_no' && !showAsDrifted && showError && /*#__PURE__*/React.createElement(Typography, {
-      variant: "caption",
-      color: "error",
-      className: "block mt-4"
-    }, requiredErrorText(field.type)));
-  })))), showHistoricalAnswers && selectedItem && (() => {
+        color: "error",
+        className: "block mt-4"
+      }, requiredErrorText(field.type)));
+    }));
+  })())), showHistoricalAnswers && selectedItem && (() => {
     const liveKeys = new Set(fieldConfig.map(f => f.key));
     const historicalEntries = Object.keys(selectedItem.values || {}).filter(k => !liveKeys.has(k)).map(k => ({
       key: k,

package/dist/languages/en/translations.json

@@ -2452,6 +2452,7 @@
         "configure": "Configure Fields",
         "preview_hint": "How guests see it",
         "preview_empty": "Add a field to see it here.",
+        "preview_reset_hint": "Clear your test answers to see how this looks when it first loads.",
         "field_type": "Field Type",
         "field_type_text": "Text",
         "field_type_select": "Dropdown (Select One)",

package/dist/languages/es/translations.json

@@ -2452,6 +2452,7 @@
         "configure": "Configurar campos",
         "preview_hint": "Vista del cliente",
         "preview_empty": "Añade un campo para verlo aquí.",
+        "preview_reset_hint": "Borra tus respuestas de prueba para ver cómo se ve cuando se carga por primera vez.",
         "field_type": "Tipo de campo",
         "field_type_text": "Texto",
         "field_type_select": "Desplegable (Seleccionar uno)",

package/dist/languages/fr/translations.json

@@ -2452,6 +2452,7 @@
         "configure": "Configurer les champs",
         "preview_hint": "Vue côté client",
         "preview_empty": "Ajoutez un champ pour le voir ici.",
+        "preview_reset_hint": "Effacez vos réponses de test pour voir comment cela s'affiche au premier chargement.",
         "field_type": "Type de champ",
         "field_type_text": "Texte",
         "field_type_select": "Liste déroulante (Sélectionner un)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "2.1.390",
+  "version": "2.1.392",
   "private": false,
   "main": "dist/index.js",
   "babel": {