@activecollab/components 2.0.408 → 2.0.409

package/dist/cjs/presentation/whiteboard/outline.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.outlineLabel = exports.UNGROUPED = exports.StyledSidebarHeader = exports.StyledPanelChooseSlot = exports.StyledOutlineTypeIcon = exports.StyledOutlineToggle = exports.StyledOutlineSignifiers = exports.StyledOutlineSidebar = exports.StyledOutlineRow = exports.StyledOutlineResizer = exports.StyledOutlineName = exports.StyledOutlineGroupRow = exports.StyledOutlineElementMenu = exports.StyledOutlineCounter = exports.StyledOutlineChildRow = exports.StyledOutlineBody = exports.StyledNewGroupRow = exports.StyledInfoPanel = exports.StyledChooseRow = exports.OutlineMenuSliderStyle = exports.OutlineGroupOptionsMenu = exports.OutlineElementOptionsMenu = exports.OutlineCounter = exports.OUTLINE_WIDTH = exports.OUTLINE_TYPE_LABELS = exports.OUTLINE_TYPE_ICONS = exports.OUTLINE_MIN_WIDTH = exports.OUTLINE_MENU_WIDTH = exports.OUTLINE_MENU_LIST_STYLE = exports.OUTLINE_MAX_WIDTH = exports.OUTLINE_GROUPS = exports.OUTLINE_ELEMENTS = exports.LeftSidebar = exports.LeftMenuContents = exports.InfoPanelContent = exports.INFO_ROWS = exports.ARRANGE_ITEMS = void 0;
+exports.outlineLabel = exports.entityOutlineRows = exports.UNGROUPED = exports.StyledSidebarHeader = exports.StyledPanelChooseSlot = exports.StyledOutlineTypeIcon = exports.StyledOutlineToggle = exports.StyledOutlineSignifiers = exports.StyledOutlineSidebar = exports.StyledOutlineRow = exports.StyledOutlineResizer = exports.StyledOutlineName = exports.StyledOutlineGroupRow = exports.StyledOutlineElementMenu = exports.StyledOutlineCounter = exports.StyledOutlineChildRow = exports.StyledOutlineBody = exports.StyledNewGroupRow = exports.StyledInfoPanel = exports.StyledChooseRow = exports.OutlineMenuSliderStyle = exports.OutlineGroupOptionsMenu = exports.OutlineElementOptionsMenu = exports.OutlineCounter = exports.OUTLINE_WIDTH = exports.OUTLINE_TYPE_LABELS = exports.OUTLINE_TYPE_ICONS = exports.OUTLINE_MIN_WIDTH = exports.OUTLINE_MENU_WIDTH = exports.OUTLINE_MENU_LIST_STYLE = exports.OUTLINE_MAX_WIDTH = exports.OUTLINE_GROUPS = exports.OUTLINE_ELEMENTS = exports.LeftSidebar = exports.LeftMenuContents = exports.InfoPanelContent = exports.INFO_ROWS = exports.ARRANGE_ITEMS = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _elements = require("./elements");
 var _peopleMenu = require("./peopleMenu");
+var _projectElements = require("./projectElements");
 var _Button = require("../../components/Button");
 var _Chip = require("../../components/Chip");
 var _ChooseV = require("../../components/ChooseV2");
@@ -85,7 +86,9 @@ var OUTLINE_TYPE_ICONS = exports.OUTLINE_TYPE_ICONS = {
   text: _Icons.TextIcon,
   freehand: _Icons.DrawIcon,
   link: _Icons.InsertLinkIcon,
-  file: _Icons.AttachmentIcon
+  file: _Icons.AttachmentIcon,
+  task: _Icons.TaskIcon,
+  project: _Icons.ProjectIcon
 };
 
 /* Fallback label when an element has no name. Deliberately reads as a
@@ -99,7 +102,9 @@ var OUTLINE_TYPE_LABELS = exports.OUTLINE_TYPE_LABELS = {
   text: "Text",
   freehand: "Freehand",
   link: "Link",
-  file: "File"
+  file: "File",
+  task: "Task",
+  project: "Project"
 };
 /* Ids prefixed `shape-` / `sticky` are the elements really on the canvas, so
    selection syncs both ways for them. The rest stand in for the parts of a
@@ -292,12 +297,50 @@ var StyledOutlineTypeIcon = exports.StyledOutlineTypeIcon = _styledComponents.de
 var StyledOutlineName = exports.StyledOutlineName = _styledComponents.default.div.withConfig({
   displayName: "outline__StyledOutlineName",
   componentId: "sc-173k9fg-10"
-})(["display:flex;align-items:center;flex:0 1 auto;min-width:0;> div{max-width:100%;}> .typography{display:block;padding-left:4px;padding-right:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}&.unnamed .presentation,&.unnamed input{font-style:italic;color:var(--color-theme-500);}"]);
+})(["display:flex;align-items:center;flex:0 1 auto;min-width:0;> div{max-width:100%;}> .typography{display:block;padding-left:4px;padding-right:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}&.unnamed .presentation,&.unnamed input,&.unnamed > .typography{font-style:italic;color:var(--color-theme-500);}"]);
+
+/* A limited row is labelled before its type is consulted, because the type
+   label would say "Task" or "Project" — and which KIND of record is hidden is
+   itself something the viewer is not entitled to. The card face and the
+   Inspector header withhold it too. */
 var outlineLabel = exports.outlineLabel = function outlineLabel(element) {
   var _element$name;
+  if (element.limited) {
+    return _projectElements.LIMITED_ACCESS_LABEL;
+  }
   return (_element$name = element.name) !== null && _element$name !== void 0 ? _element$name : OUTLINE_TYPE_LABELS[element.type];
 };
 
+/**
+ * Outline rows for the entity cards on the canvas.
+ *
+ * They are DERIVED on every render rather than seeded into the outline's own
+ * state the way the mock elements are. That is the whole trick that keeps this
+ * cheap: the canvas already owns these elements, so there is no second copy to
+ * reconcile when one is added, resolved or cancelled, and the drag-reorder and
+ * grouping state the outline holds for its mock rows is left completely alone.
+ *
+ * The row id IS the canvas element id, which is what makes selection sync free
+ * in both directions — the sidebar and the canvas already share `selectedId`.
+ */
+var entityOutlineRows = exports.entityOutlineRows = function entityOutlineRows(elements, locks) {
+  return elements.map(function (element) {
+    var _locks$element$id;
+    return {
+      id: element.id,
+      /* No name for a limited card — nothing about the entity exists to show. */
+      name: element.limited ? null : (0, _projectElements.projectElementTitle)(element),
+      type: element.kind,
+      renamable: false,
+      limited: element.limited === true,
+      /* A limited card is locked for this viewer, always. Everything else follows
+         the same lock flag the Inspector's checkbox writes. */
+      locked: element.limited === true || ((_locks$element$id = locks[element.id]) !== null && _locks$element$id !== void 0 ? _locks$element$id : false),
+      groupId: null
+    };
+  });
+};
+
 /* Both menus follow the shared TaskListOptionsMenu shape: Menu in normal mode
    (260px bubble), an IconButton + TreeDots trigger whose `.open` class keeps it
    visible while the menu is up, and a flat List of leading-icon ListItems
@@ -336,7 +379,9 @@ var ARRANGE_ITEMS = exports.ARRANGE_ITEMS = [{
 }];
 var OutlineElementOptionsMenu = exports.OutlineElementOptionsMenu = function OutlineElementOptionsMenu(_ref2) {
   var locked = _ref2.locked,
-    onToggleLock = _ref2.onToggleLock;
+    onToggleLock = _ref2.onToggleLock,
+    _ref2$renamable = _ref2.renamable,
+    renamable = _ref2$renamable === void 0 ? true : _ref2$renamable;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -374,7 +419,7 @@ var OutlineElementOptionsMenu = exports.OutlineElementOptionsMenu = function Out
   var indexView = /*#__PURE__*/_react.default.createElement(StyledOutlineElementMenu, null, /*#__PURE__*/_react.default.createElement(_List.List, {
     style: OUTLINE_MENU_LIST_STYLE,
     tabIndex: -1
-  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.EditIcon, null), "Rename"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.DuplicateIcon, null), "Duplicate"), /*#__PURE__*/_react.default.createElement(_List.ListSeparator, null), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.FolderMoveIcon, null), "Move to Group"), /*#__PURE__*/_react.default.createElement(_List.ListItem, {
+  }, renamable ? /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.EditIcon, null), "Rename") : null, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.DuplicateIcon, null), "Duplicate"), /*#__PURE__*/_react.default.createElement(_List.ListSeparator, null), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.FolderMoveIcon, null), "Move to Group"), /*#__PURE__*/_react.default.createElement(_List.ListItem, {
     className: "drill-item",
     onClick: goToArrange
   }, /*#__PURE__*/_react.default.createElement("span", {
@@ -576,7 +621,10 @@ var LeftSidebar = exports.LeftSidebar = function LeftSidebar(_ref8) {
     sidebarOpen = _ref8.sidebarOpen,
     onToggleSidebar = _ref8.onToggleSidebar,
     boardName = _ref8.boardName,
-    onRenameBoard = _ref8.onRenameBoard;
+    onRenameBoard = _ref8.onRenameBoard,
+    projectElements = _ref8.projectElements,
+    locks = _ref8.locks,
+    onToggleElementLock = _ref8.onToggleElementLock;
   var _useState1 = (0, _react.useState)(OUTLINE_WIDTH),
     _useState10 = _slicedToArray(_useState1, 2),
     width = _useState10[0],
@@ -615,6 +663,13 @@ var LeftSidebar = exports.LeftSidebar = function LeftSidebar(_ref8) {
       return element.groupId === groupId;
     });
   }, [elements]);
+
+  /* Derived, never stored. Entity rows join the Ungrouped bucket — the section
+     the outline itself describes as "where everything starts out and where new
+     work lands" — and they join it at the END, after the mock rows, so the
+     hand-ordered list a designer is looking at does not shuffle when a card is
+     added to the board. */
+  var entityRows = entityOutlineRows(projectElements, locks);
   var toggleCollapsed = (0, _react.useCallback)(function (id) {
     setCollapsed(function (current) {
       return current.includes(id) ? current.filter(function (entry) {
@@ -813,21 +868,30 @@ var LeftSidebar = exports.LeftSidebar = function LeftSidebar(_ref8) {
     return "drop-".concat(dropSpot.kind);
   }, [dragId, dropSpot]);
   var renderElementRow = function renderElementRow(element) {
-    var TypeIcon = OUTLINE_TYPE_ICONS[element.type];
+    /* A limited row takes the neutral lock glyph, not its type glyph: the type
+       glyph would say whether a task or a project is hidden. */
+    var TypeIcon = element.limited ? _Icons.LockIcon : OUTLINE_TYPE_ICONS[element.type];
     var selected = element.id === selectedId;
+    var renamable = element.renamable !== false;
+    /* Muted + italic covers both "never named" and "not yours to see". */
+    var muted = element.limited === true || !element.name;
     return /*#__PURE__*/_react.default.createElement(StyledOutlineChildRow, _extends({
       key: element.id,
       className: "".concat(selected ? "selected" : "", " ").concat(dropClass(element.id)),
       onClick: function onClick() {
         return onSelect(element.id);
       }
-    }, rowDragProps(element.id)), /*#__PURE__*/_react.default.createElement(StyledOutlineTypeIcon, null, /*#__PURE__*/_react.default.createElement(TypeIcon, {
+      /* Entity rows are derived, so they are deliberately NOT draggable: they
+         have no place in the mock's ordered model, and dropping one into a
+         group would be an edit with nowhere to land. Grouping and reorder for
+         every other row are unchanged. */
+    }, renamable ? rowDragProps(element.id) : {}), /*#__PURE__*/_react.default.createElement(StyledOutlineTypeIcon, null, /*#__PURE__*/_react.default.createElement(TypeIcon, {
       width: 16,
       height: 16,
-      fill: element.name ? "var(--color-theme-700)" : "var(--color-theme-500)"
+      fill: muted ? "var(--color-theme-500)" : "var(--color-theme-700)"
     })), /*#__PURE__*/_react.default.createElement(StyledOutlineName, {
-      className: element.name ? "" : "unnamed"
-    }, /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
+      className: muted ? "unnamed" : ""
+    }, renamable ? /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
       value: outlineLabel(element),
       variant: "Body 2",
       weight: "medium",
@@ -838,7 +902,13 @@ var LeftSidebar = exports.LeftSidebar = function LeftSidebar(_ref8) {
       inputProps: {
         maxLength: 150
       }
-    })), element.locked || element.connections ? /*#__PURE__*/_react.default.createElement(StyledOutlineSignifiers, {
+    }) :
+    /*#__PURE__*/
+    /* Plain Typography, so there is no input to click into at all —
+       the name belongs to the linked entity. */
+    _react.default.createElement(_Typography.Body2, {
+      weight: "medium"
+    }, outlineLabel(element))), element.locked || element.connections ? /*#__PURE__*/_react.default.createElement(StyledOutlineSignifiers, {
       className: "outline-trailing"
     }, element.connections ? /*#__PURE__*/_react.default.createElement(_Signifier.Signifier, {
       type: _Icons.DependencySmallIcon,
@@ -847,12 +917,15 @@ var LeftSidebar = exports.LeftSidebar = function LeftSidebar(_ref8) {
     }) : null, element.locked ? /*#__PURE__*/_react.default.createElement(_Signifier.Signifier, {
       type: _Icons.LockSmallIcon,
       tooltipText: "Locked"
-    }) : null) : null, /*#__PURE__*/_react.default.createElement("span", {
+    }) : null) : null, element.limited ? null : /*#__PURE__*/_react.default.createElement("span", {
       className: "outline-options outline-hover"
     }, /*#__PURE__*/_react.default.createElement(OutlineElementOptionsMenu, {
-      locked: Boolean(element.locked),
+      renamable: renamable,
+      locked: Boolean(element.locked)
+      /* Mock rows keep their own flag; an entity row's lock is the
+         board's, so it goes to the shared map the Inspector uses. */,
       onToggleLock: function onToggleLock() {
-        return toggleLock(element.id);
+        return renamable ? toggleLock(element.id) : onToggleElementLock(element.id);
       }
     })));
   };
@@ -918,8 +991,8 @@ var LeftSidebar = exports.LeftSidebar = function LeftSidebar(_ref8) {
   })), /*#__PURE__*/_react.default.createElement(StyledOutlineName, null, /*#__PURE__*/_react.default.createElement(_Typography.Header3, {
     color: "primary"
   }, "Ungrouped")), /*#__PURE__*/_react.default.createElement(OutlineCounter, {
-    count: membersOf(null).length
-  })), collapsed.includes(UNGROUPED) ? null : membersOf(null).map(renderElementRow), groups.map(function (group) {
+    count: membersOf(null).length + entityRows.length
+  })), collapsed.includes(UNGROUPED) ? null : [...membersOf(null), ...entityRows].map(renderElementRow), groups.map(function (group) {
     var members = membersOf(group.id);
     var isOpen = !collapsed.includes(group.id);
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {