@riboseinc/paneron-registry-kit 2.2.15 → 2.2.17

package/index.d.ts

@@ -13,7 +13,9 @@ declare const _default: {
     incompleteItemRefToItemPathPrefix: typeof incompleteItemRefToItemPathPrefix;
     BrowserCtx: React.Context<BrowserCtx>;
     CRITERIA_CONFIGURATION: import("./views/FilterCriteria/models").CriteriaConfiguration;
-    GenericRelatedItemView: React.FC<import("./types").GenericRelatedItemViewProps>;
+    GenericRelatedItemView: React.FC<import("./types").GenericRelatedItemViewProps & {
+        controlGroupProps?: import("@blueprintjs/core").IControlGroupProps | undefined;
+    }>;
     PropertyDetailView: React.FC<import("@blueprintjs/core").IFormGroupProps & {
         title?: React.ReactNode;
         secondaryTitle?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riboseinc/paneron-registry-kit",
-  "version": "2.2.15",
+  "version": "2.2.17",
   "main": "index.js",
   "author": "Ribose Inc. <open.source@ribose.com>",
   "scripts": {

package/types/views.d.ts

@@ -154,6 +154,8 @@ export interface RegistryItemViewProps<P extends Payload> {
 export interface GenericRelatedItemViewProps {
     /** Currently selected item’s ref. */
     itemRef?: InternalItemReference;
+    /** Allows to grab a ref of the input displaying the selected item. */
+    inputRef?: React.Ref<HTMLInputElement>;
     /**
      * By default, clicking the item will spawn a tab via TabbedWorkspace context.
      * This prop can customize that behavior.

package/types/views.js.map

@@ -1 +1 @@
-{"version":3,"file":"views.js","sourceRoot":"","sources":["../../src/types/views.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { ButtonProps, MenuItemProps } from '@blueprintjs/core';\nimport type { ObjectDatasetRequest, ObjectDatasetResponse, ValueHook } from '@riboseinc/paneron-extension-kit/types';\nimport type { InternalItemReference, Payload, RegisterItem, RegisterItemClass } from './item';\nimport type { CriteriaGroup } from '../views/FilterCriteria/models';\n\n\n// Hooks\n\n/**\n * Mostly a wrapper around useObjectData, but coerces value type\n * (TODO: validate!) and takes into account change request from any\n * wrapping change request context. If a change request is present,\n * will substitute proposed item data unless `ignoreActiveCR` is set.\n *\n * NOTE: Despite the name, returns the entire RegisterItem,\n * not just the `.data` property with item payload.\n */\nexport type RegisterItemDataHook<P extends Payload = Payload> =\n  (opts: { itemPaths: string[], ignoreActiveCR?: true }) => ValueHook<Record<string, RegisterItem<P> | null>>;\n\n\n// Extension configuration\n\n// TODO: Obsolete?\n// export interface ExtensionContext {\n//   getRelatedItemClassConfiguration: (classID: string) => RelatedItemClassConfiguration\n//   useRegisterItemData: RegisterItemDataHook\n//   onJump?: () => void\n// }\n\nexport interface RegisterConfiguration\n<Items extends ItemClassConfigurationSet = Record<string, ItemClassConfiguration<any>>> {\n  /**\n   * Configuration for all items in this register.\n   * This includes items in subregisters.\n   */\n  itemClassConfiguration: Items\n\n  /**\n   * Default expression used to sort an item.\n   * Passed to useFilteredIndex().\n   */\n  keyExpression?: string\n\n  /** Subregister information. */\n  subregisters?: Subregisters<Items>\n}\n\nexport type Subregisters\n<Items extends ItemClassConfigurationSet = Record<string, ItemClassConfiguration<any>>> = {\n  [subregisterID: string]: {\n    title: string\n\n    /** Names of item classes that go in this subregister. */\n    itemClasses: (keyof Items)[]\n  }\n};\n\nexport type ItemClassConfigurationSet = {\n  [itemClassID: string]: ItemClassConfiguration<any>\n};\n\n\n\nexport interface ExportFormatConfiguration<P extends Payload> {\n  /** The name of the export format. */\n  label: string\n\n  /**\n   * Trailing part of the filename to save export as;\n   * must include at least extension (with separator),\n   * must not include any path prefix.\n   */\n  filenameExtension: string\n\n  /**\n   * The function that takes register item data and some helper functions\n   * and is expected to return a blob.\n   */\n  exportItem: (\n    itemData: RegisterItem<P>,\n    opts: {\n      getObjectData: (opts: ObjectDatasetRequest) => Promise<ObjectDatasetResponse>,\n      getBlob: (val: string) => Promise<Uint8Array>,\n      logger?: { log: Console[\"log\"], error: Console[\"error\"], debug: Console[\"debug\"] },\n    },\n  ) => Promise<Uint8Array>\n}\n\n\nexport interface ItemClassConfiguration<P extends Payload/*, F extends Field*/> {\n  meta: RegisterItemClass\n\n  itemCanBeSuperseded?: boolean\n  // If false, items of this class cannot be superseded, only retired.\n  // Default is true.\n\n  /** Used to pre-populate item data e.g. when a new item is created. */\n  defaults?: RegistryItemPayloadDefaults<P>\n\n  validatePayload?: (item: P) => Promise<boolean>\n  sanitizePayload?: (item: P) => Promise<P>\n\n  // XXX: Confirm if obsolete and remove\n  itemSorter?: (a: P, b: P) => number\n\n  /**\n   * Expression used to sort an item of this class.\n   * Passed to useFilteredIndex().\n   */\n  keyExpression?: string\n\n  exportFormats?: Readonly<ExportFormatConfiguration<P>[]>\n\n  views: {\n    listItemView: ItemListView<P>\n    editView: ItemEditView<P>\n    detailView?: ItemDetailView<P>\n  }\n}\n\n\nexport interface RegistryViewProps\n<Items extends ItemClassConfigurationSet = Record<string, ItemClassConfiguration<any>>>\nextends RegisterConfiguration<Items> {\n  /**\n   * When search is initially opened, have this query pre-defined.\n   * Not very useful since there are also preset searches in the browser now.\n   */\n  // TODO: Obsoluete?\n  defaultSearchCriteria?: CriteriaGroup\n\n  /**\n   * Default predicate for matching items\n   * using quick search.\n   *\n   * Must return the search expression as text.\n   *\n   * Search expression must return a boolean and can access:\n   *\n   * - `obj`, which *should* be a RegisterItem instance\n   *   with `obj.data` being its class-specific payload.\n   *\n   * E.g., if all important item classes in your register\n   * specify a `name` field:\n   *\n   * @example (searchQuery) => `obj.data?.name?.toLowerCase().indexOf(\"${searchQuery.toLowerCase()}\") >= 0`\n   */\n  getQuickSearchPredicate?: (quickSearchQuery: string) => string\n\n  /**\n   * Extension-provided additional views that don’t correspond\n   * to entities like register item, change request, etc. handled by RegistryKit.\n   */\n  customViews?: CustomViewConfiguration[]\n}\n\nexport interface CustomViewConfiguration {\n  id: string\n  label: string\n  description: string\n  view: React.FC<{\n    /** View can support optional path for custom state/inner navigation (provisional). */\n    path: string\n  }>\n  icon?: JSX.Element\n}\n\n\n// Item views\n\nexport interface ItemAction {\n  getButtonProps:\n    (item: RegisterItem<any>, itemClass: ItemClassConfiguration<any>, subregisterID?: string) =>\n      ButtonProps | MenuItemProps\n}\n\nexport type RegistryView = React.FC<RegistryViewProps>\n\ntype RegistryItemPayloadDefaults<P extends Payload> =\n  Partial<Omit<P, 'id'>>;\n\n/**\n * A small part of item class configuration,\n * useful e.g. for formatting related items.\n */\nexport type RelatedItemClassConfiguration = {\n  title: string\n  itemView: ItemListView<any>\n}\n\n\nexport interface RegistryItemViewProps<P extends Payload> {\n  /**\n   * Item reference.\n   * Glossarist, for example, uses it to determine language subregister and set appropriate writing direction.\n   */\n  itemRef: Omit<InternalItemReference, 'itemID'> & { itemID?: InternalItemReference['itemID'] }\n\n  /** Item data (payload). */\n  itemData: P\n\n  className?: string\n  //subregisterID?: string\n\n  /** Deprecated */\n  useRegisterItemData?: any\n  /** Deprecated */\n  getRelatedItemClassConfiguration?: any\n}\n\nexport interface GenericRelatedItemViewProps {\n  /** Currently selected item’s ref. */\n  itemRef?: InternalItemReference\n\n  /**\n   * By default, clicking the item will spawn a tab via TabbedWorkspace context.\n   * This prop can customize that behavior.\n   */\n  onJump?: () => void\n\n  className?: string\n\n  /**\n   * Determines which item classes can be selected in the search dialog.\n   * If undefined, *any* class can be chosen.\n   * If empty list, no class can be chosen (weird).\n   */\n  availableClassIDs?: string[]\n\n  // XXX: Check if obsolete, remove if unused\n  itemSorter?: ItemClassConfiguration<any>[\"itemSorter\"]\n\n  /** Called to auto-create an item (can’t auto-create if not provided) */\n  onCreateNew?: () => Promise<InternalItemReference>\n\n  /** Called when current item is cleared (can’t clear if not provided) */\n  onClear?: () => void\n\n  /** Called when a new item is selected (can’t change if not provided) */\n  onChange?: (newRef: InternalItemReference) => void\n\n  /** @deprecated subregisters no longer supported. */\n  availableSubregisterIDs?: string[]\n\n  /** @deprecated */\n  useRegisterItemData?: any\n  //useRegisterItemData: RegisterItemDataHook\n\n  /** @deprecated */\n  getRelatedItemClassConfiguration?: any\n  //getRelatedItemClassConfiguration: ExtensionContext[\"getRelatedItemClassConfiguration\"]\n}\n\n\nexport type ItemEditView<P extends Payload> = React.FC<ItemEditViewProps<P>>;\n\nexport interface ItemEditViewProps<P extends Payload> extends RegistryItemViewProps<P> {\n  onChange?: (newData: P) => void\n  onCreateRelatedItem?:\n    (classID: string, subregisterID?: string) => Promise<InternalItemReference>\n}\n\nexport interface ItemDetailViewProps<P extends Payload> extends RegistryItemViewProps<P> {\n  //useRegisterItemData: RegisterItemDataHook\n}\n\nexport type ItemDetailView<P extends Payload> = React.FC<ItemDetailViewProps<P>>;\n\nexport interface ItemListViewProps<P extends Payload> extends RegistryItemViewProps<P> {\n}\n\nexport type ItemListView<P extends Payload> = React.FC<ItemListViewProps<P>>;\n\nexport type LazyItemView = React.FC<{ itemID: string }>;\n"]}
+{"version":3,"file":"views.js","sourceRoot":"","sources":["../../src/types/views.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { ButtonProps, MenuItemProps } from '@blueprintjs/core';\nimport type { ObjectDatasetRequest, ObjectDatasetResponse, ValueHook } from '@riboseinc/paneron-extension-kit/types';\nimport type { InternalItemReference, Payload, RegisterItem, RegisterItemClass } from './item';\nimport type { CriteriaGroup } from '../views/FilterCriteria/models';\n\n\n// Hooks\n\n/**\n * Mostly a wrapper around useObjectData, but coerces value type\n * (TODO: validate!) and takes into account change request from any\n * wrapping change request context. If a change request is present,\n * will substitute proposed item data unless `ignoreActiveCR` is set.\n *\n * NOTE: Despite the name, returns the entire RegisterItem,\n * not just the `.data` property with item payload.\n */\nexport type RegisterItemDataHook<P extends Payload = Payload> =\n  (opts: { itemPaths: string[], ignoreActiveCR?: true }) => ValueHook<Record<string, RegisterItem<P> | null>>;\n\n\n// Extension configuration\n\n// TODO: Obsolete?\n// export interface ExtensionContext {\n//   getRelatedItemClassConfiguration: (classID: string) => RelatedItemClassConfiguration\n//   useRegisterItemData: RegisterItemDataHook\n//   onJump?: () => void\n// }\n\nexport interface RegisterConfiguration\n<Items extends ItemClassConfigurationSet = Record<string, ItemClassConfiguration<any>>> {\n  /**\n   * Configuration for all items in this register.\n   * This includes items in subregisters.\n   */\n  itemClassConfiguration: Items\n\n  /**\n   * Default expression used to sort an item.\n   * Passed to useFilteredIndex().\n   */\n  keyExpression?: string\n\n  /** Subregister information. */\n  subregisters?: Subregisters<Items>\n}\n\nexport type Subregisters\n<Items extends ItemClassConfigurationSet = Record<string, ItemClassConfiguration<any>>> = {\n  [subregisterID: string]: {\n    title: string\n\n    /** Names of item classes that go in this subregister. */\n    itemClasses: (keyof Items)[]\n  }\n};\n\nexport type ItemClassConfigurationSet = {\n  [itemClassID: string]: ItemClassConfiguration<any>\n};\n\n\n\nexport interface ExportFormatConfiguration<P extends Payload> {\n  /** The name of the export format. */\n  label: string\n\n  /**\n   * Trailing part of the filename to save export as;\n   * must include at least extension (with separator),\n   * must not include any path prefix.\n   */\n  filenameExtension: string\n\n  /**\n   * The function that takes register item data and some helper functions\n   * and is expected to return a blob.\n   */\n  exportItem: (\n    itemData: RegisterItem<P>,\n    opts: {\n      getObjectData: (opts: ObjectDatasetRequest) => Promise<ObjectDatasetResponse>,\n      getBlob: (val: string) => Promise<Uint8Array>,\n      logger?: { log: Console[\"log\"], error: Console[\"error\"], debug: Console[\"debug\"] },\n    },\n  ) => Promise<Uint8Array>\n}\n\n\nexport interface ItemClassConfiguration<P extends Payload/*, F extends Field*/> {\n  meta: RegisterItemClass\n\n  itemCanBeSuperseded?: boolean\n  // If false, items of this class cannot be superseded, only retired.\n  // Default is true.\n\n  /** Used to pre-populate item data e.g. when a new item is created. */\n  defaults?: RegistryItemPayloadDefaults<P>\n\n  validatePayload?: (item: P) => Promise<boolean>\n  sanitizePayload?: (item: P) => Promise<P>\n\n  // XXX: Confirm if obsolete and remove\n  itemSorter?: (a: P, b: P) => number\n\n  /**\n   * Expression used to sort an item of this class.\n   * Passed to useFilteredIndex().\n   */\n  keyExpression?: string\n\n  exportFormats?: Readonly<ExportFormatConfiguration<P>[]>\n\n  views: {\n    listItemView: ItemListView<P>\n    editView: ItemEditView<P>\n    detailView?: ItemDetailView<P>\n  }\n}\n\n\nexport interface RegistryViewProps\n<Items extends ItemClassConfigurationSet = Record<string, ItemClassConfiguration<any>>>\nextends RegisterConfiguration<Items> {\n  /**\n   * When search is initially opened, have this query pre-defined.\n   * Not very useful since there are also preset searches in the browser now.\n   */\n  // TODO: Obsoluete?\n  defaultSearchCriteria?: CriteriaGroup\n\n  /**\n   * Default predicate for matching items\n   * using quick search.\n   *\n   * Must return the search expression as text.\n   *\n   * Search expression must return a boolean and can access:\n   *\n   * - `obj`, which *should* be a RegisterItem instance\n   *   with `obj.data` being its class-specific payload.\n   *\n   * E.g., if all important item classes in your register\n   * specify a `name` field:\n   *\n   * @example (searchQuery) => `obj.data?.name?.toLowerCase().indexOf(\"${searchQuery.toLowerCase()}\") >= 0`\n   */\n  getQuickSearchPredicate?: (quickSearchQuery: string) => string\n\n  /**\n   * Extension-provided additional views that don’t correspond\n   * to entities like register item, change request, etc. handled by RegistryKit.\n   */\n  customViews?: CustomViewConfiguration[]\n}\n\nexport interface CustomViewConfiguration {\n  id: string\n  label: string\n  description: string\n  view: React.FC<{\n    /** View can support optional path for custom state/inner navigation (provisional). */\n    path: string\n  }>\n  icon?: JSX.Element\n}\n\n\n// Item views\n\nexport interface ItemAction {\n  getButtonProps:\n    (item: RegisterItem<any>, itemClass: ItemClassConfiguration<any>, subregisterID?: string) =>\n      ButtonProps | MenuItemProps\n}\n\nexport type RegistryView = React.FC<RegistryViewProps>\n\ntype RegistryItemPayloadDefaults<P extends Payload> =\n  Partial<Omit<P, 'id'>>;\n\n/**\n * A small part of item class configuration,\n * useful e.g. for formatting related items.\n */\nexport type RelatedItemClassConfiguration = {\n  title: string\n  itemView: ItemListView<any>\n}\n\n\nexport interface RegistryItemViewProps<P extends Payload> {\n  /**\n   * Item reference.\n   * Glossarist, for example, uses it to determine language subregister and set appropriate writing direction.\n   */\n  itemRef: Omit<InternalItemReference, 'itemID'> & { itemID?: InternalItemReference['itemID'] }\n\n  /** Item data (payload). */\n  itemData: P\n\n  className?: string\n  //subregisterID?: string\n\n  /** Deprecated */\n  useRegisterItemData?: any\n  /** Deprecated */\n  getRelatedItemClassConfiguration?: any\n}\n\nexport interface GenericRelatedItemViewProps {\n  /** Currently selected item’s ref. */\n  itemRef?: InternalItemReference\n\n  /** Allows to grab a ref of the input displaying the selected item. */\n  inputRef?: React.Ref<HTMLInputElement>\n\n  /**\n   * By default, clicking the item will spawn a tab via TabbedWorkspace context.\n   * This prop can customize that behavior.\n   */\n  onJump?: () => void\n\n  className?: string\n\n  /**\n   * Determines which item classes can be selected in the search dialog.\n   * If undefined, *any* class can be chosen.\n   * If empty list, no class can be chosen (weird).\n   */\n  availableClassIDs?: string[]\n\n  // XXX: Check if obsolete, remove if unused\n  itemSorter?: ItemClassConfiguration<any>[\"itemSorter\"]\n\n  /** Called to auto-create an item (can’t auto-create if not provided) */\n  onCreateNew?: () => Promise<InternalItemReference>\n\n  /** Called when current item is cleared (can’t clear if not provided) */\n  onClear?: () => void\n\n  /** Called when a new item is selected (can’t change if not provided) */\n  onChange?: (newRef: InternalItemReference) => void\n\n  /** @deprecated subregisters no longer supported. */\n  availableSubregisterIDs?: string[]\n\n  /** @deprecated */\n  useRegisterItemData?: any\n  //useRegisterItemData: RegisterItemDataHook\n\n  /** @deprecated */\n  getRelatedItemClassConfiguration?: any\n  //getRelatedItemClassConfiguration: ExtensionContext[\"getRelatedItemClassConfiguration\"]\n}\n\n\nexport type ItemEditView<P extends Payload> = React.FC<ItemEditViewProps<P>>;\n\nexport interface ItemEditViewProps<P extends Payload> extends RegistryItemViewProps<P> {\n  onChange?: (newData: P) => void\n  onCreateRelatedItem?:\n    (classID: string, subregisterID?: string) => Promise<InternalItemReference>\n}\n\nexport interface ItemDetailViewProps<P extends Payload> extends RegistryItemViewProps<P> {\n  //useRegisterItemData: RegisterItemDataHook\n}\n\nexport type ItemDetailView<P extends Payload> = React.FC<ItemDetailViewProps<P>>;\n\nexport interface ItemListViewProps<P extends Payload> extends RegistryItemViewProps<P> {\n}\n\nexport type ItemListView<P extends Payload> = React.FC<ItemListViewProps<P>>;\n\nexport type LazyItemView = React.FC<{ itemID: string }>;\n"]}

package/views/GenericRelatedItemView.d.ts

@@ -1,6 +1,9 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
 import React from 'react';
+import { type ControlGroupProps } from '@blueprintjs/core';
 import { type GenericRelatedItemViewProps } from '../types';
-export declare const GenericRelatedItemView: React.FC<GenericRelatedItemViewProps>;
+export declare const GenericRelatedItemView: React.FC<GenericRelatedItemViewProps & {
+    controlGroupProps?: ControlGroupProps;
+}>;
 export default GenericRelatedItemView;

package/views/GenericRelatedItemView.js

@@ -7,7 +7,7 @@ exports.default = exports.GenericRelatedItemView = void 0;
 
 var _react = require("@emotion/react");
 
-var _react2 = require("react");
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _core = require("@blueprintjs/core");
 
@@ -25,6 +25,10 @@ var _ItemDrawer = _interopRequireDefault(require("./ItemDrawer"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /** @jsx jsx */
 
 /** @jsxFrag React.Fragment */
@@ -41,7 +45,9 @@ const GenericRelatedItemView = function ({
   onClear,
   onChange,
   availableClassIDs,
-  onJump // availableSubregisterIDs,
+  onJump,
+  inputRef,
+  controlGroupProps // availableSubregisterIDs,
   // itemSorter,
 
 }) {
@@ -98,28 +104,27 @@ const GenericRelatedItemView = function ({
 
     return availableClassIDs !== null && availableClassIDs !== void 0 ? availableClassIDs : ((_a = itemRef === null || itemRef === void 0 ? void 0 : itemRef.classID) !== null && _a !== void 0 ? _a : '') !== '' ? [itemRef.classID] : [];
   }, [availableClassIDs === null || availableClassIDs === void 0 ? void 0 : availableClassIDs.join(','), itemRef === null || itemRef === void 0 ? void 0 : itemRef.classID]);
-
-  function jump() {
-    //jumpToItem?.(classID, itemID, subregisterID);
-    onJump ? onJump() : jumpTo === null || jumpTo === void 0 ? void 0 : jumpTo(`${_protocolRegistry.Protocols.ITEM_DETAILS}:/${itemPathWithSubregister}`);
-  }
-
   const hasItem = item !== null && classConfigured && (0, _types.isRegisterItem)(item);
   const itemIsMissing = itemID !== '' && item === null && !itemResult.isUpdating;
   const willShowItemView = hasItem || itemIsMissing || !onChange;
   const canJump = (item !== null || itemIsMissing) && classConfigured && !itemResult.isUpdating && (onJump || jumpTo);
+  const jump = (0, _react2.useCallback)(function jump() {
+    return onJump ? onJump() : jumpTo === null || jumpTo === void 0 ? void 0 : jumpTo(`${_protocolRegistry.Protocols.ITEM_DETAILS}:/${itemPathWithSubregister}`);
+  }, [onJump, jumpTo]);
   const itemView = (0, _react2.useMemo)(() => {
+    var _a;
+
     let itemView;
 
     if (hasItem) {
-      itemView = (0, _react.jsx)(Item, {
+      itemView = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(Item, {
         itemRef: {
           classID,
           itemID,
           subregisterID
         },
         itemData: item.data
-      });
+      }), "\u2003", (0, _react.jsx)("small", null, (_a = cfg.title) !== null && _a !== void 0 ? _a : 'unknown class'));
     } else {
       if (itemIsMissing) {
         itemView = (0, _react.jsx)("span", null, "Item not found: ", itemID !== null && itemID !== void 0 ? itemID : 'N/A');
@@ -181,26 +186,38 @@ const GenericRelatedItemView = function ({
     return itemButtons;
   }, [itemID, itemResult.isUpdating, onCreateNew, onChange, onClear]); //log.debug("Rendering generic related item view: got item", item);
 
-  return (0, _react.jsx)(_core.ButtonGroup, {
-    fill: true,
+  return (0, _react.jsx)(_core.ControlGroup, {
     dir: "ltr",
     className: className,
-    css: (0, _react.css)`.bp4-button-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }`
-  }, classID ? (0, _react.jsx)(_core.Button, {
-    alignText: "left",
-    css: (0, _react.css)`width: 180px;`,
-    title: `Item class: ${(_b = cfg.title) !== null && _b !== void 0 ? _b : "N/A"}`,
-    outlined: true,
-    disabled: true
-  }, (_c = cfg.title) !== null && _c !== void 0 ? _c : "Class N/A") : null, willShowItemView ? (0, _react.jsx)(_core.Button, {
-    alignText: "left",
+    title: hasItem ? `${(_b = cfg.title) !== null && _b !== void 0 ? _b : 'unknown class'} item ${itemID !== null && itemID !== void 0 ? itemID : 'with unknown ID'}` : undefined,
+    ...controlGroupProps
+  }, (0, _react.jsx)(_core.InputGroup, {
     fill: hasItem,
+    readOnly: !onChange && !onClear,
+    onChange: () => void 0,
+    inputRef: inputRef,
+    css: (0, _react.css)`
+          /* leftElement which displays itemView */
+          .bp4-input-left-container {
+            top: unset;
+            bottom: .45em;
+            padding-left: 10px;
+            padding-right: 5px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            max-width: 70%;
+          }
+        `,
+    leftElement: itemView,
+    value: itemID !== null && itemID !== void 0 ? itemID : '',
+    title: hasItem ? `${(_c = cfg.title) !== null && _c !== void 0 ? _c : 'unknown class'} item ${itemID !== null && itemID !== void 0 ? itemID : 'with unknown ID'}` : undefined
+  }), canJump ? (0, _react.jsx)(_core.Button, {
     outlined: true,
-    disabled: !canJump,
     onClick: jump,
-    loading: itemResult.isUpdating,
-    title: hasItem ? `${cfg.title} (click to jump to item)` : undefined
-  }, itemView) : null, itemButtons.map((props, idx) => (0, _react.jsx)(_core.Button, {
+    icon: "open-application"
+  }) : null, itemButtons.map((props, idx) => (0, _react.jsx)(_core.Button, {
     key: idx,
     outlined: true,
     ...props

package/views/GenericRelatedItemView.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenericRelatedItemView.js","sourceRoot":"","sources":["../../src/views/GenericRelatedItemView.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @jsx jsx */\n/** @jsxFrag React.Fragment */\n\nimport { jsx, css } from '@emotion/react';\nimport React, { useContext, useMemo, useState } from 'react';\nimport { Button, ButtonGroup, type ButtonProps } from '@blueprintjs/core';\nimport {\n  type GenericRelatedItemViewProps,\n  type RelatedItemClassConfiguration,\n  isRegisterItem,\n} from '../types';\nimport { BrowserCtx } from './BrowserCtx';\nimport { ChangeRequestContext } from './change-request/ChangeRequestContext';\nimport { isDrafted } from '../types/cr';\nimport { Protocols } from './protocolRegistry';\nimport ItemSearchDrawer from './ItemDrawer';\n\n\nconst DUMMY_REF = {\n  classID: '',\n  itemID: '',\n  subregisterID: '',\n} as const;\n\n\nexport const GenericRelatedItemView: React.FC<GenericRelatedItemViewProps> = function ({\n  itemRef, className,\n  onCreateNew, onClear, onChange,\n  availableClassIDs,\n  onJump,\n  // availableSubregisterIDs,\n  // itemSorter,\n}) {\n  const {\n    useRegisterItemData,\n    getRelatedItemClassConfiguration,\n    jumpTo,\n  } = useContext(BrowserCtx);\n  const { changeRequest: activeChangeRequest } = useContext(ChangeRequestContext);\n  const { classID, itemID, subregisterID } = itemRef ?? DUMMY_REF;\n\n  const itemPathWithClass = `${classID}/${itemID}.yaml`;\n  // If curretn register has subregisters, specify subregister-relative path\n  const itemPathWithSubregister = subregisterID\n    ? `subregisters/${subregisterID}/${itemPathWithClass}`\n    : `${itemPathWithClass}`;\n  // If a change request is active\n  // and this item is among clarifications or additions\n  // then use item path relative to the change request\n  const affectedByActiveCR = (\n    activeChangeRequest &&\n    isDrafted(activeChangeRequest) &&\n    activeChangeRequest.items[itemPathWithSubregister]\n  );\n  const itemPath = affectedByActiveCR\n    ? `/proposals/${activeChangeRequest.id}/items/${itemPathWithSubregister}`\n    : `/${itemPathWithSubregister}`;\n\n  const [selectDialogState, setSelectDialogState] = useState(false);\n\n  //log.debug(\"Rendering generic related item view\", itemRef);\n  //const { jumpToItem } = useContext(BrowserCtx);\n\n  const itemResult = useRegisterItemData({ itemPaths: [itemPath] });\n  const item = (itemResult.value?.[itemPath] || null);\n\n  const [classConfigured, cfg]: [boolean, RelatedItemClassConfiguration] = useMemo(() => {\n    let classConfigured: boolean;\n    let cfg: RelatedItemClassConfiguration;\n    try {\n      cfg = getRelatedItemClassConfiguration(classID);\n      classConfigured = true;\n    } catch (e) {\n      cfg = {\n        title: classID,\n        itemView: () => <span>{itemID}</span>\n      };\n      classConfigured = false;\n    }\n    return [classConfigured, cfg];\n  }, [itemID, classID, getRelatedItemClassConfiguration]);\n\n  const Item = cfg.itemView;\n\n  const classIDs = useMemo((() =>\n    availableClassIDs ?? ((itemRef?.classID ?? '') !== '' ? [itemRef!.classID] : [])\n  ), [availableClassIDs?.join(','), itemRef?.classID]);\n\n  function jump() {\n    //jumpToItem?.(classID, itemID, subregisterID);\n    onJump\n      ? onJump()\n      : jumpTo?.(`${Protocols.ITEM_DETAILS}:/${itemPathWithSubregister}`);\n  }\n\n  const hasItem = item !== null && classConfigured && isRegisterItem(item);\n  const itemIsMissing = itemID !== '' && (item === null && !itemResult.isUpdating);\n  const willShowItemView = hasItem || itemIsMissing || !onChange;\n  const canJump = (item !== null || itemIsMissing) && classConfigured && !itemResult.isUpdating && (onJump || jumpTo);\n\n  const itemView: JSX.Element | null = useMemo(() => {\n    let itemView: JSX.Element | null;\n\n    if (hasItem) {\n      itemView = <Item\n        itemRef={{ classID, itemID, subregisterID }}\n        itemData={item.data}\n      />;\n    } else {\n      if (itemIsMissing) {\n        itemView = <span>Item not found: {itemID ?? 'N/A'}</span>;\n      } else {\n        itemView = <span>Item not specified</span>;\n      }\n    }\n    return itemView;\n  }, [itemID, classID, subregisterID, item, hasItem, itemIsMissing]);\n\n  const itemButtons = useMemo(() => {\n    const canAutoCreateRelatedItem = itemID === '' && onCreateNew && !itemResult.isUpdating;\n    const canChangeRelatedItem = /*classIDs.length >= 1 && */onChange && !itemResult.isUpdating;\n    const canClear = onClear && itemID !== '' && !itemResult.isUpdating;\n\n    let itemButtons: (ButtonProps & { title: string })[] = [];\n\n    async function handleCreateNew() {\n      if (!onCreateNew) { return; }\n      const itemRef = await onCreateNew();\n      console.debug(\"Created new item\", itemRef);\n    }\n\n    if (!hasItem && canAutoCreateRelatedItem) {\n      itemButtons.push({\n        onClick: handleCreateNew,\n        icon: 'add',\n        text: 'Auto create',\n        intent: 'primary',\n        title: \"Automatically create new item\",\n      });\n    }\n    if (canChangeRelatedItem) {\n      itemButtons.push({\n        onClick: () => setSelectDialogState(true),\n        icon: 'edit',\n        text: willShowItemView ? undefined : 'Specify',\n        intent: 'primary',\n        title: \"Select related item\",\n        /*disabled: classIDs.length < 1,*/\n      });\n    }\n    if (canClear) {\n      itemButtons.push({\n        onClick: onClear,\n        icon: 'eraser',\n        intent: 'danger',\n        title: \"Clear related item selection\",\n      });\n    }\n\n    return itemButtons;\n  }, [itemID, itemResult.isUpdating, onCreateNew, onChange, onClear]);\n\n  //log.debug(\"Rendering generic related item view: got item\", item);\n  return (\n    <ButtonGroup\n        fill\n        dir=\"ltr\"\n        className={className}\n        css={css`.bp4-button-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }`}>\n\n      {classID\n        ? <Button\n              alignText=\"left\"\n              css={css`width: 180px;`}\n              title={`Item class: ${cfg.title ?? \"N/A\"}`}\n              outlined disabled>\n            {cfg.title ?? \"Class N/A\"}\n          </Button>\n        : null}\n\n      {willShowItemView\n        ? <Button\n              alignText=\"left\"\n              fill={hasItem} outlined\n              disabled={!canJump}\n              onClick={jump}\n              loading={itemResult.isUpdating}\n              title={hasItem\n                ? `${cfg.title} (click to jump to item)`\n                : undefined}>\n            {itemView}\n          </Button>\n        : null}\n\n      {itemButtons.map((props, idx) =>\n        <Button key={idx} outlined {...props} />\n      )}\n\n      {onChange\n        ? <ItemSearchDrawer\n            isOpen={selectDialogState}\n            onClose={() => setSelectDialogState(false)}\n            onChooseItem={onChange}\n            availableClassIDs={classIDs}\n          />\n        : null}\n    </ButtonGroup>\n  );\n};\n\n\nexport default GenericRelatedItemView;\n"]}
+{"version":3,"file":"GenericRelatedItemView.js","sourceRoot":"","sources":["../../src/views/GenericRelatedItemView.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @jsx jsx */\n/** @jsxFrag React.Fragment */\n\nimport { jsx, css } from '@emotion/react';\nimport React, { useContext, useCallback, useMemo, useState } from 'react';\nimport { InputGroup, Button, ControlGroup, type ControlGroupProps, type ButtonProps } from '@blueprintjs/core';\nimport {\n  type GenericRelatedItemViewProps,\n  type RelatedItemClassConfiguration,\n  isRegisterItem,\n} from '../types';\nimport { BrowserCtx } from './BrowserCtx';\nimport { ChangeRequestContext } from './change-request/ChangeRequestContext';\nimport { isDrafted } from '../types/cr';\nimport { Protocols } from './protocolRegistry';\nimport ItemSearchDrawer from './ItemDrawer';\n\n\nconst DUMMY_REF = {\n  classID: '',\n  itemID: '',\n  subregisterID: '',\n} as const;\n\n\nexport const GenericRelatedItemView: React.FC<GenericRelatedItemViewProps & {\n  controlGroupProps?: ControlGroupProps\n}> = function ({\n  itemRef, className,\n  onCreateNew, onClear, onChange,\n  availableClassIDs,\n  onJump,\n  inputRef,\n  controlGroupProps,\n  // availableSubregisterIDs,\n  // itemSorter,\n}) {\n  const {\n    useRegisterItemData,\n    getRelatedItemClassConfiguration,\n    jumpTo,\n  } = useContext(BrowserCtx);\n  const { changeRequest: activeChangeRequest } = useContext(ChangeRequestContext);\n  const { classID, itemID, subregisterID } = itemRef ?? DUMMY_REF;\n\n  const itemPathWithClass = `${classID}/${itemID}.yaml`;\n  // If curretn register has subregisters, specify subregister-relative path\n  const itemPathWithSubregister = subregisterID\n    ? `subregisters/${subregisterID}/${itemPathWithClass}`\n    : `${itemPathWithClass}`;\n  // If a change request is active\n  // and this item is among clarifications or additions\n  // then use item path relative to the change request\n  const affectedByActiveCR = (\n    activeChangeRequest &&\n    isDrafted(activeChangeRequest) &&\n    activeChangeRequest.items[itemPathWithSubregister]\n  );\n  const itemPath = affectedByActiveCR\n    ? `/proposals/${activeChangeRequest.id}/items/${itemPathWithSubregister}`\n    : `/${itemPathWithSubregister}`;\n\n  const [selectDialogState, setSelectDialogState] = useState(false);\n\n  //log.debug(\"Rendering generic related item view\", itemRef);\n  //const { jumpToItem } = useContext(BrowserCtx);\n\n  const itemResult = useRegisterItemData({ itemPaths: [itemPath] });\n  const item = (itemResult.value?.[itemPath] || null);\n\n  const [classConfigured, cfg]: [boolean, RelatedItemClassConfiguration] = useMemo(() => {\n    let classConfigured: boolean;\n    let cfg: RelatedItemClassConfiguration;\n    try {\n      cfg = getRelatedItemClassConfiguration(classID);\n      classConfigured = true;\n    } catch (e) {\n      cfg = {\n        title: classID,\n        itemView: () => <span>{itemID}</span>\n      };\n      classConfigured = false;\n    }\n    return [classConfigured, cfg];\n  }, [itemID, classID, getRelatedItemClassConfiguration]);\n\n  const Item = cfg.itemView;\n\n  const classIDs = useMemo((() =>\n    availableClassIDs ?? ((itemRef?.classID ?? '') !== '' ? [itemRef!.classID] : [])\n  ), [availableClassIDs?.join(','), itemRef?.classID]);\n\n  const hasItem = item !== null && classConfigured && isRegisterItem(item);\n  const itemIsMissing = itemID !== '' && (item === null && !itemResult.isUpdating);\n  const willShowItemView = hasItem || itemIsMissing || !onChange;\n  const canJump = (item !== null || itemIsMissing) && classConfigured && !itemResult.isUpdating && (onJump || jumpTo);\n\n  const jump = useCallback(function jump() {\n    return onJump\n      ? onJump()\n      : jumpTo?.(`${Protocols.ITEM_DETAILS}:/${itemPathWithSubregister}`);\n  }, [onJump, jumpTo]);\n\n  const itemView: JSX.Element | null = useMemo(() => {\n    let itemView: JSX.Element | null;\n\n    if (hasItem) {\n      itemView = <>\n        <Item\n          itemRef={{ classID, itemID, subregisterID }}\n          itemData={item.data}\n        />&emsp;<small>{cfg.title ?? 'unknown class'}</small>\n      </>;\n    } else {\n      if (itemIsMissing) {\n        itemView = <span>Item not found: {itemID ?? 'N/A'}</span>;\n      } else {\n        itemView = <span>Item not specified</span>;\n      }\n    }\n    return itemView;\n  }, [itemID, classID, subregisterID, item, hasItem, itemIsMissing]);\n\n  const itemButtons = useMemo(() => {\n    const canAutoCreateRelatedItem = itemID === '' && onCreateNew && !itemResult.isUpdating;\n    const canChangeRelatedItem = /*classIDs.length >= 1 && */onChange && !itemResult.isUpdating;\n    const canClear = onClear && itemID !== '' && !itemResult.isUpdating;\n\n    let itemButtons: (ButtonProps & { title: string })[] = [];\n\n    async function handleCreateNew() {\n      if (!onCreateNew) { return; }\n      const itemRef = await onCreateNew();\n      console.debug(\"Created new item\", itemRef);\n    }\n\n    if (!hasItem && canAutoCreateRelatedItem) {\n      itemButtons.push({\n        onClick: handleCreateNew,\n        icon: 'add',\n        text: 'Auto create',\n        intent: 'primary',\n        title: \"Automatically create new item\",\n      });\n    }\n    if (canChangeRelatedItem) {\n      itemButtons.push({\n        onClick: () => setSelectDialogState(true),\n        icon: 'edit',\n        text: willShowItemView ? undefined : 'Specify',\n        intent: 'primary',\n        title: \"Select related item\",\n        /*disabled: classIDs.length < 1,*/\n      });\n    }\n    if (canClear) {\n      itemButtons.push({\n        onClick: onClear,\n        icon: 'eraser',\n        intent: 'danger',\n        title: \"Clear related item selection\",\n      });\n    }\n\n    return itemButtons;\n  }, [itemID, itemResult.isUpdating, onCreateNew, onChange, onClear]);\n\n  //log.debug(\"Rendering generic related item view: got item\", item);\n  return (\n    <ControlGroup\n        dir=\"ltr\"\n        className={className}\n        title={hasItem\n          ? `${cfg.title ?? 'unknown class'} item ${itemID ?? 'with unknown ID'}`\n          : undefined}\n        {...controlGroupProps}>\n\n      <InputGroup\n        fill={hasItem}\n        readOnly={!onChange && !onClear}\n        onChange={() => void 0}\n        inputRef={inputRef}\n        css={css`\n          /* leftElement which displays itemView */\n          .bp4-input-left-container {\n            top: unset;\n            bottom: .45em;\n            padding-left: 10px;\n            padding-right: 5px;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n\n            max-width: 70%;\n          }\n        `}\n        leftElement={itemView}\n        value={itemID ?? ''}\n        title={hasItem\n          ? `${cfg.title ?? 'unknown class'} item ${itemID ?? 'with unknown ID'}`\n          : undefined}\n      />\n\n      {canJump\n        ? <Button outlined onClick={jump} icon=\"open-application\" />\n        : null}\n\n      {itemButtons.map((props, idx) =>\n        <Button key={idx} outlined {...props} />\n      )}\n\n      {onChange\n        ? <ItemSearchDrawer\n            isOpen={selectDialogState}\n            onClose={() => setSelectDialogState(false)}\n            onChooseItem={onChange}\n            availableClassIDs={classIDs}\n          />\n        : null}\n    </ControlGroup>\n  );\n};\n\n\nexport default GenericRelatedItemView;\n"]}

package/views/ItemDrawer.js

@@ -47,6 +47,7 @@ const ItemSearchDrawer = function ({
     isOpen: isOpen,
     onClose: onClose,
     enforceFocus: false,
+    size: "50vw",
     style: {
       padding: '0',
       width: 'unset'
@@ -54,9 +55,9 @@ const ItemSearchDrawer = function ({
   }, (0, _react.jsx)(_Search.default, {
     style: {
       height: '100vh',
-      width: '80vw',
+      width: '50vw',
       minWidth: '500px',
-      maxWidth: '100vw'
+      maxWidth: '90vw'
     },
     availableClassIDs: availableClassIDs,
     implicitCriteria: implicitCriteria,

package/views/ItemDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemDrawer.js","sourceRoot":"","sources":["../../src/views/ItemDrawer.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,8BAA8B;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAc,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,gBAAgB,GAKjB,UAAU,EACb,MAAM,EAAE,OAAO,EAAE,YAAY,EAC7B,iBAAiB,GAClB;IACC,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEhD,MAAM,aAAa,GAAgB,OAAO,CAAC,GAAG,EAAE,CAAC,CAC/C,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC9B,GAAG,EAAE,YAAY;QACjB,KAAK,EAAE,sBAAsB,KAAK,WAAW;KAC9C,CAAC,CAAC,CACJ,EAAE,CAAC,iBAAiB,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAEnC,MAAM,gBAAgB,GAA8B,OAAO,CAAC,GAAG,EAAE,CAAC,CAChE,aAAa,CAAC,MAAM,GAAG,CAAC;QACtB,CAAC,CAAC;YACE,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,aAAa;SACxB;QACH,CAAC,CAAC,SAAS,CACd,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE;QAC9C,YAAY,CAAC,iBAAiB,CAAC,YAAY,KAAK,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;QACtE,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,IAAC,MAAM,IACH,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,KAAK,EACnB,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE;QACzC,IAAC,MAAM,IACL,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,EAC/E,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAC,kCAAkC,EAC5C,UAAU,EAAE,cAAc,GAC1B,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AAGF,eAAe,gBAAgB,CAAC","sourcesContent":["/** @jsx jsx */\n/** @jsxFrag React.Fragment */\n\nimport { jsx } from '@emotion/react';\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { Drawer } from '@blueprintjs/core';\nimport type { InternalItemReference } from '../types';\nimport type { Criterion, CriteriaGroup } from './FilterCriteria/models';\nimport { BrowserCtx } from './BrowserCtx';\nimport Search from './sidebar/Search';\nimport { itemPathToItemRef } from './itemPathUtils';\n\n\nconst ItemSearchDrawer: React.FC<{\n  isOpen: boolean\n  onClose: () => void\n  onChooseItem: (itemRef: InternalItemReference) => void\n  availableClassIDs: string[]\n}> = function ({\n  isOpen, onClose, onChooseItem,\n  availableClassIDs,\n}) {\n  const { subregisters } = useContext(BrowserCtx);\n\n  const classCriteria: Criterion[] = useMemo(() => (\n    availableClassIDs.map(clsID => ({\n      key: 'item-class',\n      query: `objPath.indexOf(\\\"/${clsID}/\\\") >= 0`,\n    }))\n  ), [availableClassIDs.toString()]);\n\n  const implicitCriteria: CriteriaGroup | undefined = useMemo(() => (\n    classCriteria.length > 0\n      ? {\n          require: 'any',\n          criteria: classCriteria,\n        }\n      : undefined\n  ), [classCriteria]);\n\n  const handleOpenItem = useCallback((itemPath) => {\n    onChooseItem(itemPathToItemRef(subregisters !== undefined, itemPath));\n    onClose();\n  }, [onChooseItem, onClose]);\n\n  return (\n    <Drawer\n        isOpen={isOpen}\n        onClose={onClose}\n        enforceFocus={false}\n        style={{ padding: '0', width: 'unset' }}>\n      <Search\n        style={{ height: '100vh', width: '80vw', minWidth: '500px', maxWidth: '100vw' }}\n        availableClassIDs={availableClassIDs}\n        implicitCriteria={implicitCriteria}\n        stateName=\"superseding-item-selector-search\"\n        onOpenItem={handleOpenItem}\n      />\n    </Drawer>\n  );\n};\n\n\nexport default ItemSearchDrawer;\n"]}
+{"version":3,"file":"ItemDrawer.js","sourceRoot":"","sources":["../../src/views/ItemDrawer.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,8BAA8B;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAc,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,gBAAgB,GAKjB,UAAU,EACb,MAAM,EAAE,OAAO,EAAE,YAAY,EAC7B,iBAAiB,GAClB;IACC,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEhD,MAAM,aAAa,GAAgB,OAAO,CAAC,GAAG,EAAE,CAAC,CAC/C,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC9B,GAAG,EAAE,YAAY;QACjB,KAAK,EAAE,sBAAsB,KAAK,WAAW;KAC9C,CAAC,CAAC,CACJ,EAAE,CAAC,iBAAiB,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAEnC,MAAM,gBAAgB,GAA8B,OAAO,CAAC,GAAG,EAAE,CAAC,CAChE,aAAa,CAAC,MAAM,GAAG,CAAC;QACtB,CAAC,CAAC;YACE,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,aAAa;SACxB;QACH,CAAC,CAAC,SAAS,CACd,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE;QAC9C,YAAY,CAAC,iBAAiB,CAAC,YAAY,KAAK,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;QACtE,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,IAAC,MAAM,IACH,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,KAAK,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE;QACzC,IAAC,MAAM,IACL,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAC9E,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAC,kCAAkC,EAC5C,UAAU,EAAE,cAAc,GAC1B,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AAGF,eAAe,gBAAgB,CAAC","sourcesContent":["/** @jsx jsx */\n/** @jsxFrag React.Fragment */\n\nimport { jsx } from '@emotion/react';\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { Drawer } from '@blueprintjs/core';\nimport type { InternalItemReference } from '../types';\nimport type { Criterion, CriteriaGroup } from './FilterCriteria/models';\nimport { BrowserCtx } from './BrowserCtx';\nimport Search from './sidebar/Search';\nimport { itemPathToItemRef } from './itemPathUtils';\n\n\nconst ItemSearchDrawer: React.FC<{\n  isOpen: boolean\n  onClose: () => void\n  onChooseItem: (itemRef: InternalItemReference) => void\n  availableClassIDs: string[]\n}> = function ({\n  isOpen, onClose, onChooseItem,\n  availableClassIDs,\n}) {\n  const { subregisters } = useContext(BrowserCtx);\n\n  const classCriteria: Criterion[] = useMemo(() => (\n    availableClassIDs.map(clsID => ({\n      key: 'item-class',\n      query: `objPath.indexOf(\\\"/${clsID}/\\\") >= 0`,\n    }))\n  ), [availableClassIDs.toString()]);\n\n  const implicitCriteria: CriteriaGroup | undefined = useMemo(() => (\n    classCriteria.length > 0\n      ? {\n          require: 'any',\n          criteria: classCriteria,\n        }\n      : undefined\n  ), [classCriteria]);\n\n  const handleOpenItem = useCallback((itemPath) => {\n    onChooseItem(itemPathToItemRef(subregisters !== undefined, itemPath));\n    onClose();\n  }, [onChooseItem, onClose]);\n\n  return (\n    <Drawer\n        isOpen={isOpen}\n        onClose={onClose}\n        enforceFocus={false}\n        size=\"50vw\"\n        style={{ padding: '0', width: 'unset' }}>\n      <Search\n        style={{ height: '100vh', width: '50vw', minWidth: '500px', maxWidth: '90vw' }}\n        availableClassIDs={availableClassIDs}\n        implicitCriteria={implicitCriteria}\n        stateName=\"superseding-item-selector-search\"\n        onOpenItem={handleOpenItem}\n      />\n    </Drawer>\n  );\n};\n\n\nexport default ItemSearchDrawer;\n"]}

package/views/change-request/Proposals.d.ts

@@ -6,12 +6,13 @@ import type { ChangeProposal, Clarification, InternalItemReference, Payload, Reg
 import type { Drafted } from '../../types/cr';
 interface ProposalBrowserProps<CR extends Drafted> {
     proposals: CR['items'];
+    selectedItem?: (string & keyof CR['items']) | null;
+    onSelectItem: (selectedItem: (string & keyof CR['items']) | null) => void;
     /**
      * If provided, button to delete each proposed change
      * is shown in change card list mode.
      */
     onDeleteProposalForItemAtPath?: (itemPath: string) => void;
-    className?: string;
 }
 /**
  * Shows a list of individual proposed changes as cards by default,
@@ -19,7 +20,7 @@ interface ProposalBrowserProps<CR extends Drafted> {
  *
  * If no proposals exist, returns null.
  */
-export declare function Proposals<CR extends Drafted>({ proposals, onDeleteProposalForItemAtPath, className }: ProposalBrowserProps<CR>): jsx.JSX.Element | null;
+export declare function Proposals<CR extends Drafted>({ proposals, onDeleteProposalForItemAtPath, selectedItem, onSelectItem: selectProposal }: ProposalBrowserProps<CR>): jsx.JSX.Element;
 interface ProposalProps<P extends ChangeProposal> {
     proposal: P;
     /** Highlight changes. */

package/views/change-request/Proposals.js

@@ -59,12 +59,13 @@ function stringifiedJSONEqual(i1, i2) {
 function Proposals({
   proposals,
   onDeleteProposalForItemAtPath,
-  className
+  selectedItem,
+  onSelectItem: selectProposal
 }) {
-  var _a, _b;
+  var _a;
 
-  const [selectedProposal, selectProposal] = (0, _react.useState)(null);
-  const [preferDiff, setPreferDiff] = (0, _react.useState)(false); // TODO: Temporarily unsupported
+  const [preferDiff, setPreferDiff] = (0, _react.useState)(false);
+  const selectedProposal = selectedItem !== null && selectedItem !== void 0 ? selectedItem : null; // TODO: Temporarily unsupported
   // (limitations of current change annotation implementation)
   //const [ showOnlyChanged, setShowOnlyChanged ] = useState(true);
 
@@ -150,156 +151,133 @@ function Proposals({
     };
   }), [proposals, getCurrentItem, getProposedItem]);
   const haveSelectedItem = selectedProposal && selectedItemRef && proposals[selectedProposal] && (selectedItemProposed || selectedItemCurrent);
-  const proposalCount = Object.keys(proposals).length;
-  const selectedProposalDetailRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    // if (!selectedProposal) {
-    //   const firstProposal = Object.keys(proposals)[0];
-    //   if (firstProposal) {
-    //     if (getCurrentItem(firstProposal) || getProposedItem(firstProposal)) {
-    //       selectProposal(firstProposal);
-    //     }
-    //   }
-    // }
-    if (selectedProposal) {
-      if (selectedProposalDetailRef.current) {
-        selectedProposalDetailRef.current.scrollIntoView({
-          block: 'center'
-        });
-      }
-    }
-  }, [selectedProposal === null]);
+  const proposalCount = Object.keys(proposals).length; //useEffect(() => {
+  //  // if (!selectedProposal) {
+  //  //   const firstProposal = Object.keys(proposals)[0];
+  //  //   if (firstProposal) {
+  //  //     if (getCurrentItem(firstProposal) || getProposedItem(firstProposal)) {
+  //  //       selectProposal(firstProposal);
+  //  //     }
+  //  //   }
+  //  // }
+  //  if (selectedProposal) {
+  //    if (selectedProposalDetailRef.current) {
+  //      selectedProposalDetailRef.current.scrollIntoView({ block: 'center' });
+  //    }
+  //  }
+  //}, [selectedProposal === null]);
+
   const canShowDiff = haveSelectedItem && ((_a = proposals[selectedProposal]) === null || _a === void 0 ? void 0 : _a.type) === 'clarification' ? true : false;
   const showDiff = canShowDiff && preferDiff;
+  const selectedItemSummary = haveSelectedItem ? (0, _react2.jsx)(ProposalSummary, {
+    itemRef: selectedItemRef,
+    item: selectedItemProposed !== null && selectedItemProposed !== void 0 ? selectedItemProposed : selectedItemCurrent,
+    itemBefore: selectedItemCurrent !== null && selectedItemCurrent !== void 0 ? selectedItemCurrent : undefined,
+    proposal: proposals[selectedProposal]
+  }) : (0, _react2.jsx)(_react.default.Fragment, null, "Select item\u2026");
+  const icon = haveSelectedItem ? getProposalIcon(proposals[selectedProposal]) : undefined;
+  const selectedItemDrawer = (0, _react.useMemo)(() => {
+    var _a;
 
-  if (!currentItemDataReq.isUpdating && !proposedItemDataReq.isUpdating) {
-    const selectedItemSummary = haveSelectedItem ? (0, _react2.jsx)(ProposalSummary, {
+    return (0, _react2.jsx)(_core.Drawer, {
+      isOpen: proposalCount > 0 && haveSelectedItem ? true : false,
+      onClose: () => selectProposal(null),
+      size: _core.DrawerSize.LARGE,
+      enforceFocus: false
+    }, proposalCount > 0 && haveSelectedItem ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_core.ButtonGroup, null, (0, _react2.jsx)(_core.Button, {
+      disabled: !jumpTo || ((_a = proposals[selectedProposal]) === null || _a === void 0 ? void 0 : _a.type) === 'addition',
+      icon: 'open-application',
+      onClick: () => jumpTo === null || jumpTo === void 0 ? void 0 : jumpTo(`${_protocolRegistry.Protocols.ITEM_DETAILS}:${selectedProposal}`),
+      title: "Open selected item in a new tab (not applicable to proposed additions)"
+    }), (0, _react2.jsx)(_core.Button, {
+      active: preferDiff,
+      onClick: () => setPreferDiff(v => !v),
+      // Diffing only makes sense for clarifications.
+      // Additions are entire new items, and for amendments
+      // item data is unchanged.
+      disabled: !canShowDiff,
+      text: "Compare",
+      title: "Annotate proposed clarifications for this item"
+    }), (0, _react2.jsx)(_react2.ClassNames, null, ({
+      css: css2
+    }) => (0, _react2.jsx)(_select.Select2, {
+      filterable: false,
+      itemsEqual: stringifiedJSONEqual,
+      menuProps: {
+        className: css2(`max-height: 50vh; overflow-y: auto;`)
+      },
+      activeItem: activeItem,
+      items: allItems,
+      popoverProps: {
+        minimal: true,
+        matchTargetWidth: true
+      },
+      fill: true,
+      itemRenderer: ChangeProposalItemView,
+      onItemSelect: handleItemSelect
+    }, (0, _react2.jsx)(_core.Button, {
+      fill: true,
+      rightIcon: "chevron-down",
+      icon: icon,
+      css: (0, _react2.css)`white-space: nowrap;`
+    }, selectedItemSummary))), (0, _react2.jsx)(_core.Button, {
+      onClick: () => selectProposal(null),
+      icon: "minimize",
+      title: "Minimize proposed change view",
+      text: "Minimize"
+    })), (0, _react2.jsx)("div", {
+      css: (0, _react2.css)`position: relative; flex: 1;`
+    }, (0, _react2.jsx)(_BrowserCtx.BrowserCtx.Provider, {
+      value: proposalBrowserCtx
+    }, (0, _react2.jsx)(_ErrorBoundary.default, {
+      viewName: "Proposal detail"
+    }, (0, _react2.jsx)(ProposalDetail, {
       itemRef: selectedItemRef,
+      showDiff: showDiff,
+      //showOnlyChanged={showOnlyChanged}
       item: selectedItemProposed !== null && selectedItemProposed !== void 0 ? selectedItemProposed : selectedItemCurrent,
       itemBefore: selectedItemCurrent !== null && selectedItemCurrent !== void 0 ? selectedItemCurrent : undefined,
       proposal: proposals[selectedProposal]
-    }) : (0, _react2.jsx)(_react.default.Fragment, null, "Select item\u2026");
-    const icon = haveSelectedItem ? getProposalIcon(proposals[selectedProposal]) : undefined;
-
-    if (proposalCount > 0 && haveSelectedItem) {
-      return (0, _react2.jsx)(_core.Card, {
-        key: selectedProposal,
-        elevation: 0,
-        css: (0, _react2.css)`
-              flex: 100%;
-              background: ${_core.Colors.LIGHT_GRAY3};
-              padding: 0;
-              min-height: 70vh;
-
-              overflow: hidden;
-
-              border-radius: 5px;
-              display: flex;
-              flex-flow: column nowrap;
-              transition:
-                width .5s linear
-                height .5s linear;
-            `,
-        className: className
-      }, (0, _react2.jsx)(_core.ButtonGroup, null, (0, _react2.jsx)(_core.Button, {
-        disabled: !jumpTo || ((_b = proposals[selectedProposal]) === null || _b === void 0 ? void 0 : _b.type) === 'addition',
-        icon: 'open-application',
-        onClick: () => jumpTo === null || jumpTo === void 0 ? void 0 : jumpTo(`${_protocolRegistry.Protocols.ITEM_DETAILS}:${selectedProposal}`),
-        title: "Open selected item in a new tab (not applicable to proposed additions)"
-      }), (0, _react2.jsx)(_core.Button, {
-        active: preferDiff,
-        onClick: () => setPreferDiff(v => !v),
-        // Diffing only makes sense for clarifications.
-        // Additions are entire new items, and for amendments
-        // item data is unchanged.
-        disabled: !canShowDiff,
-        text: "Compare",
-        title: "Annotate proposed clarifications for this item"
-      }), (0, _react2.jsx)(_react2.ClassNames, null, ({
-        css: css2
-      }) => (0, _react2.jsx)(_select.Select2, {
-        filterable: false,
-        itemsEqual: stringifiedJSONEqual,
-        menuProps: {
-          className: css2(`max-height: 50vh; overflow-y: auto;`)
-        },
-        activeItem: activeItem,
-        items: allItems,
-        popoverProps: {
-          minimal: true,
-          matchTargetWidth: true
-        },
-        fill: true,
-        itemRenderer: ChangeProposalItemView,
-        onItemSelect: handleItemSelect
-      }, (0, _react2.jsx)(_core.Button, {
-        fill: true,
-        rightIcon: "chevron-down",
-        icon: icon,
-        css: (0, _react2.css)`white-space: nowrap;`
-      }, selectedItemSummary))), (0, _react2.jsx)(_core.Button, {
-        onClick: () => selectProposal(null),
-        icon: "minimize",
-        title: "Minimize proposed change view",
-        text: "Minimize"
-      })), (0, _react2.jsx)("div", {
-        css: (0, _react2.css)`position: relative; flex: 1;`,
-        ref: selectedProposalDetailRef
-      }, (0, _react2.jsx)(_BrowserCtx.BrowserCtx.Provider, {
-        value: proposalBrowserCtx
-      }, (0, _react2.jsx)(_ErrorBoundary.default, {
-        viewName: "Proposal detail"
-      }, (0, _react2.jsx)(ProposalDetail, {
-        itemRef: selectedItemRef,
-        showDiff: showDiff,
-        //showOnlyChanged={showOnlyChanged}
-        item: selectedItemProposed !== null && selectedItemProposed !== void 0 ? selectedItemProposed : selectedItemCurrent,
-        itemBefore: selectedItemCurrent !== null && selectedItemCurrent !== void 0 ? selectedItemCurrent : undefined,
-        proposal: proposals[selectedProposal]
-      })))));
-    } else {
-      return (0, _react2.jsx)(_react.default.Fragment, null, allItems.map(cpi => {
-        const actions = [{
-          onClick: () => selectProposal(cpi.itemPath),
-          text: "Expand",
-          title: "Expand proposed change to see item details",
-          icon: 'maximize'
-        }];
-
-        if (onDeleteProposalForItemAtPath) {
-          actions.push({
-            text: "Delete this proposal",
-            intent: 'danger',
-            onClick: () => onDeleteProposalForItemAtPath(cpi.itemPath),
-            icon: 'trash'
-          });
-        }
-
-        return (0, _react2.jsx)(_Block.HomeBlockCard, {
-          css: (0, _react2.css)`
-                  flex-basis: calc(33.33% - 10px*2/3);
-                `,
-          description: `${cpi.proposal.type} proposal`,
-          key: cpi.itemPath
-        }, (0, _react2.jsx)(ProposalType, {
-          item: cpi
-        }), (0, _react2.jsx)("div", {
-          css: (0, _react2.css)`padding: 5px; flex-grow: 1;`
-        }, cpi.item !== null ? (0, _react2.jsx)(_core.H5, {
-          css: (0, _react2.css)`margin: 0; overflow: hidden; text-overflow: ellipsis;`
-        }, (0, _react2.jsx)(ProposalSummary, {
-          itemRef: cpi.itemRef,
-          proposal: cpi.proposal,
-          itemBefore: cpi.itemBefore,
-          item: cpi.item
-        })) : (0, _react2.jsx)(_react.default.Fragment, null, "Problem reading proposed item data.")), actions.length > 0 ? (0, _react2.jsx)(_Block.HomeBlockActions, {
-          actions: actions
-        }) : null);
-      }));
+    }))))) : null);
+  }, [proposalCount > 0, haveSelectedItem, selectedItemProposed, selectedItemCurrent, preferDiff, jumpTo, handleItemSelect, selectedProposal && proposals[selectedProposal]]);
+  return (0, _react2.jsx)(_react.default.Fragment, null, selectedItemDrawer, allItems.map(cpi => {
+    const actions = [{
+      onClick: () => selectProposal(cpi.itemPath),
+      text: "Expand",
+      title: "Expand proposed change to see item details",
+      icon: 'maximize'
+    }];
+
+    if (onDeleteProposalForItemAtPath) {
+      actions.push({
+        text: "Delete this proposal",
+        intent: 'danger',
+        onClick: () => onDeleteProposalForItemAtPath(cpi.itemPath),
+        icon: 'trash'
+      });
     }
-  } else {
-    return null;
-  }
+
+    return (0, _react2.jsx)(_Block.HomeBlockCard, {
+      css: (0, _react2.css)`
+              flex-basis: calc(33.33% - 10px*2/3);
+            `,
+      description: `${cpi.proposal.type} proposal`,
+      key: cpi.itemPath
+    }, (0, _react2.jsx)(ProposalType, {
+      item: cpi
+    }), (0, _react2.jsx)("div", {
+      css: (0, _react2.css)`padding: 5px; flex-grow: 1;`
+    }, cpi.item !== null ? (0, _react2.jsx)(_core.H5, {
+      css: (0, _react2.css)`margin: 0; overflow: hidden; text-overflow: ellipsis;`
+    }, (0, _react2.jsx)(ProposalSummary, {
+      itemRef: cpi.itemRef,
+      proposal: cpi.proposal,
+      itemBefore: cpi.itemBefore,
+      item: cpi.item
+    })) : (0, _react2.jsx)(_react.default.Fragment, null, "Problem reading proposed item data.")), actions.length > 0 ? (0, _react2.jsx)(_Block.HomeBlockActions, {
+      actions: actions
+    }) : null);
+  }));
 }
 
 ;