pcm-shared-components 2.1.392 → 2.1.394

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { TextField, Icon, IconButton, Button, Paper, Typography, InputAdornment, MenuItem, ToggleButton, ToggleButtonGroup, Checkbox, ListItemText, Chip, Alert, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
 import { ThemeProvider } from '@mui/system';
@@ -195,6 +195,42 @@ export const AnimalVehicleDetailsEditor = props => {
     setPendingFocusIndex(idx);
   };
   const selectedItem = items[selectedIndex];
+
+  // Ref registry for each field's label element, keyed by field.key -- rebuilt every render (a
+  // field can be removed/reordered), read by the layout effect below to measure whether a label
+  // actually wrapped onto a second line at its current column width.
+  const labelRefs = useRef(new Map());
+  const [wrappedKeys, setWrappedKeys] = useState(() => new Set());
+
+  // A label long enough to wrap onto a second line at half-column width throws that field's
+  // control out of vertical alignment with whatever ends up paired next to it -- a one-line label
+  // and a two-line label start their inputs at different heights even though both cells are the
+  // same width. Admin-typed labels are free text up to 100 characters of wildly different letter
+  // widths, so a character-count cutoff would either wrongly wrap a short-but-wide label or miss a
+  // long-but-narrow one; this measures the ACTUAL rendered height of every label after each paint
+  // instead and promotes any field whose label wrapped to full width too, same treatment as a
+  // type-forced or orphaned field.
+  //
+  // Re-runs whenever the wrapped set itself changes (not just when `fieldConfig` changes), because
+  // promoting one field to full width re-pairs its neighbors, which can occasionally make a
+  // DIFFERENT field's label newly wrap (or stop wrapping) at its new column width. Safe from an
+  // infinite loop: promotions only ever add width, never remove it, so this converges in at most a
+  // few passes, and the state setter bails out (no re-render) the moment a pass finds no change.
+  useLayoutEffect(() => {
+    const nextWrapped = new Set();
+    labelRefs.current.forEach((el, fieldKey) => {
+      if (!el) return;
+      const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 0;
+      if (lineHeight > 0 && el.offsetHeight > lineHeight * 1.4) {
+        nextWrapped.add(fieldKey);
+      }
+    });
+    setWrappedKeys(prev => {
+      if (prev.size === nextWrapped.size && [...prev].every(k => nextWrapped.has(k))) return prev;
+      return nextWrapped;
+    });
+  }, [fieldConfig, wrappedKeys]);
+  const isFullWidthField = f => ['select', 'textarea', 'select_multiple'].includes(f.type) || wrappedKeys.has(f.key);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement("div", {
@@ -302,7 +338,7 @@ export const AnimalVehicleDetailsEditor = props => {
   }, /*#__PURE__*/React.createElement(DeleteOutlineIcon, {
     fontSize: "small"
   }))), (() => {
-    const pairableFields = fieldConfig.filter(f => !['select', 'textarea', 'select_multiple'].includes(f.type));
+    const pairableFields = fieldConfig.filter(f => !isFullWidthField(f));
     const orphanField = pairableFields.length % 2 === 1 ? pairableFields[pairableFields.length - 1] : null;
     return /*#__PURE__*/React.createElement("div", {
       ref: fieldsContainerRef,
@@ -327,7 +363,7 @@ export const AnimalVehicleDetailsEditor = props => {
       // 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;
+      const wrapperClassName = isFullWidthField(field) || field === orphanField ? 'col-span-full' : undefined;
       let control;
       if (showAsDrifted) {
         // Generic stringify -- this renders whatever type the field used to be, which
@@ -523,6 +559,9 @@ export const AnimalVehicleDetailsEditor = props => {
         key: revealKey,
         "data-field-invalid": showError ? 'true' : undefined
       }, /*#__PURE__*/React.createElement(Typography, {
+        ref: el => {
+          if (el) labelRefs.current.set(field.key, el);else labelRefs.current.delete(field.key);
+        },
         variant: "body2",
         sx: {
           fontWeight: 500,

package/dist/languages/en/translations.json

@@ -2524,7 +2524,8 @@
       "width": "Width",
       "max_adult": "Max Adults",
       "max_children": "Max Children",
-      "max_animal": "Max Animals"
+      "max_animal": "Max Animals",
+      "animal_fields": "Animal Fields"
     }
   },
   "lot_selection": {
@@ -4505,7 +4506,7 @@
       "add_animal_details": "Add animal details",
       "add_details": "Add details",
       "animal_details": "Animal details",
-      "counts": "Party",
+      "counts": "Occupants",
       "details": "Details",
       "optional_tip": "Every field on this page is optional. Leave anything blank and press Continue when you're done. You can also come back later to fill them in.",
       "skip_details": "Skip details",

package/dist/languages/es/translations.json

@@ -2524,7 +2524,8 @@
       "width": "Ancho",
       "max_adult": "Máximo de adultos",
       "max_children": "Máximo de niños",
-      "max_animal": "Máximo de animales"
+      "max_animal": "Máximo de animales",
+      "animal_fields": "Campos para animales"
     }
   },
   "lot_selection": {
@@ -4505,7 +4506,7 @@
       "add_animal_details": "Agregar detalles del animal",
       "add_details": "Agregar detalles",
       "animal_details": "Detalles del animal",
-      "counts": "Grupo",
+      "counts": "Ocupantes",
       "details": "Detalles",
       "optional_tip": "Todos los campos de esta página son opcionales. Deje en blanco lo que quiera y presione Continuar cuando termine. También puede volver más tarde para completarlos.",
       "skip_details": "Omitir detalles",

package/dist/languages/fr/translations.json

@@ -2524,7 +2524,8 @@
       "width": "Largeur",
       "max_adult": "Adultes max",
       "max_children": "Enfants max",
-      "max_animal": "Animaux max"
+      "max_animal": "Animaux max",
+      "animal_fields": "Champs pour les animaux"
     }
   },
   "lot_selection": {
@@ -4505,7 +4506,7 @@
       "add_animal_details": "Ajouter les détails de l'animal",
       "add_details": "Ajouter les détails",
       "animal_details": "Détails de l'animal",
-      "counts": "Groupe",
+      "counts": "Occupants",
       "details": "Détails",
       "optional_tip": "Tous les champs de cette page sont facultatifs. Laissez vide ce que vous souhaitez et appuyez sur Continuer lorsque vous avez terminé. Vous pourrez aussi revenir plus tard pour les compléter.",
       "skip_details": "Ignorer les détails",

package/package.json

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