@activecollab/components 2.0.366 → 2.0.367

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

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["open", "className", "children"],
-  _excluded2 = ["labels"],
-  _excluded3 = ["value", "tooltip", "overdue"];
+  _excluded2 = ["value", "tooltip"],
+  _excluded3 = ["labels"],
+  _excluded4 = ["value", "tooltip", "overdue"];
 import React, { createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
 import moment from "moment-timezone";
 import styled, { css } from "styled-components";
@@ -24,10 +25,16 @@ import { Body2, Caption1, Caption2, Header3 } from "../../components/Typography"
 import { formatHours } from "../../utils";
 
 /**
- * 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").
@@ -88,6 +95,70 @@ const StyledListButton = styled(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)                                               */
+/* ================================================================== */
+
+const StyledIdValue = styled.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.
+ */
+const IdTrigger = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let value = _ref2.value,
+    tooltip = _ref2.tooltip,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(StyledListButton, _extends({}, rest, {
+    ref: ref,
+    className: "show-on-hover has-value",
+    "aria-label": "Copy link to task " + value,
+    "data-tooltip": tooltip
+  }), /*#__PURE__*/React.createElement(StyledIdValue, null, /*#__PURE__*/React.createElement(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.
+ */
+export const IdentifierCell = _ref3 => {
+  let identifier = _ref3.identifier,
+    link = _ref3.link,
+    onCopy = _ref3.onCopy;
+  const handleClick = useCallback(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.writeText) {
+      navigator.clipboard.writeText(link).then(() => onCopy == null ? void 0 : onCopy(true)).catch(() => onCopy == null ? void 0 : onCopy(false));
+      return;
+    }
+    onCopy == null || onCopy(false);
+  }, [link, onCopy]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "col col-identifier"
+  }, /*#__PURE__*/React.createElement(IdTrigger, {
+    value: "#" + identifier,
+    tooltip: "Copy Link",
+    onClick: handleClick
+  }));
+};
+
 /* ================================================================== */
 /* Labels                                                             */
 /* ================================================================== */
@@ -199,8 +270,8 @@ const LabelsContext = /*#__PURE__*/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.
  */
-export const LabelsProvider = _ref2 => {
-  let children = _ref2.children;
+export const LabelsProvider = _ref4 => {
+  let children = _ref4.children;
   const _useState = useState(INITIAL_LABELS),
     labels = _useState[0],
     setLabels = _useState[1];
@@ -235,15 +306,15 @@ const useTaskLabels = () => useContext(LabelsContext);
 /* Empty state pill (mirrors EntityLabel + .entity-label in list-view.less) */
 const StyledLabelPlaceholder = styled.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));}"]);
 const StyledLabelItems = styled.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);
 const MAX_SHOWN_LABELS = 8;
-const LabelItems = _ref3 => {
-  let labels = _ref3.labels;
+const LabelItems = _ref5 => {
+  let labels = _ref5.labels;
   const showAsDot = labels.length > 2;
   let shown = labels;
   let restCount = 0;
@@ -274,9 +345,9 @@ const LabelItems = _ref3 => {
     className: "rest-count"
   }, "+", restCount) : null);
 };
-const LabelTrigger = /*#__PURE__*/forwardRef((_ref4, ref) => {
-  let labels = _ref4.labels,
-    rest = _objectWithoutPropertiesLoose(_ref4, _excluded2);
+const LabelTrigger = /*#__PURE__*/forwardRef((_ref6, ref) => {
+  let labels = _ref6.labels,
+    rest = _objectWithoutPropertiesLoose(_ref6, _excluded3);
   if (labels.length === 0) {
     return /*#__PURE__*/React.createElement(StyledListButton, _extends({}, rest, {
       ref: ref,
@@ -296,10 +367,10 @@ const LabelTrigger = /*#__PURE__*/forwardRef((_ref4, ref) => {
   }));
 });
 LabelTrigger.displayName = "LabelTrigger";
-export const LabelCell = _ref5 => {
-  let labelIds = _ref5.labelIds,
-    _ref5$completed = _ref5.completed,
-    completed = _ref5$completed === void 0 ? false : _ref5$completed;
+export const LabelCell = _ref7 => {
+  let labelIds = _ref7.labelIds,
+    _ref7$completed = _ref7.completed,
+    completed = _ref7$completed === void 0 ? false : _ref7$completed;
   const _useTaskLabels = useTaskLabels(),
     catalog = _useTaskLabels.labels,
     labelsById = _useTaskLabels.labelsById,
@@ -388,14 +459,14 @@ const formatDateLong = value => value ? moment.unix(value).utc().format(DATE_FOR
 export const isOverdue = (dueOn, completed) => Boolean(dueOn && !completed && dueOn < todayUnix());
 const StyledDateValue = styled.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 */
 const StyledReadOnlyCell = styled.div.withConfig({
   displayName: "columns__StyledReadOnlyCell",
-  componentId: "sc-9f4385-4"
+  componentId: "sc-9f4385-5"
 })(["padding-right:8px;", ""], CooltipStyle);
 
 /**
@@ -407,13 +478,13 @@ const StyledReadOnlyCell = styled.div.withConfig({
  */
 const StyledPickerCell = styled.div.withConfig({
   displayName: "columns__StyledPickerCell",
-  componentId: "sc-9f4385-5"
+  componentId: "sc-9f4385-6"
 })(["> div{text-align:right;}"]);
-const DateTrigger = /*#__PURE__*/forwardRef((_ref6, ref) => {
-  let value = _ref6.value,
-    tooltip = _ref6.tooltip,
-    overdue = _ref6.overdue,
-    rest = _objectWithoutPropertiesLoose(_ref6, _excluded3);
+const DateTrigger = /*#__PURE__*/forwardRef((_ref8, ref) => {
+  let value = _ref8.value,
+    tooltip = _ref8.tooltip,
+    overdue = _ref8.overdue,
+    rest = _objectWithoutPropertiesLoose(_ref8, _excluded4);
   return /*#__PURE__*/React.createElement(StyledListButton, _extends({}, rest, {
     ref: ref,
     className: value ? "show-on-hover has-value" : "show-on-hover",
@@ -425,12 +496,12 @@ const DateTrigger = /*#__PURE__*/forwardRef((_ref6, ref) => {
   }, value)) : /*#__PURE__*/React.createElement(CalendarIcon, null));
 });
 DateTrigger.displayName = "DateTrigger";
-export const DateCell = _ref7 => {
+export const DateCell = _ref9 => {
   var _dates$from, _dates$to2;
-  let startOn = _ref7.startOn,
-    dueOn = _ref7.dueOn,
-    _ref7$completed = _ref7.completed,
-    completed = _ref7$completed === void 0 ? false : _ref7$completed;
+  let startOn = _ref9.startOn,
+    dueOn = _ref9.dueOn,
+    _ref9$completed = _ref9.completed,
+    completed = _ref9$completed === void 0 ? false : _ref9$completed;
   const _useState3 = useState({
       from: startOn,
       to: dueOn
@@ -553,11 +624,11 @@ const progressColor = percent => {
 };
 const StyledTimeValue = styled.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);
-const TimeValue = _ref8 => {
-  let tracked = _ref8.tracked,
-    estimated = _ref8.estimated;
+const TimeValue = _ref0 => {
+  let tracked = _ref0.tracked,
+    estimated = _ref0.estimated;
   const percent = timeToEstimatePercentage(tracked, estimated);
   return /*#__PURE__*/React.createElement(StyledTimeValue, null, estimated > 0 ? /*#__PURE__*/React.createElement(ProgressPie, {
     className: "time-pie",
@@ -569,10 +640,10 @@ const TimeValue = _ref8 => {
     weight: "bold"
   }, formatTrackedAndEstimated(tracked, estimated)));
 };
-const TimeTrigger = _ref9 => {
-  let tracked = _ref9.tracked,
-    estimated = _ref9.estimated,
-    onClick = _ref9.onClick;
+const TimeTrigger = _ref1 => {
+  let tracked = _ref1.tracked,
+    estimated = _ref1.estimated,
+    onClick = _ref1.onClick;
   const hasTime = tracked > 0 || estimated > 0;
   return /*#__PURE__*/React.createElement(StyledListButton, {
     onClick: onClick,
@@ -584,16 +655,16 @@ const TimeTrigger = _ref9 => {
     estimated: estimated
   }) : /*#__PURE__*/React.createElement(ClockAddIcon, null));
 };
-export const TimeCell = _ref0 => {
-  let 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;
+export const TimeCell = _ref10 => {
+  let 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;
   const _useState5 = useState(false),
     open = _useState5[0],
     setOpen = _useState5[1];
@@ -672,17 +743,17 @@ const JOB_TYPES = [{
    `Dialog` because it is 770px wide (`.time_record_form_modal_wrapper`). */
 const StyledTimeRecordPaper = styled.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);
-const TimeRecordDialog = _ref1 => {
-  let open = _ref1.open,
-    taskName = _ref1.taskName,
-    users = _ref1.users,
-    currentUserId = _ref1.currentUserId,
-    records = _ref1.records,
-    total = _ref1.total,
-    onSubmit = _ref1.onSubmit,
-    onClose = _ref1.onClose;
+const TimeRecordDialog = _ref11 => {
+  let open = _ref11.open,
+    taskName = _ref11.taskName,
+    users = _ref11.users,
+    currentUserId = _ref11.currentUserId,
+    records = _ref11.records,
+    total = _ref11.total,
+    onSubmit = _ref11.onSubmit,
+    onClose = _ref11.onClose;
   const _useState7 = useState(""),
     value = _useState7[0],
     setValue = _useState7[1];