pcm-shared-components 2.1.408 → 2.1.410

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

@@ -18,10 +18,15 @@ export const openNativeDatePicker = e => {
   }
 };
 
-// Collapsed height for a notice's rich-text content before it needs a "View full ..." link. A
-// handful of lines of admin-entered text/markup fits inside this without ever showing the link at
-// all; anything longer gets clipped here and offered in full through the dialog below.
-const NOTICE_COLLAPSED_MAX_HEIGHT = 160;
+// Collapsed size for a notice's rich-text content before it needs a "Show More" link -- kept
+// deliberately small (3 text lines, clamped on a clean line boundary with an ellipsis via
+// -webkit-line-clamp) so a long admin-entered notice doesn't dominate the panel's vertical space;
+// anything longer is offered in full through the dialog below. Short content still renders in
+// full with no link at all (overflow-measured, not char-counted). NOTICE_COLLAPSED_MAX_HEIGHT is
+// only a fallback ceiling for engines without line-clamp support, sized generously enough that
+// the line-clamp is what actually cuts in normal browsers.
+const NOTICE_COLLAPSED_LINES = 3;
+const NOTICE_COLLAPSED_MAX_HEIGHT = 130;
 
 /**
  * The control for a `notice` field: the admin's sanitized rich text inside a bounded-height
@@ -76,30 +81,46 @@ const NoticeFieldControl = ({
     sx: {
       p: 1.5,
       borderRadius: 1,
-      bgcolor: 'action.hover',
-      maxHeight: NOTICE_COLLAPSED_MAX_HEIGHT,
-      overflow: 'hidden'
+      bgcolor: 'action.hover'
     }
   }, /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
+    style: {
+      display: '-webkit-box',
+      WebkitLineClamp: NOTICE_COLLAPSED_LINES,
+      WebkitBoxOrient: 'vertical',
+      maxHeight: NOTICE_COLLAPSED_MAX_HEIGHT,
+      overflow: 'hidden'
+    },
     dangerouslySetInnerHTML: {
       __html: contentHtml
     }
-  })), overflowing && /*#__PURE__*/React.createElement(Button, {
+  })), overflowing &&
+  /*#__PURE__*/
+  // Bottom-right, per the requested layout. NOT disabled in read-only mode -- reading the
+  // full notice is always legitimate, only the checkbox below is a mutation. stopPropagation:
+  // some hosts render this control inside a click-to-edit card (e.g. the admin reservation
+  // review's occupant card) whose background clicks deliberately bubble up to open the
+  // editor -- opening the read-more dialog must not also trigger that.
+  React.createElement(Button, {
     size: "small",
-    disabled: disabled,
-    onClick: () => setDialogOpen(true),
+    onClick: e => {
+      e.stopPropagation();
+      setDialogOpen(true);
+    },
     sx: {
-      alignSelf: 'flex-start',
+      alignSelf: 'flex-end',
       textTransform: 'none',
       minWidth: 0,
       p: 0
     }
-  }, i18next.t('animal.view_full_field', {
-    label: field.label
-  })), /*#__PURE__*/React.createElement(Dialog, {
+  }, i18next.t('common.app.show_more')), /*#__PURE__*/React.createElement(Dialog, {
     open: dialogOpen,
-    onClose: () => setDialogOpen(false),
+    onClose: e => {
+      if (e && e.stopPropagation) e.stopPropagation();
+      setDialogOpen(false);
+    },
+    onClick: e => e.stopPropagation(),
     maxWidth: "sm",
     fullWidth: true,
     scroll: "paper"
@@ -110,7 +131,10 @@ const NoticeFieldControl = ({
       __html: contentHtml
     }
   })), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: () => setDialogOpen(false)
+    onClick: e => {
+      e.stopPropagation();
+      setDialogOpen(false);
+    }
   }, i18next.t('common.app.close')))), /*#__PURE__*/React.createElement(FormControlLabel, {
     control: /*#__PURE__*/React.createElement(Checkbox, {
       checked: value === true,

package/package.json

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