@activecollab/components
Version:
ActiveCollab Components
516 lines (505 loc) • 24.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.WhiteboardPeopleMenu = exports.StyledRowCheckbox = exports.StyledPeopleMenu = exports.StyledDialogFields = exports.StyledCandidateRow = exports.PeopleMenuSection = exports.INVITE_COMPANIES = exports.BOARD_MEMBERS = exports.AddMembersDialogStyle = exports.AddMembersDialog = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _Button = require("../../components/Button");
var _Checkbox = require("../../components/Checkbox");
var _ConfirmDialog = require("../../components/ConfirmDialog");
var _CounterButton = require("../../components/CounterButton");
var _Dialog = require("../../components/Dialog");
var _IconButton = require("../../components/IconButton");
var _Icons = require("../../components/Icons");
var _Label = require("../../components/Label");
var _List = require("../../components/List");
var _Menu = require("../../components/Menu");
var _Select = require("../../components/Select");
var _SelectTrigger = require("../../components/SelectTrigger");
var _Textarea = require("../../components/Textarea");
var _Tooltip = require("../../components/Tooltip");
var _Typography = require("../../components/Typography");
var _shared = require("../shared");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
/* ------------------------------------------------------------------ */
/* People menu (copy of the project header People popover) */
/* ------------------------------------------------------------------ */
/* 12 people (9 members + 3 clients) so the 330px list visibly scrolls.
Jasna (id 1) starts as the board manager. */
var BOARD_MEMBERS = exports.BOARD_MEMBERS = [{
id: 1,
name: "Jasna Simic",
initials: "JS",
color: _shared.AVATAR_COLORS.purple
}, {
id: 2,
name: "Marko Antic",
initials: "MA",
color: _shared.AVATAR_COLORS.teal
}, {
id: 3,
name: "Dario Kovac",
initials: "DK",
color: _shared.AVATAR_COLORS.orange
}, {
id: 4,
name: "Ivana Lukic",
initials: "IL",
color: _shared.AVATAR_COLORS.green
}, {
id: 5,
name: "Petar Novak",
initials: "PN",
color: _shared.AVATAR_COLORS.blue
}, {
id: 6,
name: "Sara Milic",
initials: "SM",
color: _shared.AVATAR_COLORS.yellow
}, {
id: 7,
name: "Luka Peric",
initials: "LP",
color: _shared.AVATAR_COLORS.purple
}, {
id: 8,
name: "Mia Radic",
initials: "MR",
color: _shared.AVATAR_COLORS.teal
}, {
id: 9,
name: "Nikola Vukic",
initials: "NV",
color: _shared.AVATAR_COLORS.orange
}, {
id: 10,
name: "Ana Klein",
initials: "AK",
color: _shared.AVATAR_COLORS.green,
isClient: true
}, {
id: 11,
name: "Tom Becker",
initials: "TB",
color: _shared.AVATAR_COLORS.blue,
isClient: true
}, {
id: 12,
name: "Eva Fischer",
initials: "EF",
color: _shared.AVATAR_COLORS.yellow,
isClient: true
}];
/* Mirrors ProjectPeopleWrapper + view.project_top_bar.less:
Menu 260px, "People" MenuHeader with an (inert) "+", 330px scroll area,
Members/Clients Caption1 section labels, rows with hover-only options. */
var StyledPeopleMenu = exports.StyledPeopleMenu = _styledComponents.default.div.withConfig({
displayName: "peopleMenu__StyledPeopleMenu",
componentId: "sc-uidi4w-0"
})([".people-scroll{max-height:330px;overflow-y:auto;overflow-x:hidden;padding-bottom:8px;}.people-section-label{display:block;margin:8px 0;padding:0 16px;}.member-item{justify-content:space-between;margin:4px 8px;padding:0 8px;border-radius:4px;cursor:auto;}.member-options{display:none;align-items:center;}.member-item:hover .member-options{display:flex;}.member-side{display:flex;align-items:center;flex-shrink:0;}.member-user{display:inline-flex;align-items:center;gap:8px;padding:2px 0;overflow:hidden;.member-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}}.manager-avatar{outline:2px #ffcc6b solid;outline-offset:-2px;}"]);
/* Rows sorted by name. Manager: gold crown + ring, no hover options (the
role must be handed over before removal). Crown option only on non-client
rows; X on everyone else. */
var PeopleMenuSection = exports.PeopleMenuSection = function PeopleMenuSection(_ref) {
var label = _ref.label,
people = _ref.people,
managerId = _ref.managerId,
onMakeManager = _ref.onMakeManager,
onRemove = _ref.onRemove;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
weight: "bold",
className: "people-section-label"
}, label), /*#__PURE__*/_react.default.createElement(_List.List, null, [...people].sort(function (a, b) {
return a.name.localeCompare(b.name);
}).map(function (person) {
var isManager = person.id === managerId;
return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
key: person.id,
className: "member-item"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "member-user"
}, /*#__PURE__*/_react.default.createElement(_shared.RoundAvatar, {
$bg: person.color,
$bordered: false,
className: isManager ? "manager-avatar" : undefined
}, person.initials), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
className: "member-name"
}, person.name)), /*#__PURE__*/_react.default.createElement("span", {
className: "member-side"
}, isManager ? /*#__PURE__*/_react.default.createElement(_Icons.CrownSelectedIcon, {
fill: "#FFCC6B"
}) : null, /*#__PURE__*/_react.default.createElement("span", {
className: "member-options"
}, !isManager && !person.isClient ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
title: "Set as Whiteboard Manager"
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
size: "small",
variant: "text gray",
onClick: function onClick() {
return onMakeManager(person);
}
}, /*#__PURE__*/_react.default.createElement(_Icons.CrownBlankIcon, null))) : null, !isManager ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
title: "Remove from Whiteboard"
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
size: "small",
variant: "text gray",
onClick: function onClick() {
return onRemove(person);
}
}, /*#__PURE__*/_react.default.createElement(_Icons.CloseSmallIcon, null))) : null)));
})));
};
/* ------------------------------------------------------------------ */
/* Add-members dialog (people "+" → DS Dialog + invite-style picker) */
/* ------------------------------------------------------------------ */
/* Owner company first, remaining companies sorted by name; people sorted
by name within each company — same ordering as the real user picker.
Members of non-owner companies join the board as clients. */
var INVITE_COMPANIES = exports.INVITE_COMPANIES = [{
name: "ActiveCollab",
isOwnerCompany: true,
people: [{
id: 101,
name: "Ana Ilic",
initials: "AI",
color: _shared.AVATAR_COLORS.green
}, {
id: 102,
name: "Bojan Peric",
initials: "BP",
color: _shared.AVATAR_COLORS.blue
}, {
id: 103,
name: "Goran Simovic",
initials: "GS",
color: _shared.AVATAR_COLORS.orange
}, {
id: 104,
name: "Vera Antic",
initials: "VA",
color: _shared.AVATAR_COLORS.purple
}]
}, {
name: "Bitlab Studio",
people: [{
id: 201,
name: "Elena Weber",
initials: "EW",
color: _shared.AVATAR_COLORS.teal
}, {
id: 202,
name: "Jonas Richter",
initials: "JR",
color: _shared.AVATAR_COLORS.yellow
}]
}, {
name: "Nova Consulting",
people: [{
id: 301,
name: "Iris Novak",
initials: "IN",
color: _shared.AVATAR_COLORS.blue
}, {
id: 302,
name: "Karlo Babic",
initials: "KB",
color: _shared.AVATAR_COLORS.green
}, {
id: 303,
name: "Tea Grgic",
initials: "TG",
color: _shared.AVATAR_COLORS.purple
}]
}];
/* The Select panel and the Dialog render through portals, so they can only
be styled via real global classes — wrapper descendant selectors can't
reach them. Actions gap 12px = the app's "tw-flex tw-gap-3" on
Dialog.Actions (InviteToProjectsDialog). */
var AddMembersDialogStyle = exports.AddMembersDialogStyle = (0, _styledComponents.createGlobalStyle)([".wb-user-select{width:480px;max-width:calc(100vw - 32px);}.wb-dialog-actions{display:flex;gap:12px;}"]);
var StyledCandidateRow = exports.StyledCandidateRow = _styledComponents.default.span.withConfig({
displayName: "peopleMenu__StyledCandidateRow",
componentId: "sc-uidi4w-1"
})(["display:inline-flex;align-items:center;gap:8px;min-width:0;flex-grow:1;.candidate-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"]);
/* same offset the Select's built-in row checkbox has */
var StyledRowCheckbox = exports.StyledRowCheckbox = (0, _styledComponents.default)(_Checkbox.Checkbox).withConfig({
displayName: "peopleMenu__StyledRowCheckbox",
componentId: "sc-uidi4w-2"
})(["margin-left:12px;"]);
var StyledDialogFields = exports.StyledDialogFields = _styledComponents.default.div.withConfig({
displayName: "peopleMenu__StyledDialogFields",
componentId: "sc-uidi4w-3"
})(["display:flex;flex-direction:column;.field{display:flex;flex-direction:column;gap:4px;}.field + .field{margin-top:16px;}button.wb-user-trigger{width:100%;}textarea.wb-invite-message{width:100%;box-sizing:border-box;}"]);
/* Closes on Esc (DS Dialog default) and Cancel; background click stays
disabled (enableBackgroundClick not set). Add is disabled until at least
one user is selected; on Add the selection joins the members list (in the
real app this also sends the invitation email with the optional message,
and Add stays disabled while the request is in flight). */
var AddMembersDialog = exports.AddMembersDialog = function AddMembersDialog(_ref2) {
var open = _ref2.open,
onClose = _ref2.onClose,
existingIds = _ref2.existingIds,
onAdd = _ref2.onAdd;
var _useState = (0, _react.useState)([]),
_useState2 = _slicedToArray(_useState, 2),
selectedIds = _useState2[0],
setSelectedIds = _useState2[1];
var _useState3 = (0, _react.useState)(""),
_useState4 = _slicedToArray(_useState3, 2),
message = _useState4[0],
setMessage = _useState4[1];
/* current members drop out of the picker; companies left empty disappear */
var options = (0, _react.useMemo)(function () {
return INVITE_COMPANIES.map(function (company, index) {
return {
id: 1000 + index,
name: company.name,
options: company.people.filter(function (person) {
return !existingIds.includes(person.id);
}).map(function (person) {
return _objectSpread({}, person);
})
};
}).filter(function (company) {
return company.options.length > 0;
});
}, [existingIds]);
var triggerText = selectedIds.length === 0 ? "Choose users" : "".concat(selectedIds.length, " ").concat(selectedIds.length === 1 ? "user" : "users", " selected");
var handleAdd = (0, _react.useCallback)(function () {
var added = INVITE_COMPANIES.flatMap(function (company) {
return company.people.filter(function (person) {
return selectedIds.includes(person.id);
}).map(function (person) {
return {
id: person.id,
name: person.name,
initials: person.initials,
color: person.color,
isClient: !company.isOwnerCompany
};
});
});
onAdd(added);
setSelectedIds([]);
setMessage("");
onClose();
}, [onAdd, onClose, selectedIds]);
return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
open: open,
onClose: onClose
}, /*#__PURE__*/_react.default.createElement(AddMembersDialogStyle, null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Title, null, "Add Users"), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.ContentDivider, null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Content, null, /*#__PURE__*/_react.default.createElement(StyledDialogFields, null, /*#__PURE__*/_react.default.createElement("div", {
className: "field"
}, /*#__PURE__*/_react.default.createElement(_Label.Label, {
htmlFor: "wb-users",
required: true
}, "Users"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
type: "multiple",
options: options,
selected: selectedIds,
onChange: function onChange(value) {
return setSelectedIds(Array.isArray(value) ? value : []);
},
noResultText: "No results",
selectClassName: "wb-user-select",
target: /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
id: "wb-users",
className: "wb-user-trigger",
typographyProps: {
color: selectedIds.length > 0 ? "primary" : "quaternary"
}
}, triggerText),
endAdornment: /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
title: "Group by"
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray"
}, /*#__PURE__*/_react.default.createElement(_Icons.SortGeneralIcon, null))),
renderOption: function renderOption(option, data) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledCandidateRow, null, /*#__PURE__*/_react.default.createElement(_shared.RoundAvatar, {
$bg: String(option.color),
$size: 24,
$bordered: false
}, option.initials), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
className: "candidate-name"
}, option.name)), /*#__PURE__*/_react.default.createElement(StyledRowCheckbox, data));
}
})), /*#__PURE__*/_react.default.createElement("div", {
className: "field"
}, /*#__PURE__*/_react.default.createElement(_Label.Label, {
htmlFor: "wb-invite-message"
}, "Message to Users"), /*#__PURE__*/_react.default.createElement(_Textarea.Textarea, {
id: "wb-invite-message",
className: "wb-invite-message",
placeholder: "Short note to invited users",
value: message,
onChange: function onChange(event) {
return setMessage(event.target.value);
}
}), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
color: "tertiary"
}, "Let people know what this whiteboard is for and why you're inviting them. If provided, this message is included in the invitation email.")))), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.ContentDivider, null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Actions, {
className: "wb-dialog-actions"
}, /*#__PURE__*/_react.default.createElement(_Button.Button, {
variant: "primary",
disabled: selectedIds.length === 0,
onClick: handleAdd
}, "Add"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
variant: "secondary",
onClick: onClose
}, "Cancel")));
};
/* People trigger (icon + member count) + the popover + the dialogs.
Flows mirror the implementation spec. The mock acts as a non-owner
manager, so a crown click always shows the confirm dialog (owners would
transfer immediately), and hover options stay visible after a transfer so
the flows can be replayed. */
var WhiteboardPeopleMenu = exports.WhiteboardPeopleMenu = function WhiteboardPeopleMenu() {
var _removeTarget$name$sp;
var _useState5 = (0, _react.useState)(false),
_useState6 = _slicedToArray(_useState5, 2),
open = _useState6[0],
setOpen = _useState6[1];
var handleOpen = (0, _react.useCallback)(function () {
return setOpen(true);
}, []);
var handleClose = (0, _react.useCallback)(function () {
return setOpen(false);
}, []);
var _useState7 = (0, _react.useState)(BOARD_MEMBERS),
_useState8 = _slicedToArray(_useState7, 2),
boardMembers = _useState8[0],
setBoardMembers = _useState8[1];
var _useState9 = (0, _react.useState)(1),
_useState0 = _slicedToArray(_useState9, 2),
managerId = _useState0[0],
setManagerId = _useState0[1];
var _useState1 = (0, _react.useState)(null),
_useState10 = _slicedToArray(_useState1, 2),
managerTarget = _useState10[0],
setManagerTarget = _useState10[1];
var _useState11 = (0, _react.useState)(null),
_useState12 = _slicedToArray(_useState11, 2),
removeTarget = _useState12[0],
setRemoveTarget = _useState12[1];
var _useState13 = (0, _react.useState)(false),
_useState14 = _slicedToArray(_useState13, 2),
dialogOpen = _useState14[0],
setDialogOpen = _useState14[1];
var handleDialogOpen = (0, _react.useCallback)(function () {
setOpen(false);
setDialogOpen(true);
}, []);
var handleDialogClose = (0, _react.useCallback)(function () {
return setDialogOpen(false);
}, []);
var handleAddMembers = (0, _react.useCallback)(function (added) {
setBoardMembers(function (current) {
return [...current, ...added];
});
}, []);
/* close the menu before opening any dialog (menus-that-open-dialogs rule) */
var handleMakeManager = (0, _react.useCallback)(function (person) {
setOpen(false);
setManagerTarget(person);
}, []);
var handleRemove = (0, _react.useCallback)(function (person) {
setOpen(false);
setRemoveTarget(person);
}, []);
var handleManagerConfirm = (0, _react.useCallback)(function () {
if (managerTarget) {
setManagerId(managerTarget.id);
}
setManagerTarget(null);
}, [managerTarget]);
var handleRemoveConfirm = (0, _react.useCallback)(function () {
if (removeTarget) {
setBoardMembers(function (current) {
return current.filter(function (person) {
return person.id !== removeTarget.id;
});
});
}
setRemoveTarget(null);
}, [removeTarget]);
var members = boardMembers.filter(function (person) {
return !person.isClient;
});
var clients = boardMembers.filter(function (person) {
return person.isClient;
});
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AddMembersDialog, {
open: dialogOpen,
onClose: handleDialogClose,
existingIds: boardMembers.map(function (person) {
return person.id;
}),
onAdd: handleAddMembers
}), /*#__PURE__*/_react.default.createElement(_ConfirmDialog.ConfirmDialog, {
open: managerTarget !== null,
dialogTitle: "Change Whiteboard Manager",
dialogContent: "By changing the Whiteboard Manager, you'll lose the ability to manage this whiteboard.",
confirmBtnText: "Change",
shouldShowCancelButton: true,
onConfirm: handleManagerConfirm,
onCancel: function onCancel() {
return setManagerTarget(null);
}
}), /*#__PURE__*/_react.default.createElement(_ConfirmDialog.ConfirmDialog, {
open: removeTarget !== null,
dialogTitle: "Remove from Whiteboard",
dialogContent: "Remove ".concat((_removeTarget$name$sp = removeTarget === null || removeTarget === void 0 ? void 0 : removeTarget.name.split(" ")[0]) !== null && _removeTarget$name$sp !== void 0 ? _removeTarget$name$sp : "", " from this whiteboard? They will immediately lose access to it."),
confirmBtnText: "Remove",
shouldShowCancelButton: true,
onConfirm: handleRemoveConfirm,
onCancel: function onCancel() {
return setRemoveTarget(null);
}
}), /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
open: open,
onOpen: handleOpen,
onClose: handleClose,
position: "bottom-start",
target: /*#__PURE__*/_react.default.createElement(_CounterButton.CounterButton, {
active: open,
label: String(boardMembers.length),
icon: /*#__PURE__*/_react.default.createElement(_Icons.PeopleIcon, null),
className: open ? "open" : undefined,
onClearAll: function onClearAll() {
return undefined;
}
})
}, /*#__PURE__*/_react.default.createElement(StyledPeopleMenu, null, /*#__PURE__*/_react.default.createElement(_Menu.MenuHeader, {
title: "People",
rightElement: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
size: "small",
variant: "text gray",
onClick: handleDialogOpen
}, /*#__PURE__*/_react.default.createElement(_Icons.AddCrossTinyIcon, null))
}), /*#__PURE__*/_react.default.createElement("div", {
className: "people-scroll"
}, /*#__PURE__*/_react.default.createElement(PeopleMenuSection, {
label: "Members",
people: members,
managerId: managerId,
onMakeManager: handleMakeManager,
onRemove: handleRemove
}), clients.length > 0 ? /*#__PURE__*/_react.default.createElement(PeopleMenuSection, {
label: "Clients",
people: clients,
managerId: managerId,
onMakeManager: handleMakeManager,
onRemove: handleRemove
}) : null))));
};
//# sourceMappingURL=peopleMenu.js.map