@crewlethq/ui 0.85.0 → 0.86.0

package/dist/Text/Text.d.ts

@@ -57,10 +57,22 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
      * it on every push, because the proportional digits have different widths.
      */
     numeric?: boolean | undefined;
-    /** One line, cut with an ellipsis. */
+    /**
+     * One line, cut with an ellipsis: a name in a narrow column, a caption
+     * under it. While the words are cut, the pointer's title carries them whole
+     * (see `titleWhenCut`).
+     */
     truncate?: boolean | undefined;
-    /** Two or three lines, then an ellipsis. */
+    /** Two or three lines, then an ellipsis, with the whole words on the title while they are cut. */
     clamp?: 2 | 3 | undefined;
+    /**
+     * Whether words cut by `truncate` or `clamp` carry their whole text as the
+     * element's title while they are cut. On by default. Turn it off where
+     * something else already shows the whole words, a `Tooltip` around the
+     * text or a title on the element around it, so the reader is not shown
+     * them twice. A `title` the caller passes always wins.
+     */
+    titleWhenCut?: boolean | undefined;
     /** Bounds the line length, for anything a reader reads rather than scans. */
     measure?: TextMeasure | undefined;
 }
@@ -77,5 +89,15 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
  * `variant` sets the size, the weight, the tracking and the ink together,
  * because those four move as one. `tone` overrides only the ink, for the case
  * where the same register carries a quieter fact.
+ *
+ * CUT WORDS ARE STILL READABLE WHOLE. A line cut with an ellipsis hid the
+ * end of a name from a sighted reader, who had no way to read it short of
+ * widening the window, while a screen reader read it whole (the cut is
+ * paint, not content). So a cut Text puts its whole words on its title. It
+ * is MEASURED AT THE MOMENT THE POINTER ARRIVES, which is the only moment a
+ * title is read: the words and the column are what they are then, so a title
+ * never goes stale after a resize or a new value, and a table of a thousand
+ * cut cells costs nothing until one is hovered. Words that fit carry no
+ * title, since a tooltip that repeats what is on the screen is noise.
  */
-export declare function Text({ as: Tag, variant, tone, mono, numeric, truncate, clamp, measure, className, children, ...rest }: TextProps): import("react").JSX.Element;
+export declare function Text({ as: Tag, variant, tone, mono, numeric, truncate, clamp, measure, titleWhenCut, className, children, ...rest }: TextProps): import("react").JSX.Element;

package/dist/Text/index.js

@@ -1,2 +1,2 @@
-export { Text } from '../chunk-QP2P6GDQ.js';
+export { Text } from '../chunk-O5CEG7TQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-AUSFKGKL.js → chunk-3AMWXJQX.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-5D5Z3LBQ.js').then(
+  loading ??= import('./Editor-VGNB35NJ.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/{chunk-AFLS26AC.js → chunk-3CALM534.js}

@@ -1,3 +1,4 @@
+import { Text } from './chunk-O5CEG7TQ.js';
 import { Link } from './chunk-QF5UNP4T.js';
 import { Tag } from './chunk-LBGKLYBY.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
@@ -5,7 +6,7 @@ import { EmptyValue } from './chunk-RE3FBGQQ.js';
 import { Avatar } from './chunk-XZY6S3UC.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TableCells-TKSNLRK3.css';
+import './TableCells-ZALZLLEF.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function TableKeyCell({ value, text, href, emptyLabel = "Not set" }) {
@@ -84,5 +85,38 @@ function TableTextCell({ children, icon, mark }) {
     /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__truncate", children })
   ] });
 }
+function TableTwoLineCell({
+  value,
+  detail,
+  mono,
+  title,
+  titleWhenCut = true,
+  icon,
+  mark
+}) {
+  const ownTitles = titleWhenCut && title === void 0;
+  const hasDetail = detail !== void 0 && detail !== null && detail !== false && detail !== "";
+  const leading = mark ?? (icon !== void 0 && icon !== null ? /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__icon", "aria-hidden": "true", children: icon }) : null);
+  const leads = leading !== null && leading !== void 0 && leading !== false;
+  const lines = /* @__PURE__ */ jsxs("span", { className: "crewlet-table-cell__lines", title: leads ? void 0 : title, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "inherit", truncate: true, mono: mono === "value" || mono === "both", titleWhenCut: ownTitles, children: value }),
+    hasDetail ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "caption",
+        tone: "secondary",
+        truncate: true,
+        mono: mono === "detail" || mono === "both",
+        titleWhenCut: ownTitles,
+        children: detail
+      }
+    ) : null
+  ] });
+  if (!leads) return lines;
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-table-cell__two-line", title, children: [
+    leading,
+    lines
+  ] });
+}
 
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell };
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, TableTwoLineCell };

package/dist/{chunk-EAHEJNVJ.js → chunk-CL3FWLDO.js}

@@ -1,4 +1,4 @@
-import { Text } from './chunk-QP2P6GDQ.js';
+import { Text } from './chunk-O5CEG7TQ.js';
 import { Inline, Stack, Spacer } from './chunk-ZAC7SKUN.js';
 import { Card } from './chunk-U2IQNDDR.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-QP2P6GDQ.js → chunk-O5CEG7TQ.js}

@@ -11,14 +11,22 @@ function Text({
   truncate = false,
   clamp,
   measure,
+  titleWhenCut = true,
   className,
   children,
   ...rest
 }) {
+  const cuts = truncate || clamp !== void 0;
+  const measures = cuts && titleWhenCut && rest.title === void 0;
+  const { onMouseEnter } = rest;
   return /* @__PURE__ */ jsx(
     Tag,
     {
       ...rest,
+      onMouseEnter: measures ? (event) => {
+        titleIfCut(event.currentTarget, truncate ? "inline" : "block");
+        onMouseEnter?.(event);
+      } : onMouseEnter,
       className: cx(
         "crewlet-text",
         `crewlet-text--${variant}`,
@@ -34,5 +42,11 @@ function Text({
     }
   );
 }
+function titleIfCut(element, axis) {
+  const cut = axis === "inline" ? element.scrollWidth > element.clientWidth : element.scrollHeight > element.clientHeight;
+  const words = (element.textContent ?? "").replace(/\s+/g, " ").trim();
+  if (cut && words !== "") element.setAttribute("title", words);
+  else element.removeAttribute("title");
+}
 
 export { Text };

package/dist/chunk-REWKR3S4.js

@@ -0,0 +1,73 @@
+import { SidebarNav, NavItem } from './chunk-BRK3HXGZ.js';
+import { Select } from './chunk-3IWZVEXA.js';
+import { Text } from './chunk-O5CEG7TQ.js';
+import { Card } from './chunk-U2IQNDDR.js';
+import './RailList-N2ZBPRM2.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var RAIL_LIST_LABELS = {
+  counted: "items",
+  option: (label, count) => count === void 0 ? label : `${label} (${count.toLocaleString()})`
+};
+var elsewhere = (event) => event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
+function RailList({
+  label,
+  items,
+  value,
+  onChange,
+  toolbar,
+  note,
+  children,
+  renderLink,
+  labels: overrides,
+  className
+}) {
+  const words = overrides ? { ...RAIL_LIST_LABELS, ...overrides } : RAIL_LIST_LABELS;
+  const chosen = items.find((item) => item.key === value);
+  const about = chosen?.description;
+  const picker = /* @__PURE__ */ jsx("span", { className: "crewlet-rail-list__picker", children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      ariaLabel: label,
+      size: "sm",
+      width: "auto",
+      value,
+      options: items.map((item) => ({ value: item.key, label: words.option(item.label, item.count), text: item.label })),
+      onChange: (next) => onChange(String(next))
+    }
+  ) });
+  const bar = toolbar === void 0 || toolbar === null ? /* @__PURE__ */ jsx("div", { className: "crewlet-rail-list__bar crewlet-rail-list__bar--picker-only", children: picker }) : /* @__PURE__ */ jsx("div", { className: "crewlet-rail-list__bar", children: typeof toolbar === "function" ? toolbar(picker) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    picker,
+    toolbar
+  ] }) });
+  return /* @__PURE__ */ jsx(Card, { padding: "none", className, children: /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list", children: [
+    bar,
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list__body", children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list__rail", children: [
+        /* @__PURE__ */ jsx(SidebarNav, { label, dense: true, children: items.map((item) => /* @__PURE__ */ jsx(
+          NavItem,
+          {
+            label: item.label,
+            href: item.href,
+            current: item.key === value,
+            count: item.count === void 0 ? void 0 : { value: item.count.toLocaleString(), label: words.counted },
+            renderLink,
+            onClick: (event) => {
+              if (item.href !== void 0 && elsewhere(event)) return;
+              event.preventDefault();
+              onChange(item.key);
+            }
+          },
+          item.key
+        )) }),
+        note !== void 0 && note !== null && note !== false ? /* @__PURE__ */ jsx(Text, { as: "p", variant: "caption", tone: "tertiary", className: "crewlet-rail-list__note", children: note }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list__list", children: [
+        about !== void 0 && about !== null && about !== false && about !== "" ? /* @__PURE__ */ jsx(Text, { as: "p", variant: "caption", tone: "secondary", className: "crewlet-rail-list__about", children: about }) : null,
+        children
+      ] })
+    ] })
+  ] }) });
+}
+
+export { RAIL_LIST_LABELS, RailList };

package/dist/chunk-TRZS7DLB.js

@@ -0,0 +1,159 @@
+import { FormField, Label, Input } from './chunk-O7N6W52M.js';
+import { Button } from './chunk-DGXZ635L.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
+import { announce } from './chunk-2G355KDJ.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './KeyValueRows-US5KW7JK.css';
+import { useId, useRef, useEffect } from 'react';
+import { TrashGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function keyValueRowsLabels(keyLabel, valueLabel = "Value") {
+  const item = keyLabel.toLocaleLowerCase();
+  return {
+    key: (position) => `${keyLabel} ${position}`,
+    value: (key, position) => key ? `${valueLabel} for ${key}` : `${valueLabel} for ${item} ${position}`,
+    remove: (key, position) => key ? `Remove ${key}` : `Remove ${item} ${position}`,
+    add: `Add ${item}`,
+    removed: (key, position) => key ? `Removed ${key}` : `Removed ${item} ${position}`
+  };
+}
+function KeyValueRows(props) {
+  const {
+    label,
+    hideLabel = false,
+    keyLabel,
+    valueLabel = "Value",
+    value: rows,
+    onChange,
+    keyPlaceholder,
+    valuePlaceholder,
+    secret = false,
+    keyReadOnly,
+    keyError,
+    valueError,
+    empty,
+    helper,
+    error,
+    disabled = false,
+    labels: overrides,
+    className,
+    createRow
+  } = props;
+  const words = { ...keyValueRowsLabels(keyLabel, valueLabel), ...overrides };
+  const base = useId();
+  const minted = useRef(0);
+  const keyFields = useRef(/* @__PURE__ */ new Map());
+  const addButton = useRef(null);
+  const focusNext = useRef(null);
+  useEffect(() => {
+    const want = focusNext.current;
+    if (want === null) return;
+    focusNext.current = null;
+    if (want === "add") addButton.current?.focus();
+    else keyFields.current.get(want.id)?.focus();
+  });
+  const blank = () => createRow ? createRow() : { id: `${base}-${minted.current += 1}`, key: "", value: "" };
+  const edit = (id, change) => onChange(rows.map((row) => row.id === id ? { ...row, ...change } : row));
+  const add = () => {
+    const row = blank();
+    focusNext.current = { id: row.id };
+    onChange([...rows, row]);
+  };
+  const remove = (index) => {
+    const gone = rows[index];
+    const next = rows.filter((_, i) => i !== index);
+    const neighbour = next[index] ?? next[index - 1];
+    focusNext.current = neighbour ? { id: neighbour.id } : "add";
+    onChange(next);
+    announce(words.removed(gone.key.trim(), index + 1));
+  };
+  const placeholderFor = (row) => typeof valuePlaceholder === "function" ? valuePlaceholder(row) : valuePlaceholder;
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      as: "fieldset",
+      label,
+      hideLabel,
+      helper,
+      error,
+      className: cx("crewlet-key-value-rows", className),
+      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__body", children: [
+        rows.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__table", children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__head", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(Label, { as: "span", children: keyLabel }),
+            /* @__PURE__ */ jsx(Label, { as: "span", children: valueLabel })
+          ] }),
+          rows.map((row, index) => {
+            const position = index + 1;
+            const key = row.key.trim();
+            return /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__row", children: [
+              /* @__PURE__ */ jsx(FormField, { label: words.key(position), hideLabel: true, error: keyError?.(row, index), children: (field) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ref: (element) => {
+                    if (element) keyFields.current.set(row.id, element);
+                    else keyFields.current.delete(row.id);
+                  },
+                  id: field.id,
+                  "aria-describedby": field.describedBy,
+                  "aria-invalid": field.invalid || void 0,
+                  error: field.invalid,
+                  appearance: "reference",
+                  value: row.key,
+                  placeholder: keyPlaceholder,
+                  readOnly: keyReadOnly?.(row) ?? false,
+                  disabled,
+                  autoComplete: "off",
+                  spellCheck: false,
+                  onChange: (event) => edit(row.id, { key: event.target.value })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FormField, { label: words.value(key, position), hideLabel: true, error: valueError?.(row, index), children: (field) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: field.id,
+                  "aria-describedby": field.describedBy,
+                  "aria-invalid": field.invalid || void 0,
+                  error: field.invalid,
+                  type: secret ? "password" : "text",
+                  autoComplete: secret ? "new-password" : "off",
+                  spellCheck: false,
+                  value: row.value,
+                  placeholder: placeholderFor(row),
+                  disabled,
+                  onChange: (event) => edit(row.id, { value: event.target.value })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "ghost-danger",
+                  label: words.remove(key, position),
+                  icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+                  disabled,
+                  onClick: () => remove(index)
+                }
+              )
+            ] }, row.id);
+          })
+        ] }) : empty !== void 0 && empty !== null && empty !== false ? /* @__PURE__ */ jsx("p", { className: "crewlet-key-value-rows__empty", children: empty }) : null,
+        /* @__PURE__ */ jsx("div", { className: "crewlet-key-value-rows__add", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref: addButton,
+            variant: "ghost",
+            size: "small",
+            flush: true,
+            leadingIcon: /* @__PURE__ */ jsx(PlusGlyph, { size: "sm" }),
+            disabled,
+            onClick: add,
+            children: words.add
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+export { KeyValueRows, keyValueRowsLabels };

package/dist/generated/index.d.ts

@@ -122,6 +122,7 @@ export * from '../InlineRef/index.js';
 export * from '../Input/index.js';
 export * from '../Kbd/index.js';
 export * from '../KeyChip/index.js';
+export * from '../KeyValueRows/index.js';
 export * from '../Layer/index.js';
 export * from '../LayersList/index.js';
 export * from '../Layout/index.js';
@@ -175,6 +176,7 @@ export * from '../PropertyList/index.js';
 export * from '../ProposalCard/index.js';
 export * from '../Prose/index.js';
 export * from '../QrCode/index.js';
+export * from '../RailList/index.js';
 export * from '../ReactionBar/index.js';
 export * from '../ReadingPane/index.js';
 export * from '../ReceiptStrip/index.js';