pcm-shared-components 2.1.391 → 2.1.393

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';
@@ -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"
@@ -179,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", {
@@ -286,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,
@@ -311,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
@@ -479,6 +531,9 @@ export const AnimalVehicleDetailsEditor = props => {
           fullWidth: true,
           InputLabelProps: {
             shrink: true
+          },
+          inputProps: {
+            onClick: openNativeDatePicker
           }
         });
       } else {
@@ -504,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": {

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": {

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": {

package/package.json

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