@activecollab/components
Version:
ActiveCollab Components
1,039 lines • 53.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
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");
var _EditableText = require("../../components/EditableText");
var _IconButton = require("../../components/IconButton");
var _Icons = require("../../components/Icons");
var _List = require("../../components/List");
var _Menu = require("../../components/Menu");
var _Signifier = require("../../components/Signifier");
var _Tooltip = require("../../components/Tooltip");
var _Transitions = require("../../components/Transitions");
var _Typography = require("../../components/Typography");
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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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; }
/* ------------------------------------------------------------------ */
/* Outline sidebar */
/* ------------------------------------------------------------------ */
/* An OUTLINE, not a layers panel. Whiteboard elements are a flat list today
with no nesting and no names, so the hierarchy here is AUTHORED rather than
derived from z-order or spatial containment: the user creates groups, names
things, and drags to order them, and all of that is persisted.
Deliberately excluded: stacking order. z-order stays on the element context
menu (send to front / back / forward / backward) and the sidebar never shows
or edits it — the outline order and the paint order are different questions,
and conflating them is what makes layers panels confusing on boards that are
really structured documents.
The model this prototype stands in for:
GroupElement a new element type on the single-table-inheritance
`whiteboard_elements` table — no migration needed, and it
inherits ops, realtime, undo/redo and trash for free.
Element.jsx's render switch already returns null by
default, so a group draws nothing on the canvas. It must be
filtered out of the spatial index, marquee select and the
z-order sort.
name a real authored field, separate from `content` (the text
painted on the canvas). Needed because the eventual goal is
exporting the outline as a document, and `content` is empty
on every freshly drawn shape and absent on freehand.
outlinePosition
integer ordering SCOPED PER CONTAINER — groups ordered
among themselves, elements ordered within their group.
Named to avoid colliding with `element.position`, which is
already the {x, y} canvas coordinate. Reordering follows
the house TaskReorderer contract: the client sends the full
ordered id list, the server renumbers 1..N in one
transaction. Here that is a new `reorder` op on the
existing ops pipeline, so it inherits undo/redo, the id_map
reconcile and the realtime merge.
ONE level of nesting only. Groups cannot contain groups — an exported
document does not want arbitrarily deep headings, and multi-level grouping
is a later, separate model. */
/* The local `Glyph` type is for this story's hand-drawn SVGs; the DS icons are
forwardRef components, so the map needs the wider component type. */
var OUTLINE_TYPE_ICONS = exports.OUTLINE_TYPE_ICONS = {
circle: _Icons.CircleIcon,
roundedRectangle: _Icons.RoundedRectangleIcon,
triangle: _Icons.TriangleIcon,
postit: _Icons.NoteIcon,
text: _Icons.TextIcon,
freehand: _Icons.DrawIcon,
link: _Icons.InsertLinkIcon,
file: _Icons.AttachmentIcon,
task: _Icons.TaskIcon,
project: _Icons.ProjectIcon
};
/* Fallback label when an element has no name. Deliberately reads as a
PLACEHOLDER (muted + italic) rather than as a name, because an unnamed
element exports as nothing — the styling is the warning. */
var OUTLINE_TYPE_LABELS = exports.OUTLINE_TYPE_LABELS = {
circle: "Circle",
roundedRectangle: "Rounded Rectangle",
triangle: "Triangle",
postit: "Sticky Note",
text: "Text",
freehand: "Freehand",
link: "Link",
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
bigger board scrolled out of view — a four-element outline would not show
whether the grouping reads well. */
var OUTLINE_GROUPS = exports.OUTLINE_GROUPS = [{
id: "group-discovery",
name: "Discovery phase"
}, {
id: "group-sketches",
name: "Solution sketches"
}, {
id: "group-questions",
name: "Open questions"
}];
var OUTLINE_ELEMENTS = exports.OUTLINE_ELEMENTS = [{
id: "sticky",
name: "Interview five customers",
type: "postit",
connections: 2,
groupId: "group-discovery"
}, {
id: "shape-rounded",
name: "Problem statement",
type: "roundedRectangle",
connections: 3,
groupId: "group-discovery"
}, {
id: "outline-freehand",
name: null,
type: "freehand",
groupId: "group-discovery"
}, {
id: "shape-circle",
name: "Success metric",
type: "circle",
locked: true,
connections: 1,
groupId: "group-discovery"
}, {
id: "outline-sketch-link",
name: "Competitor teardown",
type: "link",
groupId: "group-sketches"
}, {
id: "outline-sketch-file",
name: "Wireframes v3.pdf",
type: "file",
connections: 1,
groupId: "group-sketches"
}, {
id: "outline-sketch-text",
name: null,
type: "text",
groupId: "group-sketches"
},
/* A deliberately long name, so the truncation and the right-edge behaviour of
the signifiers and the counter are visible in the story. */
{
id: "outline-parking",
name: "Parking lot for everything we could not agree on today",
type: "postit",
connections: 4,
locked: true,
groupId: null
}, {
id: "shape-triangle",
name: null,
type: "triangle",
groupId: null
}, {
id: "outline-q3",
name: "Revisit in Q3",
type: "text",
connections: 12,
groupId: null
}];
/* Min is the point below which a group name plus its counter stops being
readable; max follows the common side-panel rule of thumb of 3x the min, past
which the panel competes with the canvas for the screen rather than annotating
it. The default sits just above the min — panels of this sort open narrow and
are widened on demand, not the other way round. */
var OUTLINE_MIN_WIDTH = exports.OUTLINE_MIN_WIDTH = 260;
var OUTLINE_MAX_WIDTH = exports.OUTLINE_MAX_WIDTH = OUTLINE_MIN_WIDTH * 3;
var OUTLINE_WIDTH = exports.OUTLINE_WIDTH = 320;
var UNGROUPED = exports.UNGROUPED = "__ungrouped__";
var StyledOutlineSidebar = exports.StyledOutlineSidebar = _styledComponents.default.aside.withConfig({
displayName: "outline__StyledOutlineSidebar",
componentId: "sc-173k9fg-0"
})(["flex-shrink:0;position:relative;box-sizing:border-box;display:flex;flex-direction:column;border-right:1px solid var(--selectable);background-color:var(--page-paper-main);font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;"]);
/* Grab strip on the RIGHT edge, because the panel is docked left — dragging it
right widens. It sits outside the row list and uses mouse events rather than
HTML5 drag, so it can never be mistaken for a row reorder. 3px wide with a
larger invisible hit area is the usual compromise: easy to grab. The border
line itself stays the selectable grey until hover paints the active token
over it. */
var StyledOutlineResizer = exports.StyledOutlineResizer = _styledComponents.default.div.withConfig({
displayName: "outline__StyledOutlineResizer",
componentId: "sc-173k9fg-1"
})(["position:absolute;top:0;bottom:0;right:-4px;width:8px;cursor:col-resize;z-index:2;&::after{content:\"\";position:absolute;top:0;bottom:0;left:50%;margin-left:-0.5px;width:1px;background-color:var(--selectable-active);opacity:0;transition:opacity 150ms ease;}&:hover::after,&.resizing::after{opacity:1;}"]);
var StyledOutlineBody = exports.StyledOutlineBody = _styledComponents.default.div.withConfig({
displayName: "outline__StyledOutlineBody",
componentId: "sc-173k9fg-2"
})(["flex:1;overflow-y:auto;padding:6px 0 24px;"]);
/* Rows are bordered, not carded — the outline is a dense list and rounded
tiles at this density read as clutter. */
/* Row geometry is My Work's, not something invented for this sidebar: the app's
`ListItem` is `tw-w-full tw-flex tw-items-center tw-h-10` — a fixed 40px row —
with `border-bottom: 1px solid var(--color-theme-300)` from `.list-item-wrapper`
and `background-color: var(--color-theme-200)` on `.task-list-item:hover`.
Reusing those exact values is what makes the outline read as an ActiveCollab
list rather than as a bespoke panel. */
var StyledOutlineRow = exports.StyledOutlineRow = _styledComponents.default.div.withConfig({
displayName: "outline__StyledOutlineRow",
componentId: "sc-173k9fg-3"
})(["display:flex;align-items:center;height:40px;box-sizing:border-box;padding-right:8px;cursor:pointer;position:relative;border-bottom:1px solid var(--color-theme-300);&:hover{background-color:var(--color-theme-200);}&.selected{background-color:var(--color-theme-200);box-shadow:inset 2px 0 0 0 ", ";}&.drop-before::after,&.drop-after::after{content:\"\";position:absolute;left:0;right:0;height:2px;background-color:", ";z-index:1;}&.drop-before::after{top:-1px;}&.drop-after::after{bottom:-1px;}&.drop-into{background-color:var(--color-theme-200);box-shadow:inset 0 0 0 1px ", ";}&.dragging{opacity:0.4;}.outline-trailing{flex-shrink:0;display:flex;align-items:center;}.outline-options{margin-left:auto;flex-shrink:0;display:flex;align-items:center;padding-left:4px;}.outline-hover{opacity:0;transition:opacity 200ms ease;}&:hover .outline-hover,.outline-hover.open,.outline-hover:focus-within{opacity:1;}"], _elements.SELECTION_BLUE, _elements.SELECTION_BLUE, _elements.SELECTION_BLUE);
/* 8px so the 24px toggle sits in the same left rail as the app's ExpandToggle,
scaled down from My Work's 24px page margin for a 300px panel. */
var StyledOutlineGroupRow = exports.StyledOutlineGroupRow = (0, _styledComponents.default)(StyledOutlineRow).withConfig({
displayName: "outline__StyledOutlineGroupRow",
componentId: "sc-173k9fg-4"
})(["padding-left:8px;"]);
/* 32px = where the group's 24px toggle ends. The child's type icon starts
exactly there, putting the child NAME one 16px step right of the group name —
enough to read as nested without a staircase, which is all one level of
nesting ever needs. */
var StyledOutlineChildRow = exports.StyledOutlineChildRow = (0, _styledComponents.default)(StyledOutlineRow).withConfig({
displayName: "outline__StyledOutlineChildRow",
componentId: "sc-173k9fg-5"
})(["padding-left:32px;"]);
/* Matches the app's ExpandToggle exactly: CollapseExpandSingleIcon at its
intrinsic 24px, rotate(0) expanded and rotate(180deg) collapsed, over
`transition-transform` 200ms. */
var StyledOutlineToggle = exports.StyledOutlineToggle = _styledComponents.default.button.withConfig({
displayName: "outline__StyledOutlineToggle",
componentId: "sc-173k9fg-6"
})(["border:0;padding:0;margin:0 8px 0 0;background:none;cursor:pointer;display:flex;align-items:center;flex-shrink:0;transition:transform 200ms ease;&.collapsed{transform:rotate(180deg);}"]);
/* Same treatment as the count badges on the System Settings pages — a Chip on
var(--color-theme-300) with var(--color-theme-900) text — at the 18px small
size, which sits inside a 40px row without crowding it. Wrapped so the 8px
left margin is one decision rather than repeated at each call site: it is what
keeps the chip a fixed distance from the name whether the name is an
EditableText (whose input carries its own 4px padding) or plain Typography. */
var StyledOutlineCounter = exports.StyledOutlineCounter = _styledComponents.default.span.withConfig({
displayName: "outline__StyledOutlineCounter",
componentId: "sc-173k9fg-7"
})(["display:flex;align-items:center;flex-shrink:0;margin-left:8px;"]);
var OutlineCounter = exports.OutlineCounter = function OutlineCounter(_ref) {
var count = _ref.count;
return /*#__PURE__*/_react.default.createElement(StyledOutlineCounter, {
className: "outline-trailing"
}, /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
label: String(count),
backgroundColor: "var(--color-theme-300)",
color: "var(--color-theme-900)",
size: "small"
}));
};
/* The 2px separator dot is a house convention rather than part of the DS
Signifier: `_components.task-signifiers.less` puts it on `.c-signifier:before`
at 2px square, `var(--color-theme-600)`, `margin: 0 6px`, with no
`:not(:first-child)` guard — so the first signifier gets a leading dot too,
which is exactly what separates it from the name. */
var StyledOutlineSignifiers = exports.StyledOutlineSignifiers = _styledComponents.default.span.withConfig({
displayName: "outline__StyledOutlineSignifiers",
componentId: "sc-173k9fg-8"
})(["display:inline-flex;align-items:center;flex-shrink:0;.c-signifier::before{content:\"\";flex-shrink:0;width:2px;height:2px;margin:0 6px;border-radius:100%;background-color:var(--color-theme-600);}"]);
/* The DS EditableText is an always-live input styled as text — it reveals its
border on hover and focus rather than swapping into an edit mode. That makes
it a click-to-edit target, which competes with the row's own click. Element
rows therefore keep it `disabled` until the row is SELECTED: the first click
selects, and only then does the name accept a caret. Group rows have no
selected state, so their name is always live (matching the task-list header
in ListView) and the toggle, count and row padding carry the collapse. */
/* 24px reserved so the icon column is stable whether or not a type icon is a
perfect 16px square, and so it lines up with the group toggle above it. */
var StyledOutlineTypeIcon = exports.StyledOutlineTypeIcon = _styledComponents.default.span.withConfig({
displayName: "outline__StyledOutlineTypeIcon",
componentId: "sc-173k9fg-9"
})(["display:flex;align-items:center;justify-content:flex-start;width:24px;flex-shrink:0;"]);
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,&.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
grouped by ListSeparator. Every row is an icon plus a caption — no submenu
rows and no icon-only action strip, so there is exactly one way to read the
menu.
Note where STACKING lives: bring to front / send to back are here, not in the
outline. The outline orders the document; the menu orders the pixels. Keeping
them apart is the whole reason the sidebar can be an outline rather than a
layers panel. */
var OUTLINE_MENU_LIST_STYLE = exports.OUTLINE_MENU_LIST_STYLE = {
padding: "8px 0"
};
var OUTLINE_MENU_WIDTH = exports.OUTLINE_MENU_WIDTH = 264;
/* Same drill-in mechanics as the board Settings menu: the paper clips the two
sliding panels and gives them a positioning context. */
var OutlineMenuSliderStyle = exports.OutlineMenuSliderStyle = (0, _styledComponents.createGlobalStyle)([".c-simple-menu__paper.outline-element-menu{overflow:hidden;position:relative;}"]);
var StyledOutlineElementMenu = exports.StyledOutlineElementMenu = _styledComponents.default.div.withConfig({
displayName: "outline__StyledOutlineElementMenu",
componentId: "sc-173k9fg-11"
})([".drill-item{justify-content:space-between;}.drill-item .opt-left{display:flex;align-items:center;min-width:0;}.drill-item .opt-left > svg:first-child{margin-right:8px;}.drill-item .drill-caret{flex-shrink:0;fill:var(--color-theme-600);}"]);
var ARRANGE_ITEMS = exports.ARRANGE_ITEMS = [{
label: "Bring to Front",
Icon: _Icons.LayerFrontIcon
}, {
label: "Send Forward",
Icon: _Icons.LayerForwardIcon
}, {
label: "Send Backward",
Icon: _Icons.LayerBackwardIcon
}, {
label: "Send to Back",
Icon: _Icons.LayerBackIcon
}];
var OutlineElementOptionsMenu = exports.OutlineElementOptionsMenu = function OutlineElementOptionsMenu(_ref2) {
var locked = _ref2.locked,
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],
setOpen = _useState2[1];
var _useState3 = (0, _react.useState)("index"),
_useState4 = _slicedToArray(_useState3, 2),
view = _useState4[0],
setView = _useState4[1];
var _useState5 = (0, _react.useState)(true),
_useState6 = _slicedToArray(_useState5, 2),
isLeft = _useState6[0],
setIsLeft = _useState6[1];
var _useState7 = (0, _react.useState)(0),
_useState8 = _slicedToArray(_useState7, 2),
height = _useState8[0],
setHeight = _useState8[1];
var measure = (0, _react.useCallback)(function (node) {
if (node) {
setHeight(node.offsetHeight);
}
}, []);
var goToArrange = function goToArrange() {
setView("arrange");
setIsLeft(true);
};
var backToIndex = function backToIndex() {
setView("index");
setIsLeft(false);
};
var handleClose = function handleClose() {
setOpen(false);
setView("index");
setIsLeft(true);
};
var indexView = /*#__PURE__*/_react.default.createElement(StyledOutlineElementMenu, null, /*#__PURE__*/_react.default.createElement(_List.List, {
style: OUTLINE_MENU_LIST_STYLE,
tabIndex: -1
}, 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", {
className: "opt-left"
}, /*#__PURE__*/_react.default.createElement(_Icons.LayersIcon, null), "Arrange"), /*#__PURE__*/_react.default.createElement(_Icons.CaretRightIcon, {
className: "drill-caret",
width: 16,
height: 16
})), /*#__PURE__*/_react.default.createElement(_List.ListSeparator, null), /*#__PURE__*/_react.default.createElement(_List.ListItem, {
onClick: function onClick() {
onToggleLock();
handleClose();
}
}, /*#__PURE__*/_react.default.createElement(_Icons.LockIcon, null), locked ? "Unlock" : "Lock"), /*#__PURE__*/_react.default.createElement(_List.ListSeparator, null), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.TrashIcon, null), "Move to Trash")));
var arrangeView = /*#__PURE__*/_react.default.createElement(StyledOutlineElementMenu, null, /*#__PURE__*/_react.default.createElement(_Menu.MenuHeader, {
title: "Arrange",
leftElement: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
type: "button",
variant: "text gray",
size: "small",
onClick: backToIndex,
"aria-label": "Back"
}, /*#__PURE__*/_react.default.createElement(_Icons.ArrowLeftIcon, null))
}), /*#__PURE__*/_react.default.createElement(_List.List, {
style: OUTLINE_MENU_LIST_STYLE,
tabIndex: -1
}, ARRANGE_ITEMS.map(function (_ref3) {
var label = _ref3.label,
Icon = _ref3.Icon;
return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
key: label,
onClick: backToIndex
}, /*#__PURE__*/_react.default.createElement(Icon, null), label);
})));
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(OutlineMenuSliderStyle, null), /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
open: open,
onOpen: function onOpen() {
return setOpen(true);
},
onClose: handleClose,
position: "bottom-end",
menuClassName: "outline-element-menu",
target: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
type: "button",
variant: "text gray",
className: open ? "open" : undefined,
active: open
}, /*#__PURE__*/_react.default.createElement(_Icons.TreeDotsIcon, null))
}, /*#__PURE__*/_react.default.createElement(_Transitions.ResizeTransition, {
in: true,
style: {
height,
width: OUTLINE_MENU_WIDTH
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
position: "relative",
overflow: "hidden"
}
}, /*#__PURE__*/_react.default.createElement(_Transitions.SlideLeftRightTransition, {
in: view === "index",
direction: isLeft ? "left" : "right"
}, /*#__PURE__*/_react.default.createElement("div", {
ref: measure,
style: {
width: OUTLINE_MENU_WIDTH
}
}, indexView)), /*#__PURE__*/_react.default.createElement(_Transitions.SlideLeftRightTransition, {
in: view === "arrange",
direction: isLeft ? "left" : "right"
}, /*#__PURE__*/_react.default.createElement("div", {
ref: measure,
style: {
width: OUTLINE_MENU_WIDTH
}
}, arrangeView))))));
};
var OutlineGroupOptionsMenu = exports.OutlineGroupOptionsMenu = function OutlineGroupOptionsMenu() {
var _useState9 = (0, _react.useState)(false),
_useState0 = _slicedToArray(_useState9, 2),
open = _useState0[0],
setOpen = _useState0[1];
return /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
open: open,
onOpen: function onOpen() {
return setOpen(true);
},
onClose: function onClose() {
return setOpen(false);
},
position: "bottom-end",
target: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
type: "button",
variant: "text gray",
className: open ? "open" : undefined,
active: open
}, /*#__PURE__*/_react.default.createElement(_Icons.TreeDotsIcon, 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), "Ungroup"), /*#__PURE__*/_react.default.createElement(_List.ListSeparator, null), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.TrashIcon, null), "Move to Trash")));
};
var INFO_ROWS = exports.INFO_ROWS = [["Owner", "Ilija Studen"], ["Created", "Jul 30, 2026"], ["Members", "12"], ["Elements", "48"], ["Last edited", "2 hours ago"]];
/* The upper-left menu — exit fullscreen, board name, the Show / Hide Sidebar
toggle and the people menu. It renders in one of two places: floating over the
board while the sidebar is closed, and inside the sidebar's header once it
opens, so the controls follow the panel rather than being shoved aside by it. */
var LeftMenuContents = exports.LeftMenuContents = function LeftMenuContents(_ref4) {
var sidebarOpen = _ref4.sidebarOpen,
onToggleSidebar = _ref4.onToggleSidebar,
boardName = _ref4.boardName,
onRenameBoard = _ref4.onRenameBoard;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
title: "Back to Whiteboards"
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray"
}, /*#__PURE__*/_react.default.createElement(_Icons.ArrowLeftIcon, null))), /*#__PURE__*/_react.default.createElement("span", {
className: "wb-title"
}, /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
value: boardName,
variant: "Title 2",
weight: "bold",
onSave: function onSave(event) {
return onRenameBoard(event.target.value);
},
inputProps: {
maxLength: 150
}
})), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
title: sidebarOpen ? "Hide Sidebar" : "Show Sidebar"
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray",
onClick: onToggleSidebar
}, /*#__PURE__*/_react.default.createElement(_Icons.SidebarLeftIcon, null))), /*#__PURE__*/_react.default.createElement(_peopleMenu.WhiteboardPeopleMenu, null));
};
/* When the sidebar is open the left menu becomes its header: same controls, but
laid out as a flat 60px bar with the board name flexing to fill the middle. */
var StyledSidebarHeader = exports.StyledSidebarHeader = _styledComponents.default.div.withConfig({
displayName: "outline__StyledSidebarHeader",
componentId: "sc-173k9fg-12"
})(["display:flex;align-items:center;gap:2px;height:60px;padding:0 12px;box-sizing:border-box;flex-shrink:0;.wb-title{flex:1;min-width:0;margin:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"]);
/* Centered segmented switch between the dock's two panels; the active one is
highlighted. This row replaces the old per-panel header. */
var StyledChooseRow = exports.StyledChooseRow = _styledComponents.default.div.withConfig({
displayName: "outline__StyledChooseRow",
componentId: "sc-173k9fg-13"
})(["display:flex;justify-content:center;padding:12px 16px;flex-shrink:0;"]);
/* The app renders the switch through ChooseV2 in a fixed 224px slot with the
button group centered inside it (the group alone is narrower than the slot,
and ChooseV2's own flex container leaves it at the left edge). */
var StyledPanelChooseSlot = exports.StyledPanelChooseSlot = _styledComponents.default.div.withConfig({
displayName: "outline__StyledPanelChooseSlot",
componentId: "sc-173k9fg-14"
})(["width:224px;.c-btn-group{margin:0 auto;}"]);
var StyledInfoPanel = exports.StyledInfoPanel = _styledComponents.default.div.withConfig({
displayName: "outline__StyledInfoPanel",
componentId: "sc-173k9fg-15"
})(["flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;.info-meta{display:flex;flex-direction:column;gap:10px;}.info-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}"]);
/* Mock only — the Info panel's content is a placeholder while the two-panel dock
is explored; the fields here are not the point. */
var InfoPanelContent = exports.InfoPanelContent = function InfoPanelContent(_ref5) {
var boardName = _ref5.boardName;
return /*#__PURE__*/_react.default.createElement(StyledInfoPanel, null, /*#__PURE__*/_react.default.createElement(_Typography.Header3, {
color: "primary"
}, boardName), /*#__PURE__*/_react.default.createElement("div", {
className: "info-meta"
}, INFO_ROWS.map(function (_ref6) {
var _ref7 = _slicedToArray(_ref6, 2),
label = _ref7[0],
value = _ref7[1];
return /*#__PURE__*/_react.default.createElement("div", {
className: "info-row",
key: label
}, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
color: "secondary"
}, label), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
weight: "medium"
}, value));
})));
};
/* Centered text button below the group list — same text-gray treatment as the
old header icon (no outline, gray fill on hover), now with a label since it is
no longer squeezed into a header. */
var StyledNewGroupRow = exports.StyledNewGroupRow = _styledComponents.default.div.withConfig({
displayName: "outline__StyledNewGroupRow",
componentId: "sc-173k9fg-16"
})(["display:flex;justify-content:center;padding:12px 0 4px;svg{width:16px;height:16px;margin-right:6px;}"]);
var LeftSidebar = exports.LeftSidebar = function LeftSidebar(_ref8) {
var selectedId = _ref8.selectedId,
onSelect = _ref8.onSelect,
activePanel = _ref8.activePanel,
onPanelChange = _ref8.onPanelChange,
sidebarOpen = _ref8.sidebarOpen,
onToggleSidebar = _ref8.onToggleSidebar,
boardName = _ref8.boardName,
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],
setWidth = _useState10[1];
var _useState11 = (0, _react.useState)(false),
_useState12 = _slicedToArray(_useState11, 2),
resizing = _useState12[0],
setResizing = _useState12[1];
var _useState13 = (0, _react.useState)(OUTLINE_GROUPS),
_useState14 = _slicedToArray(_useState13, 2),
groups = _useState14[0],
setGroups = _useState14[1];
var _useState15 = (0, _react.useState)(OUTLINE_ELEMENTS),
_useState16 = _slicedToArray(_useState15, 2),
elements = _useState16[0],
setElements = _useState16[1];
var _useState17 = (0, _react.useState)(["group-sketches"]),
_useState18 = _slicedToArray(_useState17, 2),
collapsed = _useState18[0],
setCollapsed = _useState18[1];
var _useState19 = (0, _react.useState)(null),
_useState20 = _slicedToArray(_useState19, 2),
dragId = _useState20[0],
setDragId = _useState20[1];
var _useState21 = (0, _react.useState)(null),
_useState22 = _slicedToArray(_useState21, 2),
dropSpot = _useState22[0],
setDropSpot = _useState22[1];
var isGroup = (0, _react.useCallback)(function (id) {
return groups.some(function (group) {
return group.id === id;
});
}, [groups]);
var membersOf = (0, _react.useCallback)(function (groupId) {
return elements.filter(function (element) {
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) {
return entry !== id;
}) : [...current, id];
});
}, []);
var renameGroup = (0, _react.useCallback)(function (id, name) {
setGroups(function (current) {
return current.map(function (group) {
return group.id === id ? _objectSpread(_objectSpread({}, group), {}, {
name
}) : group;
});
});
}, []);
var renameElement = (0, _react.useCallback)(function (id, name) {
setElements(function (current) {
return current.map(function (element) {
return element.id === id ? _objectSpread(_objectSpread({}, element), {}, {
name
}) : element;
});
});
}, []);
var toggleLock = (0, _react.useCallback)(function (id) {
setElements(function (current) {
return current.map(function (element) {
return element.id === id ? _objectSpread(_objectSpread({}, element), {}, {
locked: !element.locked
}) : element;
});
});
}, []);
/* The gesture is tracked from its ORIGIN (pointer x + width at mousedown)
rather than from the pointer's absolute position, so the panel edge stays
locked to the cursor even once the width clamps at a bound — otherwise the
pointer drifts away from the edge and the panel jumps when it comes back.
Listeners go on window so the drag survives the pointer leaving the strip,
and body user-select is suspended so dragging does not select the rows. */
var startResize = (0, _react.useCallback)(function (event) {
var _event$currentTarget$, _event$currentTarget$2;
event.preventDefault();
var startX = event.clientX;
var startWidth = (_event$currentTarget$ = (_event$currentTarget$2 = event.currentTarget.parentElement) === null || _event$currentTarget$2 === void 0 ? void 0 : _event$currentTarget$2.offsetWidth) !== null && _event$currentTarget$ !== void 0 ? _event$currentTarget$ : 0;
var previousUserSelect = document.body.style.userSelect;
setResizing(true);
document.body.style.userSelect = "none";
document.body.style.cursor = "col-resize";
var handleMove = function handleMove(moveEvent) {
var next = startWidth + (moveEvent.clientX - startX);
setWidth(Math.min(OUTLINE_MAX_WIDTH, Math.max(OUTLINE_MIN_WIDTH, next)));
};
var _handleUp = function handleUp() {
setResizing(false);
document.body.style.userSelect = previousUserSelect;
document.body.style.cursor = "";
window.removeEventListener("mousemove", handleMove);
window.removeEventListener("mouseup", _handleUp);
};
window.addEventListener("mousemove", handleMove);
window.addEventListener("mouseup", _handleUp);
}, []);
var addGroup = (0, _react.useCallback)(function () {
setGroups(function (current) {
return [...current, {
id: "group-".concat(Date.now()),
name: "New group"
}];
});
}, []);
/* Reorder mirrors the server contract: splice the moved entry into its new
slot, then treat the resulting array order AS the 1..N renumbering the
server would write back. Groups reorder among groups; an element moves
within or between containers, and its groupId follows the drop target —
which is the whole of "one level of nesting" as an invariant, since a
group is never a valid child. */
var handleDrop = (0, _react.useCallback)(function () {
var draggedId = dragId;
var spot = dropSpot;
setDragId(null);
setDropSpot(null);
if (!draggedId || !spot || draggedId === spot.id) {
return;
}
if (isGroup(draggedId)) {
/* a group can only land among groups, never inside one */
if (spot.kind === "into" || !isGroup(spot.id)) {
return;
}
setGroups(function (current) {
var from = current.findIndex(function (group) {
return group.id === draggedId;
});
var next = [...current];
var _next$splice = next.splice(from, 1),
_next$splice2 = _slicedToArray(_next$splice, 1),
moved = _next$splice2[0];
var to = next.findIndex(function (group) {
return group.id === spot.id;
});
next.splice(spot.kind === "before" ? to : to + 1, 0, moved);
return next;
});
return;
}
setElements(function (current) {
var from = current.findIndex(function (element) {
return element.id === draggedId;
});
var next = [...current];
var _next$splice3 = next.splice(from, 1),
_next$splice4 = _slicedToArray(_next$splice3, 1),
moved = _next$splice4[0];
if (spot.kind === "into") {
var groupId = spot.id === UNGROUPED ? null : spot.id;
var last = next.reduce(function (acc, element, index) {
return element.groupId === groupId ? index : acc;
}, -1);
next.splice(last + 1, 0, _objectSpread(_objectSpread({}, moved), {}, {
groupId
}));
return next;
}
var target = next.find(function (element) {
return element.id === spot.id;
});
if (!target) {
return current;
}
var to = next.findIndex(function (element) {
return element.id === spot.id;
});
next.splice(spot.kind === "before" ? to : to + 1, 0, _objectSpread(_objectSpread({}, moved), {}, {
groupId: target.groupId
}));
return next;
});
}, [dragId, dropSpot, isGroup]);
var rowDragProps = (0, _react.useCallback)(function (id) {
return {
draggable: true,
onDragStart: function onDragStart(event) {
/* A live EditableText input sits inside the row, and dragging a text
selection inside it must not turn into a row reorder. */
if (event.target.closest("input")) {
event.preventDefault();
return;
}
event.stopPropagation();
setDragId(id);
},
onDragEnd: function onDragEnd() {
setDragId(null);
setDropSpot(null);
},
onDragOver: function onDragOver(event) {
if (!dragId || dragId === id) {
return;
}
event.preventDefault();
event.stopPropagation();
var box = event.currentTarget.getBoundingClientRect();
var isTopHalf = event.clientY - box.top < box.height / 2;
/* an element dragged onto a GROUP header joins that group; the
insertion halves are reserved for reordering groups themselves */
if (isGroup(id) && !isGroup(dragId)) {
setDropSpot({
kind: "into",
id
});
return;
}
setDropSpot({
kind: isTopHalf ? "before" : "after",
id
});
},
onDrop: function onDrop(event) {
event.preventDefault();
event.stopPropagation();
handleDrop();
}
};
}, [dragId, handleDrop, isGroup]);
var dropClass = (0, _react.useCallback)(function (id) {
if (dragId === id) {
return "dragging";
}
if (!dropSpot || dropSpot.id !== id) {
return "";
}
return "drop-".concat(dropSpot.kind);
}, [dragId, dropSpot]);
var renderElementRow = function renderElementRow(element) {
/* 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);
}
/* 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: muted ? "var(--color-theme-500)" : "var(--color-theme-700)"
})), /*#__PURE__*/_react.default.createElement(StyledOutlineName, {
className: muted ? "unnamed" : ""
}, renamable ? /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
value: outlineLabel(element),
variant: "Body 2",
weight: "medium",
disabled: !selected,
onSave: function onSave(event) {
return renameElement(element.id, event.target.value);
},
inputProps: {
maxLength: 150
}
}) :
/*#__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,
value: element.connections,
tooltipText: "".concat(element.connections, " ").concat(element.connections === 1 ? "connection" : "connections")
}) : null, element.locked ? /*#__PURE__*/_react.default.createElement(_Signifier.Signifier, {
type: _Icons.LockSmallIcon,
tooltipText: "Locked"
}) : null) : null, element.limited ? null : /*#__PURE__*/_react.default.createElement("span", {
className: "outline-options outline-hover"
}, /*#__PURE__*/_react.default.createElement(OutlineElementOptionsMenu, {
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 renamable ? toggleLock(element.id) : onToggleElementLock(element.id);
}
})));
};
return /*#__PURE__*/_react.default.createElement(StyledOutlineSidebar, {
style: {
width
}
}, /*#__PURE__*/_react.default.createElement(StyledOutlineResizer, {
className: resizing ? "resizing" : "",
onMouseDown: startResize,
role: "separator",
"aria-orientation": "vertical",
"aria-label": "Resize outline"
}), /*#__PURE__*/_react.default.createElement(StyledSidebarHeader, null, /*#__PURE__*/_react.default.createElement(LeftMenuContents, {
sidebarOpen: sidebarOpen,
onToggleSidebar: onToggleSidebar,
boardName: boardName,
onRenameBoard: onRenameBoard
})), /*#__PURE__*/_react.default.createElement(StyledChooseRow, null, /*#__PURE__*/_react.default.createElement(StyledPanelChooseSlot, null, /*#__PURE__*/_react.default.createElement(_ChooseV.ChooseV2, {
required: true,
options: [{
id: "info",
name: "Info"
}, {
id: "outline",
name: "Outline"
}],
selected: [activePanel],
onChange: function onChange(selected) {
return onPanelChange(selected[0]);
}
}))), activePanel === "info" ? /*#__PURE__*/_react.default.createElement(InfoPanelContent, {
boardName: boardName
}) : null, activePanel === "outline" ? /*#__PURE__*/_react.default.createElement(StyledOutlineBody, null, /*#__PURE__*/_react.default.createElement(StyledOutlineGroupRow, {
className: (dropSpot === null || dropSpot === void 0 ? void 0 : dropSpot.kind) === "into" && dropSpot.id === UNGROUPED ? "drop-into" : "",
onClick: function onClick() {
return toggleCollapsed(UNGROUPED);
},
onDragOver: function onDragOver(event) {
if (!dragId || isGroup(dragId)) {
return;
}
event.preventDefault();
setDropSpot({
kind: "into",
id: UNGROUPED
});
},
onDrop: function onDrop(event) {
event.preventDefault();
handleDrop();
}
}, /*#__PURE__*/_react.default.createElement(StyledOutlineToggle, {
type: "button",
className: collapsed.includes(UNGROUPED) ? "collapsed" : "",
"aria-label": "Toggle ungrouped",
onClick: function onClick(event) {
event.stopPropagation();
toggleCollapsed(UNGROUPED);
}
}, /*#__PURE__*/_react.default.createElement(_Icons.CollapseExpandSingleIcon, {
fill: "var(--color-theme-700)"
})), /*#__PURE__*/_react.default.createElement(StyledOutlineName, null, /*#__PURE__*/_react.default.createElement(_Typography.Header3, {
color: "primary"
}, "Ungrouped")), /*#__PURE__*/_react.default.createElement(OutlineCounter, {
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, {
key: group.id
}, /*#__PURE__*/_react.default.createElement(StyledOutlineGroupRow, _extends({
className: dropClass(group.id),
onClick: function onClick() {
return toggleCollapsed(group.id);
}
}, rowDragProps(group.id)), /*#__PURE__*/_react.default.createElement(StyledOutlineToggle, {
type: "button",
className: isOpen ? "" : "collapsed",
"aria-label": isOpen ? "Collapse group" : "Expand group",
onClick: function onClick(event) {
event.stopPropagation();
toggleCollapsed(group.id);
}
}, /*#__PURE__*/_react.default.createElement(_Icons.CollapseExpandSingleIcon, {
fill: "var(--color-theme-700)"
})), /*#__PURE__*/_react.default.createElement(StyledOutlineName, {
onClick: function onClick(event) {
return event.stopPropagation();
}
}, /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
value: group.name,
variant: "Header 3",
weight: "bold",
onSave: function onSave(event) {
return renameGroup(group.id, event.target.value);
},
inputProps: {
maxLength: 150
}
})), /*#__PURE__*/_react.default.createElement(OutlineCounter, {
count: members.length
}), /*#__PURE__*/_react.default.createElement("span", {
className: "outline-options outline-hover"
}, /*#__PURE__*/_react.default.createElement(OutlineGroupOptionsMenu, null))), isOpen ? members.map(renderElementRow) : null);
}), /*#__PURE__*/_react.default.createElement(StyledNewGroupRow, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
variant: "text gray",
onClick: addGroup
}, /*#__PURE__*/_react.default.createElement(_Icons.FolderPlusIcon, null), "New Group"))) : null);
};
//# sourceMappingURL=outline.js.map