@activecollab/components 2.0.440 → 2.0.442

package/dist/esm/presentation/whiteboard/projectElements.js

@@ -3,7 +3,7 @@ import React, { useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import { SELECTION_BLUE, StyledCanvasElement } from "./elements";
 import { IconButton } from "../../components/IconButton";
-import { ArrowLeftIcon, SortGeneralIcon } from "../../components/Icons";
+import { ArrowLeftIcon, PersonIcon, SortGeneralIcon } from "../../components/Icons";
 import { Input } from "../../components/Input";
 import { SkeletonLoader } from "../../components/Loaders";
 import { Modal } from "../../components/Modal";
@@ -12,7 +12,7 @@ import { RadioButton } from "../../components/RadioButton";
 import { StackedCard } from "../../components/StackedCard";
 import { Tooltip } from "../../components/Tooltip";
 import { Body2, Caption1 } from "../../components/Typography";
-import { AVATAR_COLORS } from "../shared";
+import { AVATAR_COLORS, RoundAvatar } from "../shared";
 import { INTERNAL_CLIENT_LABEL as CONTENT_INTERNAL_CLIENT_LABEL, ProjectCard, TaskCard } from "../stackedCard/content";
 
 /* ------------------------------------------------------------------ */
@@ -54,8 +54,16 @@ export const TASK_CARD_WIDTH = 260;
 
 /* How long the "details are being resolved from the backend" flash lasts. */
 export const RESOLVE_MS = 480;
-/** True for the two board tools this module owns. */
-export const isProjectTool = tool => tool === "project" || tool === "task";
+/** True for the three board tools this module owns. */
+export const isProjectTool = tool => tool === "project" || tool === "task" || tool === "person";
+
+/* A person is not a card: a square whose width IS its height, so the avatar
+   circle stays a circle. The drawn width is its side, clamped to these bounds —
+   the same 1:1 lock the app enforces on the canvas grip and in the Inspector. */
+export const PERSON_DEFAULT_SIZE = 96;
+export const PERSON_MIN_SIZE = 48;
+export const PERSON_MAX_SIZE = 240;
+export const clampPersonSize = size => Math.min(PERSON_MAX_SIZE, Math.max(PERSON_MIN_SIZE, Math.round(size)));
 
 /* ------------------------------------------------------------------ */
 /* Mock data                                                           */
@@ -119,6 +127,18 @@ export const PICKER_PEOPLE = {
   }
 };
 
+/* The People picker's one flat list: everyone the board knows, by name, with
+   no company or project layer — a person chip points at a user, not at a
+   membership. The record key doubles as the row id. */
+export const PICKER_PEOPLE_LIST = Object.entries(PICKER_PEOPLE).map(_ref => {
+  let id = _ref[0],
+    person = _ref[1];
+  return {
+    id,
+    person
+  };
+}).sort((a, b) => a.person.name.localeCompare(b.person.name));
+
 /* Label colours are data too: they are the label's own colour in the app. */
 export const PICKER_LABELS = {
   assigned: {
@@ -419,6 +439,10 @@ export const projectElementTitle = element => {
   if (element.limited) {
     return LIMITED_ACCESS_LABEL;
   }
+  if (element.kind === "person") {
+    var _element$person$name, _element$person;
+    return (_element$person$name = (_element$person = element.person) == null ? void 0 : _element$person.name) != null ? _element$person$name : "Person";
+  }
   if (element.kind === "project") {
     var _element$project$name, _element$project;
     return (_element$project$name = (_element$project = element.project) == null ? void 0 : _element$project.name) != null ? _element$project$name : "Project";
@@ -452,7 +476,8 @@ const SEEDED = [{
     status: "resolved",
     limited: true,
     project: null,
-    task: null
+    task: null,
+    person: null
   },
   x: 120,
   y: 200
@@ -465,7 +490,8 @@ const SEEDED = [{
     status: "resolved",
     limited: true,
     project: null,
-    task: null
+    task: null,
+    person: null
   },
   x: 120,
   y: 380
@@ -489,7 +515,7 @@ export const SEEDED_PROJECT_ELEMENT_POSITIONS = SEEDED.reduce((acc, seed) => {
 export const StyledProjectElementBox = styled(StyledCanvasElement).withConfig({
   displayName: "projectElements__StyledProjectElementBox",
   componentId: "sc-1cayxi5-0"
-})(["border-radius:8px;transition:width 160ms ease;&.limited{cursor:not-allowed;}"]);
+})(["border-radius:8px;transition:width 160ms ease;&.limited{cursor:not-allowed;}&.person{border-radius:50%;}"]);
 
 /* The rubber band and the armed tool's hover preview — the same blue dashed
    box the link tool draws, so the gesture reads as one board convention. */
@@ -498,18 +524,44 @@ export const StyledProjectDraft = styled.div.withConfig({
   componentId: "sc-1cayxi5-1"
 })(["position:absolute;box-sizing:border-box;border:1.5px dashed ", ";border-radius:8px;background-color:rgba(59,130,246,0.08);pointer-events:none;"], SELECTION_BLUE);
 
+/* The person rubber band and hover preview: the same dashed blue, round. */
+export const StyledPersonDraft = styled(StyledProjectDraft).withConfig({
+  displayName: "projectElements__StyledPersonDraft",
+  componentId: "sc-1cayxi5-2"
+})(["border-radius:50%;"]);
+
 /* The placeholder that waits for the picker's answer. Card-like on purpose:
    rounded, dashed, tinted — a card-shaped hole, not a selection marquee. */
 export const StyledPlaceholder = styled.div.withConfig({
   displayName: "projectElements__StyledPlaceholder",
-  componentId: "sc-1cayxi5-2"
+  componentId: "sc-1cayxi5-3"
 })(["box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:12px;border:1.5px dashed var(--border-primary);border-radius:8px;background-color:var(--color-theme-200);user-select:none;"]);
 
+/* A person's placeholder is the circle its avatar will fill — dashed and
+   tinted like the card placeholder, with the person glyph where the face will
+   be, so the pick swaps one circle for another without a change of shape. */
+export const StyledPersonPlaceholder = styled(StyledPlaceholder).withConfig({
+  displayName: "projectElements__StyledPersonPlaceholder",
+  componentId: "sc-1cayxi5-4"
+})(["border-radius:50%;padding:0;color:var(--color-theme-600);svg{width:40%;height:40%;fill:currentColor;}"]);
+export const StyledPersonResolving = styled.div.withConfig({
+  displayName: "projectElements__StyledPersonResolving",
+  componentId: "sc-1cayxi5-5"
+})(["width:100%;height:100%;border-radius:50%;overflow:hidden;.c-loader{width:100%;height:100%;border-radius:50%;}"]);
+
+/* The resolved chip. The avatar fills the element's square and the name hangs
+   below it, outside the box: the circle is the whole footprint the board
+   measures, so the caption never changes the element's size. */
+export const StyledPersonFace = styled.div.withConfig({
+  displayName: "projectElements__StyledPersonFace",
+  componentId: "sc-1cayxi5-6"
+})(["position:relative;width:100%;height:100%;border-radius:50%;user-select:none;.person-avatar{width:100%;height:100%;}.person-name{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;white-space:nowrap;}"]);
+
 /* The resolving flash: the placeholder's box, with the card's rows sketched in
    so the swap to the real card does not read as a different element. */
 export const StyledResolving = styled(StyledPlaceholder).withConfig({
   displayName: "projectElements__StyledResolving",
-  componentId: "sc-1cayxi5-3"
+  componentId: "sc-1cayxi5-7"
 })(["flex-direction:column;align-items:stretch;justify-content:center;gap:10px;.c-loader{height:12px;}"]);
 
 /**
@@ -531,8 +583,8 @@ export const StyledResolving = styled(StyledPlaceholder).withConfig({
  */
 export const StyledLimitedCard = styled.div.withConfig({
   displayName: "projectElements__StyledLimitedCard",
-  componentId: "sc-1cayxi5-4"
-})(["box-sizing:border-box;width:100%;height:100%;min-height:96px;display:flex;align-items:center;justify-content:center;padding:12px;border:1px solid var(--border-primary);border-radius:8px;background-color:var(--muted-surface);background-image:repeating-linear-gradient( -45deg,transparent,transparent 5px,var(--stripe-pattern) 5px,var(--stripe-pattern) 5.7px );color:var(--muted-surface-text);cursor:not-allowed;user-select:none;.limited-label{color:var(--muted-surface-text);}"]);
+  componentId: "sc-1cayxi5-8"
+})(["box-sizing:border-box;width:100%;height:100%;min-height:96px;display:flex;align-items:center;justify-content:center;padding:12px;border:1px solid var(--border-primary);border-radius:8px;background-color:var(--muted-surface);background-image:repeating-linear-gradient( -45deg,transparent,transparent 5px,var(--stripe-pattern) 5px,var(--stripe-pattern) 5.7px );color:var(--muted-surface-text);cursor:not-allowed;user-select:none;.limited-label{color:var(--muted-surface-text);}&.round{border-radius:50%;min-height:0;}"]);
 
 /**
  * Both resolved faces are the design system's `StackedCard` — the same shell the
@@ -545,7 +597,7 @@ export const StyledLimitedCard = styled.div.withConfig({
  */
 const StyledEntityCard = styled(StackedCard).withConfig({
   displayName: "projectElements__StyledEntityCard",
-  componentId: "sc-1cayxi5-5"
+  componentId: "sc-1cayxi5-9"
 })(["&&{width:100%;}user-select:none;"]);
 /**
  * The task face — the shared `TaskCard`, with the project line switched on.
@@ -560,11 +612,11 @@ const StyledEntityCard = styled(StackedCard).withConfig({
  * The title is the app's own display name (`#123: Name`, `taskDisplayName`), so
  * the card's separate task-number prefix stays off.
  */
-export const TaskElementCard = _ref => {
+export const TaskElementCard = _ref2 => {
   var _task$subtasks, _task$comments, _task$date;
-  let project = _ref.project,
-    task = _ref.task,
-    selected = _ref.selected;
+  let project = _ref2.project,
+    task = _ref2.task,
+    selected = _ref2.selected;
   return /*#__PURE__*/React.createElement(StyledEntityCard, {
     selected: selected
   }, /*#__PURE__*/React.createElement(TaskCard, {
@@ -589,9 +641,9 @@ export const TaskElementCard = _ref => {
  * right. No progress indicator, and no row at all when the project has neither a
  * leader nor a label.
  */
-export const ProjectElementCard = _ref2 => {
-  let project = _ref2.project,
-    selected = _ref2.selected;
+export const ProjectElementCard = _ref3 => {
+  let project = _ref3.project,
+    selected = _ref3.selected;
   return /*#__PURE__*/React.createElement(StyledEntityCard, {
     selected: selected
   }, /*#__PURE__*/React.createElement(ProjectCard, {
@@ -617,23 +669,74 @@ export const ProjectElementCard = _ref2 => {
  * not the entity's identity — the opposite of the tooltip Workload disables on
  * a limited event, which would have leaked the name.
  */
-export const LimitedElementCard = () => /*#__PURE__*/React.createElement(Tooltip, {
-  title: LIMITED_ACCESS_MESSAGE
-}, /*#__PURE__*/React.createElement(StyledLimitedCard, {
-  "data-testid": "wb-limited-card"
-}, /*#__PURE__*/React.createElement(Caption1, {
-  weight: "bold",
-  className: "limited-label"
-}, LIMITED_ACCESS_LABEL)));
+export const LimitedElementCard = _ref4 => {
+  let _ref4$round = _ref4.round,
+    round = _ref4$round === void 0 ? false : _ref4$round;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: LIMITED_ACCESS_MESSAGE
+  }, /*#__PURE__*/React.createElement(StyledLimitedCard, {
+    "data-testid": "wb-limited-card",
+    className: round ? "round" : undefined
+  }, /*#__PURE__*/React.createElement(Caption1, {
+    weight: "bold",
+    className: "limited-label"
+  }, LIMITED_ACCESS_LABEL)));
+};
+/**
+ * The person face — an avatar circle with a name caption. Always a chip: never
+ * a StackedCard, it never expands, no hover card, no online-status dot. The
+ * initials avatar stands in for the server-rendered avatar, as it does on the
+ * cards.
+ */
+export const PersonElementFace = _ref5 => {
+  let person = _ref5.person,
+    size = _ref5.size;
+  return /*#__PURE__*/React.createElement(StyledPersonFace, {
+    "data-testid": "wb-person-face"
+  }, /*#__PURE__*/React.createElement(RoundAvatar, {
+    className: "person-avatar",
+    $bg: person.color,
+    $size: size,
+    $bordered: false,
+    style: {
+      fontSize: Math.round(size * 0.28)
+    },
+    "aria-label": person.name
+  }, person.initials), /*#__PURE__*/React.createElement(Caption1, {
+    weight: "bold",
+    className: "person-name"
+  }, person.name));
+};
 
 /** One board element, in whichever of its three states it currently is. */
-export const ProjectElementNode = _ref3 => {
-  let element = _ref3.element,
-    selected = _ref3.selected;
+export const ProjectElementNode = _ref6 => {
+  let element = _ref6.element,
+    selected = _ref6.selected;
   /* Checked before anything else: a limited element must never be able to fall
      through to a branch that renders entity data. */
   if (element.limited) {
-    return /*#__PURE__*/React.createElement(LimitedElementCard, null);
+    return /*#__PURE__*/React.createElement(LimitedElementCard, {
+      round: element.kind === "person"
+    });
+  }
+
+  /* A person is the board's second non-card render: every state is a circle. */
+  if (element.kind === "person") {
+    if (element.status === "placeholder") {
+      return /*#__PURE__*/React.createElement(StyledPersonPlaceholder, {
+        "aria-label": "Pick a person"
+      }, /*#__PURE__*/React.createElement(PersonIcon, null));
+    }
+    if (element.status === "resolving") {
+      return /*#__PURE__*/React.createElement(StyledPersonResolving, null, /*#__PURE__*/React.createElement(SkeletonLoader, null));
+    }
+    if (element.person) {
+      return /*#__PURE__*/React.createElement(PersonElementFace, {
+        person: element.person,
+        size: element.width
+      });
+    }
+    return /*#__PURE__*/React.createElement(StyledPersonPlaceholder, null);
   }
   if (element.status === "placeholder") {
     return /*#__PURE__*/React.createElement(StyledPlaceholder, null, /*#__PURE__*/React.createElement(Caption1, {
@@ -681,30 +784,31 @@ export const ProjectElementNode = _ref3 => {
    share: the portal, the overlay, the focus lock and the Esc handler. */
 const StyledPickerPanel = styled(Paper).withConfig({
   displayName: "projectElements__StyledPickerPanel",
-  componentId: "sc-1cayxi5-6"
+  componentId: "sc-1cayxi5-10"
 })(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;width:470px;max-width:calc(100vw - 32px);max-height:70vh;overflow:hidden;&&{border-radius:12px;border:1px solid var(--border-primary);box-shadow:0 18px 48px rgba(0,0,0,0.24);}"]);
 
 /* Search + adornments, mirroring `Select`'s own form row: the back arrow is a
    start adornment (TaskList), the group-by sort a end adornment (ProjectList). */
 const StyledPickerHeader = styled.div.withConfig({
   displayName: "projectElements__StyledPickerHeader",
-  componentId: "sc-1cayxi5-7"
+  componentId: "sc-1cayxi5-11"
 })(["display:flex;align-items:center;gap:8px;flex-shrink:0;padding:12px 12px 8px;.picker-search{width:100%;border-radius:8px;}.picker-search:focus-within{border-color:var(--color-primary);outline:1px solid var(--color-primary);}"]);
 const StyledPickerList = styled.div.withConfig({
   displayName: "projectElements__StyledPickerList",
-  componentId: "sc-1cayxi5-8"
+  componentId: "sc-1cayxi5-12"
 })(["flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 0 12px;.picker-group-header{box-sizing:border-box;height:36px;display:flex;align-items:center;padding:0 20px;margin-top:4px;}.picker-empty{padding:24px 20px;text-align:center;}"]);
 
 /* A generously spaced row: the name on the left, an empty radio on the right —
    the shape `Select` gives a single-choice option, at picker scale. */
 const StyledPickerRow = styled.div.withConfig({
   displayName: "projectElements__StyledPickerRow",
-  componentId: "sc-1cayxi5-9"
-})(["box-sizing:border-box;height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;cursor:pointer;outline:none;&:hover,&:focus-visible{background-color:var(--color-theme-200);}.row-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.c-radio-btn{flex-shrink:0;}"]);
-const PickerRow = _ref4 => {
-  let id = _ref4.id,
-    name = _ref4.name,
-    onSelect = _ref4.onSelect;
+  componentId: "sc-1cayxi5-13"
+})(["box-sizing:border-box;height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;cursor:pointer;outline:none;&:hover,&:focus-visible{background-color:var(--color-theme-200);}.row-lead{display:flex;align-items:center;gap:12px;min-width:0;}.row-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.c-radio-btn{flex-shrink:0;}"]);
+const PickerRow = _ref7 => {
+  let id = _ref7.id,
+    name = _ref7.name,
+    avatar = _ref7.avatar,
+    onSelect = _ref7.onSelect;
   return /*#__PURE__*/React.createElement(StyledPickerRow, {
     role: "button",
     tabIndex: 0,
@@ -716,23 +820,31 @@ const PickerRow = _ref4 => {
       }
     }
   }, /*#__PURE__*/React.createElement("span", {
+    className: "row-lead"
+  }, avatar ? /*#__PURE__*/React.createElement(RoundAvatar, {
+    $bg: avatar.color,
+    $size: 24,
+    $bordered: false
+  }, avatar.initials) : null, /*#__PURE__*/React.createElement("span", {
     className: "row-name"
-  }, /*#__PURE__*/React.createElement(Body2, null, name)), /*#__PURE__*/React.createElement(RadioButton, {
+  }, /*#__PURE__*/React.createElement(Body2, null, name))), /*#__PURE__*/React.createElement(RadioButton, {
     id: "wb-picker-" + id,
     tabIndex: -1
   }));
 };
 /**
- * One picker, two flows — the same split the app makes between
- * `MenuSelector/ProjectList` (one step) and `ProjectTaskMenuSelector` (project,
- * then task). The task flow deliberately drops the app's "Directly on project"
- * default option: a task card has to be a task.
+ * One picker, three flows — the same split the app makes between
+ * `MenuSelector/ProjectList` (one step), `ProjectTaskMenuSelector` (project,
+ * then task) and the flat People list (one step, no grouping). The task flow
+ * deliberately drops the app's "Directly on project" default option: a task
+ * card has to be a task.
  */
-export const ProjectElementPicker = _ref5 => {
-  let kind = _ref5.kind,
-    onSelectProject = _ref5.onSelectProject,
-    onSelectTask = _ref5.onSelectTask,
-    onCancel = _ref5.onCancel;
+export const ProjectElementPicker = _ref8 => {
+  let kind = _ref8.kind,
+    onSelectProject = _ref8.onSelectProject,
+    onSelectTask = _ref8.onSelectTask,
+    onSelectPerson = _ref8.onSelectPerson,
+    onCancel = _ref8.onCancel;
   const _useState = useState(null),
     project = _useState[0],
     setProject = _useState[1];
@@ -746,6 +858,7 @@ export const ProjectElementPicker = _ref5 => {
      gesture that created it. */
   const pressedInsideRef = useRef(false);
   const onTaskStep = kind === "task" && project !== null;
+  const onPeopleStep = kind === "person";
   const projectGroups = useMemo(() => groupProjects(PICKER_PROJECTS.filter(entry => matchesQuery(entry.name, query))), [query]);
   const taskGroups = useMemo(() => project ? groupTasks(project.tasks.filter(task => matchesQuery(taskDisplayName(task), query))) : [], [project, query]);
   const handleProject = picked => {
@@ -760,7 +873,10 @@ export const ProjectElementPicker = _ref5 => {
     setProject(null);
     setQuery("");
   };
-  const isEmpty = onTaskStep ? taskGroups.length === 0 : projectGroups.length === 0;
+  const people = useMemo(() => PICKER_PEOPLE_LIST.filter(entry => matchesQuery(entry.person.name, query)), [query]);
+  const isEmpty = onPeopleStep ? people.length === 0 : onTaskStep ? taskGroups.length === 0 : projectGroups.length === 0;
+  const searchPlaceholder = onPeopleStep ? "Search a person" : onTaskStep ? "Search a task" : "Search a project";
+  const emptyLabel = onPeopleStep ? "No people" : onTaskStep ? "No Result" : "No Projects";
   return /*#__PURE__*/React.createElement(Modal, {
     open: true,
     onClose: onCancel,
@@ -786,9 +902,9 @@ export const ProjectElementPicker = _ref5 => {
     className: "picker-search",
     autoFocus: true,
     value: query,
-    placeholder: onTaskStep ? "Search a task" : "Search a project",
+    placeholder: searchPlaceholder,
     onChange: event => setQuery(event.target.value)
-  }), onTaskStep ? null : /*#__PURE__*/React.createElement(Tooltip, {
+  }), onTaskStep || onPeopleStep ? null : /*#__PURE__*/React.createElement(Tooltip, {
     title: "Group by"
   }, /*#__PURE__*/React.createElement(IconButton, {
     type: "button",
@@ -797,7 +913,17 @@ export const ProjectElementPicker = _ref5 => {
     className: "picker-empty"
   }, /*#__PURE__*/React.createElement(Body2, {
     color: "tertiary"
-  }, onTaskStep ? "No Result" : "No Projects")) : null, onTaskStep && project ? taskGroups.map(group => /*#__PURE__*/React.createElement("div", {
+  }, emptyLabel)) : null, onPeopleStep ? people.map(_ref9 => {
+    let id = _ref9.id,
+      person = _ref9.person;
+    return /*#__PURE__*/React.createElement(PickerRow, {
+      key: id,
+      id: id,
+      name: person.name,
+      avatar: person,
+      onSelect: () => onSelectPerson(person)
+    });
+  }) : null, onTaskStep && project ? taskGroups.map(group => /*#__PURE__*/React.createElement("div", {
     key: group.taskList
   }, /*#__PURE__*/React.createElement("div", {
     className: "picker-group-header"
@@ -808,7 +934,7 @@ export const ProjectElementPicker = _ref5 => {
     id: task.id,
     name: taskDisplayName(task),
     onSelect: () => onSelectTask(project, task)
-  })))) : null, onTaskStep ? null : projectGroups.map(group => /*#__PURE__*/React.createElement("div", {
+  })))) : null, onTaskStep || onPeopleStep ? null : projectGroups.map(group => /*#__PURE__*/React.createElement("div", {
     key: group.client
   }, /*#__PURE__*/React.createElement("div", {
     className: "picker-group-header"