@activecollab/components 2.0.366 → 2.0.367

package/dist/cjs/presentation/listView/columns.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isOverdue = exports.formatDateRange = exports.dayOffset = exports.TimeCell = exports.LabelsProvider = exports.LabelCell = exports.DateCell = void 0;
+exports.isOverdue = exports.formatDateRange = exports.dayOffset = exports.TimeCell = exports.LabelsProvider = exports.LabelCell = exports.IdentifierCell = exports.DateCell = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -24,8 +24,9 @@ var _Transitions = require("../../components/Transitions");
 var _Typography = require("../../components/Typography");
 var _utils = require("../../utils");
 var _excluded = ["open", "className", "children"],
-  _excluded2 = ["labels"],
-  _excluded3 = ["value", "tooltip", "overdue"];
+  _excluded2 = ["value", "tooltip"],
+  _excluded3 = ["labels"],
+  _excluded4 = ["value", "tooltip", "overdue"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -43,10 +44,16 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 /**
- * Interactive list-view column cells for the `Presentation/List view` story —
- * the Label, Date and Time cells with their editors, mirroring
- * `new-activecollab-front/src/components/ListView/columns/*`:
+ * Interactive list-view column cells for the `Presentation/List view` and
+ * `Presentation/List View ID Column` stories — the Label, Date and Time cells
+ * with their editors, mirroring
+ * `new-activecollab-front/src/components/ListView/columns/*`, plus an
+ * Identifier cell that only the ID-column story uses (it has no counterpart in
+ * the app yet):
  *
+ * - **Identifier** (no app equivalent): `#<id>` as a Copy Link trigger, styled
+ *   like the Date trigger. One typography at every length — the column's width
+ *   is what adapts to how large the identifiers get.
  * - **Label** (`columns/Label.js` + `LabelTrigger`/`LabelItems`): chips for 1–2
  *   labels, dots from 3 up, `+N` past 8, and a DS `Select` picker (search,
  *   colored dot + label name in the label's own colour, checkbox, "+ Add new").
@@ -107,6 +114,74 @@ var StyledListButton = (0, _styledComponents.default)(ListButtonBase).withConfig
   componentId: "sc-9f4385-0"
 })(["&&{display:inline-flex;align-items:center;justify-content:flex-end;width:auto;min-width:0;max-width:100%;padding:4px 8px;overflow:visible;text-align:right;}", ""], CooltipStyle);
 
+/* ================================================================== */
+/* Identifier (task ID)                                               */
+/* ================================================================== */
+
+var StyledIdValue = _styledComponents.default.span.withConfig({
+  displayName: "columns__StyledIdValue",
+  componentId: "sc-9f4385-1"
+})(["font-family:", ";white-space:nowrap;font-variant-numeric:tabular-nums;"], SANS);
+/**
+ * Same trigger the Date cell uses, so the id gets the identical hover outline
+ * and 8px inset — it is a link, not an editor, so it is always visible
+ * (`has-value`) rather than appearing on row hover.
+ *
+ * The typography is Caption 1 bold at every identifier length, like the Date
+ * value next to it; long identifiers are handled by the column's width tier,
+ * not by shrinking the text.
+ */
+var IdTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var value = _ref2.value,
+    tooltip = _ref2.tooltip,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/_react.default.createElement(StyledListButton, _extends({}, rest, {
+    ref: ref,
+    className: "show-on-hover has-value",
+    "aria-label": "Copy link to task ".concat(value),
+    "data-tooltip": tooltip
+  }), /*#__PURE__*/_react.default.createElement(StyledIdValue, null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    weight: "bold",
+    color: "secondary"
+  }, value)));
+});
+IdTrigger.displayName = "IdTrigger";
+
+/**
+ * Task identifier cell — the `#<id>` value as a copy-link control, mirroring
+ * how `tasks/Metadata.js` turns `Task #248` into the task's Copy Link action:
+ * the click writes the task URL to the clipboard and reports back so the page
+ * can raise the app's "Link copied to clipboard." toast (utils/copyLinkToClipboard).
+ * It never navigates — the row itself is the navigation target.
+ */
+var IdentifierCell = exports.IdentifierCell = function IdentifierCell(_ref3) {
+  var identifier = _ref3.identifier,
+    link = _ref3.link,
+    onCopy = _ref3.onCopy;
+  var handleClick = (0, _react.useCallback)(function (event) {
+    var _navigator$clipboard;
+    /* the whole row navigates to the task, so copying must not also open it */
+    event.preventDefault();
+    event.stopPropagation();
+    if ((_navigator$clipboard = navigator.clipboard) !== null && _navigator$clipboard !== void 0 && _navigator$clipboard.writeText) {
+      navigator.clipboard.writeText(link).then(function () {
+        return onCopy === null || onCopy === void 0 ? void 0 : onCopy(true);
+      }).catch(function () {
+        return onCopy === null || onCopy === void 0 ? void 0 : onCopy(false);
+      });
+      return;
+    }
+    onCopy === null || onCopy === void 0 || onCopy(false);
+  }, [link, onCopy]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "col col-identifier"
+  }, /*#__PURE__*/_react.default.createElement(IdTrigger, {
+    value: "#".concat(identifier),
+    tooltip: "Copy Link",
+    onClick: handleClick
+  }));
+};
+
 /* ================================================================== */
 /* Labels                                                             */
 /* ================================================================== */
@@ -220,8 +295,8 @@ var LabelsContext = /*#__PURE__*/(0, _react.createContext)({
  * Holds the label catalogue for the whole list, so a label created in one
  * task's picker shows up in every other picker too.
  */
-var LabelsProvider = exports.LabelsProvider = function LabelsProvider(_ref2) {
-  var children = _ref2.children;
+var LabelsProvider = exports.LabelsProvider = function LabelsProvider(_ref4) {
+  var children = _ref4.children;
   var _useState = (0, _react.useState)(INITIAL_LABELS),
     _useState2 = _slicedToArray(_useState, 2),
     labels = _useState2[0],
@@ -265,15 +340,15 @@ var useTaskLabels = function useTaskLabels() {
 /* Empty state pill (mirrors EntityLabel + .entity-label in list-view.less) */
 var StyledLabelPlaceholder = _styledComponents.default.span.withConfig({
   displayName: "columns__StyledLabelPlaceholder",
-  componentId: "sc-9f4385-1"
+  componentId: "sc-9f4385-2"
 })(["display:inline-flex;align-items:center;padding:1px 6px;border:1px solid var(--color-theme-700);border-radius:4px;.list-button.open &,.list-button:hover &{border-color:var(--color-primary-700,var(--color-primary));}"]);
 var StyledLabelItems = _styledComponents.default.span.withConfig({
   displayName: "columns__StyledLabelItems",
-  componentId: "sc-9f4385-2"
+  componentId: "sc-9f4385-3"
 })(["display:inline-flex;align-items:center;min-width:0;> *:not(:last-child){margin-right:2px;}.rest-count{margin-left:2px;}", ""], CooltipStyle);
 var MAX_SHOWN_LABELS = 8;
-var LabelItems = function LabelItems(_ref3) {
-  var labels = _ref3.labels;
+var LabelItems = function LabelItems(_ref5) {
+  var labels = _ref5.labels;
   var showAsDot = labels.length > 2;
   var shown = labels;
   var restCount = 0;
@@ -306,9 +381,9 @@ var LabelItems = function LabelItems(_ref3) {
     className: "rest-count"
   }, "+", restCount) : null);
 };
-var LabelTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
-  var labels = _ref4.labels,
-    rest = _objectWithoutProperties(_ref4, _excluded2);
+var LabelTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref6, ref) {
+  var labels = _ref6.labels,
+    rest = _objectWithoutProperties(_ref6, _excluded3);
   if (labels.length === 0) {
     return /*#__PURE__*/_react.default.createElement(StyledListButton, _extends({}, rest, {
       ref: ref,
@@ -328,10 +403,10 @@ var LabelTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
   }));
 });
 LabelTrigger.displayName = "LabelTrigger";
-var LabelCell = exports.LabelCell = function LabelCell(_ref5) {
-  var labelIds = _ref5.labelIds,
-    _ref5$completed = _ref5.completed,
-    completed = _ref5$completed === void 0 ? false : _ref5$completed;
+var LabelCell = exports.LabelCell = function LabelCell(_ref7) {
+  var labelIds = _ref7.labelIds,
+    _ref7$completed = _ref7.completed,
+    completed = _ref7$completed === void 0 ? false : _ref7$completed;
   var _useTaskLabels = useTaskLabels(),
     catalog = _useTaskLabels.labels,
     labelsById = _useTaskLabels.labelsById,
@@ -443,14 +518,14 @@ var isOverdue = exports.isOverdue = function isOverdue(dueOn, completed) {
 };
 var StyledDateValue = _styledComponents.default.span.withConfig({
   displayName: "columns__StyledDateValue",
-  componentId: "sc-9f4385-3"
+  componentId: "sc-9f4385-4"
 })(["font-family:", ";white-space:nowrap;"], SANS);
 
 /* completed rows render values without a trigger, so the cell itself hosts the
    CSS tooltip */
 var StyledReadOnlyCell = _styledComponents.default.div.withConfig({
   displayName: "columns__StyledReadOnlyCell",
-  componentId: "sc-9f4385-4"
+  componentId: "sc-9f4385-5"
 })(["padding-right:8px;", ""], CooltipStyle);
 
 /**
@@ -462,13 +537,13 @@ var StyledReadOnlyCell = _styledComponents.default.div.withConfig({
  */
 var StyledPickerCell = _styledComponents.default.div.withConfig({
   displayName: "columns__StyledPickerCell",
-  componentId: "sc-9f4385-5"
+  componentId: "sc-9f4385-6"
 })(["> div{text-align:right;}"]);
-var DateTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref6, ref) {
-  var value = _ref6.value,
-    tooltip = _ref6.tooltip,
-    overdue = _ref6.overdue,
-    rest = _objectWithoutProperties(_ref6, _excluded3);
+var DateTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref8, ref) {
+  var value = _ref8.value,
+    tooltip = _ref8.tooltip,
+    overdue = _ref8.overdue,
+    rest = _objectWithoutProperties(_ref8, _excluded4);
   return /*#__PURE__*/_react.default.createElement(StyledListButton, _extends({}, rest, {
     ref: ref,
     className: value ? "show-on-hover has-value" : "show-on-hover",
@@ -480,12 +555,12 @@ var DateTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref6, ref) {
   }, value)) : /*#__PURE__*/_react.default.createElement(_Icons.CalendarIcon, null));
 });
 DateTrigger.displayName = "DateTrigger";
-var DateCell = exports.DateCell = function DateCell(_ref7) {
+var DateCell = exports.DateCell = function DateCell(_ref9) {
   var _dates$from, _dates$to2;
-  var startOn = _ref7.startOn,
-    dueOn = _ref7.dueOn,
-    _ref7$completed = _ref7.completed,
-    completed = _ref7$completed === void 0 ? false : _ref7$completed;
+  var startOn = _ref9.startOn,
+    dueOn = _ref9.dueOn,
+    _ref9$completed = _ref9.completed,
+    completed = _ref9$completed === void 0 ? false : _ref9$completed;
   var _useState5 = (0, _react.useState)({
       from: startOn,
       to: dueOn
@@ -616,11 +691,11 @@ var progressColor = function progressColor(percent) {
 };
 var StyledTimeValue = _styledComponents.default.span.withConfig({
   displayName: "columns__StyledTimeValue",
-  componentId: "sc-9f4385-6"
+  componentId: "sc-9f4385-7"
 })(["display:inline-flex;align-items:center;font-family:", ";white-space:nowrap;.c-progress-pie,svg{flex-shrink:0;}.time-pie{margin-right:8px;}"], SANS);
-var TimeValue = function TimeValue(_ref8) {
-  var tracked = _ref8.tracked,
-    estimated = _ref8.estimated;
+var TimeValue = function TimeValue(_ref0) {
+  var tracked = _ref0.tracked,
+    estimated = _ref0.estimated;
   var percent = timeToEstimatePercentage(tracked, estimated);
   return /*#__PURE__*/_react.default.createElement(StyledTimeValue, null, estimated > 0 ? /*#__PURE__*/_react.default.createElement(_ProgressPie.ProgressPie, {
     className: "time-pie",
@@ -632,10 +707,10 @@ var TimeValue = function TimeValue(_ref8) {
     weight: "bold"
   }, formatTrackedAndEstimated(tracked, estimated)));
 };
-var TimeTrigger = function TimeTrigger(_ref9) {
-  var tracked = _ref9.tracked,
-    estimated = _ref9.estimated,
-    onClick = _ref9.onClick;
+var TimeTrigger = function TimeTrigger(_ref1) {
+  var tracked = _ref1.tracked,
+    estimated = _ref1.estimated,
+    onClick = _ref1.onClick;
   var hasTime = tracked > 0 || estimated > 0;
   return /*#__PURE__*/_react.default.createElement(StyledListButton, {
     onClick: onClick,
@@ -647,16 +722,16 @@ var TimeTrigger = function TimeTrigger(_ref9) {
     estimated: estimated
   }) : /*#__PURE__*/_react.default.createElement(_Icons.ClockAddIcon, null));
 };
-var TimeCell = exports.TimeCell = function TimeCell(_ref0) {
-  var taskName = _ref0.taskName,
-    _ref0$tracked = _ref0.tracked,
-    tracked = _ref0$tracked === void 0 ? 0 : _ref0$tracked,
-    _ref0$estimated = _ref0.estimated,
-    estimated = _ref0$estimated === void 0 ? 0 : _ref0$estimated,
-    users = _ref0.users,
-    currentUserId = _ref0.currentUserId,
-    _ref0$completed = _ref0.completed,
-    completed = _ref0$completed === void 0 ? false : _ref0$completed;
+var TimeCell = exports.TimeCell = function TimeCell(_ref10) {
+  var taskName = _ref10.taskName,
+    _ref10$tracked = _ref10.tracked,
+    tracked = _ref10$tracked === void 0 ? 0 : _ref10$tracked,
+    _ref10$estimated = _ref10.estimated,
+    estimated = _ref10$estimated === void 0 ? 0 : _ref10$estimated,
+    users = _ref10.users,
+    currentUserId = _ref10.currentUserId,
+    _ref10$completed = _ref10.completed,
+    completed = _ref10$completed === void 0 ? false : _ref10$completed;
   var _useState9 = (0, _react.useState)(false),
     _useState0 = _slicedToArray(_useState9, 2),
     open = _useState0[0],
@@ -749,17 +824,17 @@ var JOB_TYPES = [{
    `Dialog` because it is 770px wide (`.time_record_form_modal_wrapper`). */
 var StyledTimeRecordPaper = _styledComponents.default.div.withConfig({
   displayName: "columns__StyledTimeRecordPaper",
-  componentId: "sc-9f4385-7"
+  componentId: "sc-9f4385-8"
 })(["position:relative;width:770px;max-width:95vw;max-height:calc(100vh - 156px);margin:126px auto 30px auto;padding:20px 30px;overflow:auto;border-radius:8px;background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);box-sizing:border-box;font-family:", ";*{box-sizing:border-box;}@media (max-width:830px){width:calc(100vw - 60px);}.trd-header{display:flex;align-items:center;justify-content:space-between;}.trd-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:16px;font-size:1rem;font-weight:700;}.trd-date button{width:auto;}.trd-date > div{text-align:right;}.trd-divider{margin:20px 0 32px 0;border-bottom:1px solid var(--border-primary);height:1px;}.trd-body{display:flex;justify-content:space-between;position:relative;}.trd-form{width:100%;}.trd-fields{display:flex;align-items:flex-end;}.trd-hours{width:144px;margin-right:16px;flex-shrink:0;}.trd-hours .c-input-wrapper,.trd-hours input{width:100%;}.trd-field{margin-right:16px;}.trd-field:last-of-type{margin-right:20px;}.trd-field .c-label{display:block;margin-bottom:2px;}.trd-field button{width:144px;}.trd-billable{display:flex;align-items:center;margin-top:24px;}.trd-billable .c-label{margin-left:8px;cursor:pointer;}.trd-description-trigger{display:inline-flex;align-items:center;margin-top:16px;color:var(--color-secondary);font-size:14px;font-weight:500;background:none;border:none;padding:0;cursor:pointer;font-family:", ";}.trd-description-trigger svg{margin-right:4px;fill:var(--color-primary);transition:transform 200ms ease;}.trd-description-trigger.collapsed svg{transform:rotate(180deg);}.trd-textarea{width:360px;max-width:100%;margin-top:8px;font-size:12px;resize:none;}.trd-actions{display:flex;margin-top:24px;}.trd-actions .c-button:first-child{margin-right:12px;}.trd-total{position:absolute;right:0;bottom:0;display:inline-flex;align-items:center;align-self:flex-end;background:none;border:none;padding:0;cursor:pointer;}.trd-total svg{margin-right:4px;fill:var(--color-primary);transition:transform 200ms ease;}.trd-total.collapsed svg{transform:rotate(180deg);}.trd-records{margin-top:32px;border-top:1px solid var(--border-primary);}.trd-record{display:flex;align-items:center;justify-content:space-between;height:36px;border-bottom:1px solid var(--color-theme-300);}.trd-record-left{display:flex;align-items:center;gap:12px;min-width:0;}"], SANS, SANS);
-var TimeRecordDialog = function TimeRecordDialog(_ref1) {
-  var open = _ref1.open,
-    taskName = _ref1.taskName,
-    users = _ref1.users,
-    currentUserId = _ref1.currentUserId,
-    records = _ref1.records,
-    total = _ref1.total,
-    onSubmit = _ref1.onSubmit,
-    onClose = _ref1.onClose;
+var TimeRecordDialog = function TimeRecordDialog(_ref11) {
+  var open = _ref11.open,
+    taskName = _ref11.taskName,
+    users = _ref11.users,
+    currentUserId = _ref11.currentUserId,
+    records = _ref11.records,
+    total = _ref11.total,
+    onSubmit = _ref11.onSubmit,
+    onClose = _ref11.onClose;
   var _useState11 = (0, _react.useState)(""),
     _useState12 = _slicedToArray(_useState11, 2),
     value = _useState12[0],