@riboseinc/paneron-registry-kit 2.2.5 → 2.2.7

package/views/detail/RegisterItem/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ItemDetail = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -57,34 +57,23 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * NOTE: while generally intended as tab content handler,
  * is also reused within change request view.
  */
-const ItemDetail = function ({
+const MaybeItemDetail = (0, _react.memo)(function ({
   uri,
   inProposalWithID
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m; //const { value: itemData } = useSingleRegisterItemData(ref);
+  var _a, _b, _c; //const { value: itemData } = useSingleRegisterItemData(ref);
 
 
-  const {
-    updateObjects,
-    makeRandomID,
-    performOperation,
-    isBusy
-  } = (0, _react.useContext)(_context.DatasetContext);
-  const {
-    spawnTab
-  } = (0, _react.useContext)(_context2.TabbedWorkspaceContext);
   const {
     jumpTo,
     subregisters,
-    useRegisterItemData,
-    activeChangeRequestID: globallyActiveCRID
+    useRegisterItemData
   } = (0, _react.useContext)(_BrowserCtx.BrowserCtx);
-  const ref = (0, _itemPathUtils.useItemRef)(subregisters !== undefined, uri);
-  const itemClass = (0, _useItemClassConfig.default)((_a = ref === null || ref === void 0 ? void 0 : ref.classID) !== null && _a !== void 0 ? _a : 'NONEXISTENT_CLASS_ID');
   const {
-    changeRequest: activeCR,
-    canEdit: activeCRIsEditable
+    changeRequest: activeCR
   } = (0, _react.useContext)(_ChangeRequestContext.ChangeRequestContext);
+  const ref = (0, _itemPathUtils.useItemRef)(subregisters !== undefined, uri);
+  const itemClass = (0, _useItemClassConfig.default)((_a = ref === null || ref === void 0 ? void 0 : ref.classID) !== null && _a !== void 0 ? _a : 'NONEXISTENT_CLASS_ID');
   const itemClassID = (_b = itemClass === null || itemClass === void 0 ? void 0 : itemClass.meta) === null || _b === void 0 ? void 0 : _b.id;
   const itemRef = ref !== null && ref !== void 0 ? ref : _types.DUMMY_REF;
   const {
@@ -98,11 +87,81 @@ const ItemDetail = function ({
   }), [itemPath]);
   const itemResponse = useRegisterItemData(itemRequest);
   const itemData = itemResponse.value[itemPath];
+
+  if (!itemClass) {
+    return (0, _react2.jsx)(_core.NonIdealState, {
+      icon: "heart-broken",
+      title: "Unable to show item",
+      description: `View for ${(_c = ref === null || ref === void 0 ? void 0 : ref.itemID) !== null && _c !== void 0 ? _c : uri} cannot be retrieved from item class configuration`
+    });
+  } else if ((0, _types.isRegisterItem)(itemData)) {
+    return (0, _react2.jsx)(ItemDetail, {
+      item: itemData,
+      itemRef: itemRef,
+      itemClass: itemClass,
+      inProposalWithID: inProposalWithID
+    });
+  } else if (itemResponse.isUpdating) {
+    return (0, _react2.jsx)("div", {
+      className: _core.Classes.SKELETON
+    }, "Loading");
+  } else {
+    // Opened using URI that points within a proposal.
+    // The item may or may not have been accepted.
+    const inCRWithID = (0, _itemPathUtils.getCRIDFromProposedItemPath)(uri);
+
+    if (inCRWithID !== null && (activeCR === null || activeCR === void 0 ? void 0 : activeCR.id) !== inCRWithID) {
+      return (0, _react2.jsx)(_core.NonIdealState, {
+        icon: "help",
+        title: "This item does not exist\u2026",
+        description: (0, _react2.jsx)(_react.default.Fragment, null, "\u2026but it might be proposed.", (0, _react2.jsx)("br", null), jumpTo ? (0, _react2.jsx)(_core.Button, {
+          css: (0, _react2.css)`margin: 10px;`,
+          intent: "primary",
+          onClick: () => jumpTo === null || jumpTo === void 0 ? void 0 : jumpTo(`${_protocolRegistry.Protocols.CHANGE_REQUEST}:${(0, _itemPathUtils.crIDToCRPath)(inCRWithID)}`)
+        }, "Go to proposal") : null)
+      });
+    } else {
+      const desc = itemData === null || itemData === undefined ? "does not exist or could not be deserialized" : "may use unexpected data format";
+      return (0, _react2.jsx)(_core.NonIdealState, {
+        icon: "heart-broken",
+        title: "Unable to show item",
+        description: `Item at ${itemPath} ${desc}`
+      });
+    }
+  }
+});
+const ItemDetail = (0, _react.memo)(function ({
+  item,
+  itemRef,
+  itemClass,
+  className,
+  inProposalWithID
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+
+  const {
+    subregisters,
+    activeChangeRequestID: globallyActiveCRID
+  } = (0, _react.useContext)(_BrowserCtx.BrowserCtx);
+  const {
+    changeRequest: activeCR,
+    canEdit: activeCRIsEditable
+  } = (0, _react.useContext)(_ChangeRequestContext.ChangeRequestContext);
+  const {
+    updateObjects,
+    makeRandomID,
+    performOperation,
+    isBusy
+  } = (0, _react.useContext)(_context.DatasetContext);
+  const {
+    spawnTab
+  } = (0, _react.useContext)(_context2.TabbedWorkspaceContext);
   const [editedClarification, setEditedClarification] = (0, _react.useState)(null); //const [ diffMode, setDiffMode ] = useState<boolean>(false);
   // TODO: Implement diff mode
 
   const diffMode = false;
-  const proposal = (_c = activeCR && activeCR.items[itemPath] ? activeCR.items[itemPath] : null) !== null && _c !== void 0 ? _c : null;
+  const itemPath = (0, _itemPathUtils.itemRefToItemPath)(itemRef);
+  const proposal = (_a = activeCR && activeCR.items[itemPath] ? activeCR.items[itemPath] : null) !== null && _a !== void 0 ? _a : null;
 
   const handleClearProposal = () => performProposalOperation('clearing draft proposal', null);
 
@@ -141,7 +200,7 @@ const ItemDetail = function ({
   }
 
   const handleSetProposal = (0, _react.useCallback)(async function _handleSetProposal(summary, proposal) {
-    if (!activeCRIsEditable || !updateObjects || !(0, _types.isRegisterItem)(itemData)) {
+    if (!activeCRIsEditable || !updateObjects || !(0, _types.isRegisterItem)(item)) {
       throw new Error("Proposal isn’t editable");
     }
 
@@ -155,7 +214,7 @@ const ItemDetail = function ({
       activeCR, {
         [itemPath]: proposal
       }, proposal && (proposal === null || proposal === void 0 ? void 0 : proposal.type) !== 'amendment' && editedClarification ? {
-        [itemPath]: { ...itemData,
+        [itemPath]: { ...item,
           data: editedClarification
         }
       } : {}),
@@ -163,10 +222,10 @@ const ItemDetail = function ({
       // omits oldValue for item data payloads.
       _dangerouslySkipValidation: true
     });
-  }, [editedClarification, activeCRIsEditable, itemPath, JSON.stringify(itemData), JSON.stringify(activeCR), updateObjects]); // TODO: Very similar to `handleAdd()` in Browse sidebar menu; refactor?
+  }, [editedClarification, activeCRIsEditable, itemPath, item, activeCR, updateObjects]); // TODO: Very similar to `handleAdd()` in Browse sidebar menu; refactor?
 
   const handleProposeLikeThis = (0, _react.useCallback)(async function _handleProposeLikeThis() {
-    if (!updateObjects || !makeRandomID || !activeCRIsEditable || !activeCR || !itemClass || !(0, _types.isRegisterItem)(itemData)) {
+    if (!updateObjects || !makeRandomID || !activeCRIsEditable || !activeCR || !itemClass || !(0, _types.isRegisterItem)(item)) {
       throw new Error("Unable to create item: likely current proposal is not editable or dataset is read-only");
     }
 
@@ -184,7 +243,7 @@ const ItemDetail = function ({
       id: itemID,
       dateAccepted: new Date(),
       status: 'valid',
-      data: { ...itemData.data
+      data: { ...item.data
       }
     };
 
@@ -208,165 +267,136 @@ const ItemDetail = function ({
     } else {
       throw new Error("Newly created item did not pass validation (this is likely a bug in RegistryKit");
     }
-  }, [updateObjects, activeCRIsEditable, itemPath, activeCR === null || activeCR === void 0 ? void 0 : activeCR.id, activeCR === null || activeCR === void 0 ? void 0 : activeCR.state, Object.entries((_d = activeCR === null || activeCR === void 0 ? void 0 : activeCR.items) !== null && _d !== void 0 ? _d : {}).flat().map(i => JSON.stringify(i)).toString(), itemData ? JSON.stringify((0, _util.normalizeObject)(itemData)) : itemData]);
-
-  if (!itemClass) {
-    return (0, _react2.jsx)(_core.NonIdealState, {
-      icon: "heart-broken",
-      title: "Unable to show item",
-      description: `View for ${(_e = ref === null || ref === void 0 ? void 0 : ref.itemID) !== null && _e !== void 0 ? _e : uri} cannot be retrieved from item class configuration`
-    });
-  } else if ((0, _types.isRegisterItem)(itemData)) {
-    let details;
-
-    if (editedClarification !== null && activeCRIsEditable) {
-      const EditView = itemClass.views.editView;
-      details = (0, _react2.jsx)(EditView, {
-        itemData: editedClarification,
-        itemRef: itemRef,
-        onChange: !isBusy ? newData => {
-          setEditedClarification(newData);
-        } : undefined
-      });
-    } else {
-      const DetailView = (_f = itemClass.views.detailView) !== null && _f !== void 0 ? _f : itemClass.views.editView;
-      details = (0, _react2.jsx)(DetailView, {
-        itemRef: itemRef,
-        itemData: itemData.data
-      });
-    } //const canAmend = activeCR && itemData.status === 'valid';
-
-
-    const itemStatus = (0, _react2.jsx)(FormGroup, {
-      inline: true,
-      label: "status:",
-      css: (0, _react2.css)`margin: 0;`
-    }, (0, _react2.jsx)(_core.ControlGroup, {
-      fill: true
-    }, (0, _react2.jsx)(_core.InputGroup, {
-      value: (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' ? `${proposal.amendmentType} proposed` : (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'addition' ? "addition proposed" : itemData.status,
-      intent: (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' ? 'warning' : (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'addition' ? 'primary' : itemData.status === 'valid' ? 'success' : undefined,
-      leftIcon: proposal && (proposal.type === 'amendment' || proposal.type === 'addition') ? 'asterisk' : itemData.status === 'valid' ? 'tick' : itemData.status === 'invalid' ? 'ban-circle' : 'warning-sign',
-      readOnly: true
-    }), activeCRIsEditable && !editedClarification ? (0, _react2.jsx)(_react.default.Fragment, null, (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'addition' ? (0, _react2.jsx)(_core.Button, {
-      intent: "warning",
-      title: "Remove the proposal to add this new item.",
-      disabled: isBusy,
-      onClick: handleClearProposal
-    }, "Remove proposed addition") : null, (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' ? (0, _react2.jsx)(_core.Button, {
-      intent: "warning",
-      title: `Remove amendment (${proposal.amendmentType}) for this item from current proposal.`,
-      disabled: isBusy,
-      onClick: handleClearProposal
-    }, "Clear proposed amendment") : !proposal && itemData.status === 'valid' ? (0, _react2.jsx)(_core.ButtonGroup, null, (0, _react2.jsx)(_core.Button, {
-      intent: "primary",
-      disabled: isBusy,
-      onClick: handleRetire
-    }, "Retire"), (0, _react2.jsx)(_core.Button, {
-      intent: "primary",
-      disabled: isBusy,
-      onClick: handleInvalidate
-    }, "Invalidate")) : null) : null));
-    const supersedingItems = // It’s superseded (whether in current proposal or not)
-    itemData.status === 'superseded' // Item is valid, proposal is editable, and no change to this item is proposed yet
-    || activeCRIsEditable && !proposal && !editedClarification && itemData.status === 'valid' // This item is being superseded in active proposal
-    // XXX: Redundant condition with the first one?
-    || (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' && proposal.amendmentType === 'supersession' ? (0, _react2.jsx)(FormGroup, {
-      inline: true,
-      label: "superseded by: ",
-      css: (0, _react2.css)`margin: 0;`
-    }, (0, _react2.jsx)(_RelatedItems.RelatedItems, {
-      availableClassIDs: [itemClass.meta.id],
-      itemRefs: (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' && proposal.amendmentType === 'supersession' ? proposal.supersedingItemIDs.map(id => ({
-        itemID: id,
-        classID: itemClass.meta.id,
-        subregisterID
-      })) : (_g = itemData.supersededBy) !== null && _g !== void 0 ? _g : [],
-      onChange: !isBusy && activeCRIsEditable && ((proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' && proposal.amendmentType === 'supersession' || !proposal && itemData.status === 'valid') ? items => items.length > 0 ? handleSupersedeWith(items.map(ref => ref.itemID)) : handleClearProposal() : undefined
-    })) : null;
-    const clarificationHasChanges = JSON.stringify(editedClarification) !== JSON.stringify(itemData.data);
-    const clarificationAction = proposal && (proposal === null || proposal === void 0 ? void 0 : proposal.type) !== 'amendment' || activeCRIsEditable && !proposal && itemData.status === 'valid' ? (0, _react2.jsx)(FormGroup, {
-      inline: true,
-      label: `${(_h = proposal === null || proposal === void 0 ? void 0 : proposal.type) !== null && _h !== void 0 ? _h : "clarification"}: `,
-      css: (0, _react2.css)`margin: 0;`
-    }, activeCRIsEditable ? (0, _react2.jsx)(_core.ButtonGroup, null, editedClarification ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_core.Button, {
-      intent: clarificationHasChanges ? "primary" : undefined,
-      // TODO(perf): this is expensive if renders are frequent…
-      disabled: !clarificationHasChanges || isBusy,
-      onClick: !proposal || (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'clarification' ? handleClarify : handleEditAddition
-    }, "Save"), (0, _react2.jsx)(_core.Button, {
-      onClick: () => setEditedClarification(null)
-    }, "Do not save")) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_core.Button, {
-      disabled: diffMode || isBusy,
-      intent: "primary",
-      outlined: true,
-      onClick: () => setEditedClarification(itemData.data)
-    }, !proposal ? "Clarify" : "Edit"), (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'clarification' ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_core.Button, {
-      disabled: diffMode || isBusy || (proposal === null || proposal === void 0 ? void 0 : proposal.type) !== 'clarification',
-      intent: "warning",
-      onClick: handleClearProposal
-    }, "Clear")) : null)) : (0, _react2.jsx)(_core.Button, {
-      disabled: true
-    }, (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'clarification' ? "Clarified" : "Added", " in active proposal")) : null;
-    const proposeLikeThis = activeCRIsEditable && !editedClarification ? (0, _react2.jsx)(_core.Button, {
-      title: "Propose a new item in current proposal, using this item as template.",
-      icon: 'plus',
-      disabled: isBusy,
-      outlined: true,
-      onClick: performOperation('duplicating item', handleProposeLikeThis)
-    }, "Propose another like this") : null; // If there’s a CR context without active CR,
-    // or active CR isn’t the same as the one in CR context,
-    // then we can assume that the item is shown in proposal window
-    // and we’d set window title to proposal’s title rather than item’s.
-    // If there’s a CR context and active CR and they’re the same
-    // then it *could* be that the item is shown in its own tab;
-    // we will render proposal’s title if the item appears in the change request
-    // (makes sense because the user *is* technically viewing a proposal then).
-
-    const windowTitle = activeCR && (!globallyActiveCRID || activeCR.id !== globallyActiveCRID || activeCR.items[itemPath]) ? `Proposal ${(0, _util2.maybeEllipsizeString)(activeCR.justification, 20)}…` : `${(_j = itemClass.meta.title) !== null && _j !== void 0 ? _j : 'register item'} #${itemData.id}`;
-    return (0, _react2.jsx)(_util2.TabContentsWithActions, {
-      actions: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(FormGroup, {
-        inline: true,
-        labelInfo: (0, _react2.jsx)(_HelpTooltip.default, {
-          icon: 'info-sign',
-          content: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_core.H5, null, itemClass.meta.title), (_k = itemClass.meta.description) !== null && _k !== void 0 ? _k : "No description is provided for this register item class.", (0, _react2.jsx)(_core.UL, null, (0, _react2.jsx)("li", null, "Class ID: ", itemClassID), (0, _react2.jsx)("li", null, "Subregister ID: ", subregisterID !== null && subregisterID !== void 0 ? subregisterID : 'N/A'), (0, _react2.jsx)("li", null, "UUID: ", itemID)))
-        }),
-        label: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("strong", null, itemClass.meta.title), subregisterID ? (0, _react2.jsx)("span", {
-          title: "Subregister"
-        }, " in ", (_m = (_l = subregisters === null || subregisters === void 0 ? void 0 : subregisters[subregisterID]) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : subregisterID) : null),
-        css: (0, _react2.css)`margin: 0; .bp4-form-content { display: flex; flex-flow: row wrap; gap: 10px; }`
-      }, itemStatus, supersedingItems, clarificationAction, proposeLikeThis)),
-      main: (0, _react2.jsx)(_core.Card, {
-        css: (0, _react2.css)`position: absolute; inset: ${inProposalWithID ? '0' : '10px'}; overflow-y: auto;`
-      }, (0, _react2.jsx)(_util2.RegisterHelmet, null, (0, _react2.jsx)("title", null, windowTitle)), details)
+  }, [updateObjects, activeCRIsEditable, itemPath, activeCR === null || activeCR === void 0 ? void 0 : activeCR.id, activeCR === null || activeCR === void 0 ? void 0 : activeCR.state, Object.entries((_b = activeCR === null || activeCR === void 0 ? void 0 : activeCR.items) !== null && _b !== void 0 ? _b : {}).flat().map(i => JSON.stringify(i)).toString(), item ? JSON.stringify((0, _util.normalizeObject)(item)) : item]);
+  let details;
+
+  if (editedClarification !== null && activeCRIsEditable) {
+    const EditView = itemClass.views.editView;
+    details = (0, _react2.jsx)(EditView, {
+      itemData: editedClarification,
+      itemRef: itemRef,
+      onChange: !isBusy ? setEditedClarification : undefined
     });
-  } else if (itemResponse.isUpdating) {
-    return (0, _react2.jsx)("div", {
-      className: _core.Classes.SKELETON
-    }, "Loading\u2026");
   } else {
-    const inCRWithID = (0, _itemPathUtils.getCRIDFromProposedItemPath)(uri);
-
-    if (inCRWithID !== null && (activeCR === null || activeCR === void 0 ? void 0 : activeCR.id) !== inCRWithID) {
-      return (0, _react2.jsx)(_core.NonIdealState, {
-        icon: "help",
-        title: "This item does not exist\u2026",
-        description: (0, _react2.jsx)(_react.default.Fragment, null, "\u2026but it might be proposed.", (0, _react2.jsx)("br", null), jumpTo ? (0, _react2.jsx)(_core.Button, {
-          css: (0, _react2.css)`margin: 10px;`,
-          intent: "primary",
-          onClick: () => jumpTo === null || jumpTo === void 0 ? void 0 : jumpTo(`${_protocolRegistry.Protocols.CHANGE_REQUEST}:${(0, _itemPathUtils.crIDToCRPath)(inCRWithID)}`)
-        }, "Go to proposal") : null)
-      });
-    } else {
-      const desc = itemData === null || itemData === undefined ? "does not exist or could not be deserialized" : "may use unexpected data format";
-      return (0, _react2.jsx)(_core.NonIdealState, {
-        icon: "heart-broken",
-        title: "Unable to show item",
-        description: `Item at ${itemPath} ${desc}`
-      });
-    }
+    const DetailView = (_c = itemClass.views.detailView) !== null && _c !== void 0 ? _c : itemClass.views.editView;
+    details = (0, _react2.jsx)(DetailView, {
+      itemRef: itemRef,
+      itemData: item.data
+    });
   }
-};
+
+  console.debug("Rendering RegisterItem view"); //const canAmend = activeCR && itemData.status === 'valid';
+
+  const itemStatus = (0, _react2.jsx)(FormGroup, {
+    inline: true,
+    label: "status:",
+    css: (0, _react2.css)`margin: 0;`
+  }, (0, _react2.jsx)(_core.ControlGroup, {
+    fill: true
+  }, (0, _react2.jsx)(_core.InputGroup, {
+    value: (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' ? `${proposal.amendmentType} proposed` : (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'addition' ? "addition proposed" : item.status,
+    intent: (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' ? 'warning' : (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'addition' ? 'primary' : item.status === 'valid' ? 'success' : undefined,
+    leftIcon: proposal && (proposal.type === 'amendment' || proposal.type === 'addition') ? 'asterisk' : item.status === 'valid' ? 'tick' : item.status === 'invalid' ? 'ban-circle' : 'warning-sign',
+    readOnly: true
+  }), activeCRIsEditable && !editedClarification ? (0, _react2.jsx)(_react.default.Fragment, null, (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'addition' ? (0, _react2.jsx)(_core.Button, {
+    intent: "warning",
+    title: "Remove the proposal to add this new item.",
+    disabled: isBusy,
+    onClick: handleClearProposal
+  }, "Remove proposed addition") : null, (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' ? (0, _react2.jsx)(_core.Button, {
+    intent: "warning",
+    title: `Remove amendment (${proposal.amendmentType}) for this item from current proposal.`,
+    disabled: isBusy,
+    onClick: handleClearProposal
+  }, "Clear proposed amendment") : !proposal && item.status === 'valid' ? (0, _react2.jsx)(_core.ButtonGroup, null, (0, _react2.jsx)(_core.Button, {
+    intent: "primary",
+    disabled: isBusy,
+    onClick: handleRetire
+  }, "Retire"), (0, _react2.jsx)(_core.Button, {
+    intent: "primary",
+    disabled: isBusy,
+    onClick: handleInvalidate
+  }, "Invalidate")) : null) : null)); // It’s superseded (whether in current proposal or not)
+
+  const isSuperseded = item.status === 'superseded'; // Item is valid, proposal is editable, and no change to this item is proposed yet
+
+  const canBeSuperseded = activeCRIsEditable && !proposal && !editedClarification && item.status === 'valid'; // This item is being superseded in active proposal
+  // XXX: May be redundant with `isSuperseded`?
+
+  const isBeingSuperseded = (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' && proposal.amendmentType === 'supersession';
+  const supersedingItems = isSuperseded || canBeSuperseded || isBeingSuperseded ? (0, _react2.jsx)(FormGroup, {
+    inline: true,
+    label: "superseded by: ",
+    css: (0, _react2.css)`margin: 0;`
+  }, (0, _react2.jsx)(_RelatedItems.RelatedItems, {
+    availableClassIDs: [itemClass.meta.id],
+    itemRefs: (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' && proposal.amendmentType === 'supersession' ? proposal.supersedingItemIDs.map(id => ({
+      itemID: id,
+      // Superseding items are always of the same class
+      classID: itemClass.meta.id,
+      // Superseding items are always in the same subregister
+      subregisterID: itemRef.subregisterID
+    })) : (_d = item.supersededBy) !== null && _d !== void 0 ? _d : [],
+    onChange: !isBusy && activeCRIsEditable && ((proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'amendment' && proposal.amendmentType === 'supersession' || !proposal && item.status === 'valid') ? items => items.length > 0 ? handleSupersedeWith(items.map(ref => ref.itemID)) : handleClearProposal() : undefined
+  })) : null;
+  const clarificationHasChanges = JSON.stringify(editedClarification) !== JSON.stringify(item.data);
+  const clarificationAction = proposal && (proposal === null || proposal === void 0 ? void 0 : proposal.type) !== 'amendment' || activeCRIsEditable && !proposal && item.status === 'valid' ? (0, _react2.jsx)(FormGroup, {
+    inline: true,
+    label: `${(_e = proposal === null || proposal === void 0 ? void 0 : proposal.type) !== null && _e !== void 0 ? _e : "clarification"}: `,
+    css: (0, _react2.css)`margin: 0;`
+  }, activeCRIsEditable ? (0, _react2.jsx)(_core.ButtonGroup, null, editedClarification ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_core.Button, {
+    intent: clarificationHasChanges ? "primary" : undefined,
+    // TODO(perf): this is expensive if renders are frequent…
+    disabled: !clarificationHasChanges || isBusy,
+    onClick: !proposal || (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'clarification' ? handleClarify : handleEditAddition
+  }, "Save"), (0, _react2.jsx)(_core.Button, {
+    onClick: () => setEditedClarification(null)
+  }, "Do not save")) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_core.Button, {
+    disabled: diffMode || isBusy,
+    intent: "primary",
+    outlined: true,
+    onClick: () => setEditedClarification(item.data)
+  }, !proposal ? "Clarify" : "Edit"), (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'clarification' ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_core.Button, {
+    disabled: diffMode || isBusy || (proposal === null || proposal === void 0 ? void 0 : proposal.type) !== 'clarification',
+    intent: "warning",
+    onClick: handleClearProposal
+  }, "Clear")) : null)) : (0, _react2.jsx)(_core.Button, {
+    disabled: true
+  }, (proposal === null || proposal === void 0 ? void 0 : proposal.type) === 'clarification' ? "Clarified" : "Added", " in active proposal")) : null;
+  const proposeLikeThis = activeCRIsEditable && !editedClarification ? (0, _react2.jsx)(_core.Button, {
+    title: "Propose a new item in current proposal, using this item as template.",
+    icon: 'plus',
+    disabled: isBusy,
+    outlined: true,
+    onClick: performOperation('duplicating item', handleProposeLikeThis)
+  }, "Propose another like this") : null; // If there’s a CR context without active CR,
+  // or active CR isn’t the same as the one in CR context,
+  // then we can assume that the item is shown in proposal window
+  // and we’d set window title to proposal’s title rather than item’s.
+  // If there’s a CR context and active CR and they’re the same
+  // then it *could* be that the item is shown in its own tab;
+  // we will render proposal’s title if the item appears in the change request
+  // (makes sense because the user *is* technically viewing a proposal then).
+
+  const windowTitle = activeCR && (!globallyActiveCRID || activeCR.id !== globallyActiveCRID || activeCR.items[itemPath]) ? `Proposal ${(0, _util2.maybeEllipsizeString)(activeCR.justification, 20)}…` : `${(_f = itemClass.meta.title) !== null && _f !== void 0 ? _f : 'register item'} #${item.id}`;
+  return (0, _react2.jsx)(_util2.TabContentsWithActions, {
+    actions: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(FormGroup, {
+      inline: true,
+      labelInfo: (0, _react2.jsx)(_HelpTooltip.default, {
+        icon: 'info-sign',
+        content: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_core.H5, null, itemClass.meta.title), (_g = itemClass.meta.description) !== null && _g !== void 0 ? _g : "No description is provided for this register item class.", (0, _react2.jsx)(_core.UL, null, (0, _react2.jsx)("li", null, "Class ID: ", itemClass.meta.id), (0, _react2.jsx)("li", null, "Subregister ID: ", (_h = itemRef.subregisterID) !== null && _h !== void 0 ? _h : 'N/A'), (0, _react2.jsx)("li", null, "UUID: ", itemRef.itemID)))
+      }),
+      label: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("strong", null, itemClass.meta.title), itemRef.subregisterID ? (0, _react2.jsx)("span", {
+        title: "Subregister"
+      }, " in ", (_k = (_j = subregisters === null || subregisters === void 0 ? void 0 : subregisters[itemRef.subregisterID]) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : itemRef.subregisterID) : null),
+      css: (0, _react2.css)`margin: 0; .bp4-form-content { display: flex; flex-flow: row wrap; gap: 10px; }`
+    }, itemStatus, supersedingItems, clarificationAction, proposeLikeThis)),
+    main: (0, _react2.jsx)(_core.Card, {
+      css: (0, _react2.css)`position: absolute; inset: ${inProposalWithID ? '0' : '10px'}; overflow-y: auto;`
+    }, (0, _react2.jsx)(_util2.RegisterHelmet, null, (0, _react2.jsx)("title", null, windowTitle)), details)
+  });
+});
+exports.ItemDetail = ItemDetail;
 
 const ItemTitle = function ({
   uri
@@ -394,7 +424,7 @@ const ItemTitle = function ({
 };
 
 var _default = {
-  main: ItemDetail,
+  main: MaybeItemDetail,
   title: ItemTitle
 };
 exports.default = _default;