@crewlethq/ui 0.39.0 → 0.40.0

package/dist/chunk-XIDD7PJO.js

@@ -0,0 +1,416 @@
+import { EmptyState } from './chunk-RA2ULG6H.js';
+import { useMediaMatch } from './chunk-RTPQDNW3.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './DataGrid-AQKPJD7W.css';
+import { useId, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle } from 'react';
+import { breakpoint } from '@crewlethq/tokens';
+import { ChevronDownGlyph, ChevronUpGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function columnChoicesOf(columns) {
+  return columns.map((column) => ({
+    key: column.key,
+    label: headerWord(column) || column.label || column.key,
+    optional: column.optional
+  }));
+}
+function ChooserList({ label, items, onToggle }) {
+  const headingId = useId();
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "crewlet-column-chooser__label", id: headingId, children: label }),
+    /* @__PURE__ */ jsx("div", { className: "crewlet-column-chooser__choices", role: "group", "aria-labelledby": headingId, children: items.map((item) => /* @__PURE__ */ jsxs("label", { className: "crewlet-column-chooser__choice", children: [
+      /* @__PURE__ */ jsx("input", { type: "checkbox", checked: item.checked, onChange: () => onToggle(item.key) }),
+      /* @__PURE__ */ jsx("span", { children: item.label })
+    ] }, item.key)) })
+  ] });
+}
+function ColumnChooser({ choices, value, onChange, label = "Columns" }) {
+  const chosen = new Set(value ? value.split(",").filter(Boolean) : []);
+  const isOn = (choice) => chosen.size === 0 ? !choice.optional : chosen.has(choice.key);
+  return /* @__PURE__ */ jsx(
+    ChooserList,
+    {
+      label,
+      items: choices.map((choice) => ({ key: choice.key, label: choice.label, checked: isOn(choice) })),
+      onToggle: (key) => {
+        const next = new Set(choices.filter(isOn).map((c) => c.key));
+        if (next.has(key)) next.delete(key);
+        else next.add(key);
+        onChange(
+          choices.filter((c) => next.has(c.key)).map((c) => c.key).join(",")
+        );
+      }
+    }
+  );
+}
+var LABELS = {
+  hiddenToFit: (names) => `Hidden to fit: ${names}`,
+  loadMore: "Load more",
+  showEveryColumn: "Show every column",
+  and: "and"
+};
+function parseGridSort(raw) {
+  if (!raw) return null;
+  return raw.startsWith("-") ? { key: raw.slice(1), desc: true } : { key: raw, desc: false };
+}
+function headerWord(column) {
+  return typeof column.header === "string" ? column.header : "";
+}
+function bandRows(band) {
+  return band.bands ? band.bands.flatMap(bandRows) : band.rows;
+}
+function compare(a, b) {
+  if (typeof a === "number" && typeof b === "number") {
+    if (Number.isNaN(a)) return Number.isNaN(b) ? 0 : 1;
+    if (Number.isNaN(b)) return -1;
+    return a < b ? -1 : a > b ? 1 : 0;
+  }
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+var SHRINK_CAP = "20%";
+var SHRINK_SHARE = 0.2;
+var SQUEEZE_SAMPLE_ROWS = 12;
+var NO_DROPS = [];
+var NO_FIT = { set: "", width: 0, dropped: NO_DROPS };
+function fitGridColumns({
+  fit,
+  width,
+  overflows,
+  visible
+}) {
+  if (fit.dropped.length > 0 && width > fit.width) {
+    return { set: fit.set, width, dropped: NO_DROPS };
+  }
+  if (overflows) {
+    let next;
+    for (const c of visible) {
+      if (c.drop === void 0) continue;
+      if (!next || c.drop < next.drop) next = c;
+    }
+    if (next) return { set: fit.set, width, dropped: [...fit.dropped, next.key] };
+  }
+  if (width !== fit.width && (fit.dropped.length > 0 || fit.width === 0)) {
+    return { ...fit, width };
+  }
+  return null;
+}
+function overflowing(wrap) {
+  const last = wrap.querySelector(":scope > .crewlet-data-grid__head")?.lastElementChild;
+  if (!last) return false;
+  const inner = wrap.getBoundingClientRect().left + wrap.clientLeft + wrap.clientWidth;
+  return last.getBoundingClientRect().right > inner + 0.5;
+}
+function squeezed(wrap, visible) {
+  const heads = wrap.querySelector(":scope > .crewlet-data-grid__head")?.children;
+  if (!heads) return false;
+  const cap = wrap.clientWidth * SHRINK_SHARE - 1;
+  const rows = [...wrap.querySelectorAll(":scope > .crewlet-data-grid__body .crewlet-data-grid__row")].slice(
+    0,
+    SQUEEZE_SAMPLE_ROWS
+  );
+  for (let i = 0; i < visible.length; i++) {
+    const column = visible[i];
+    if (!column.shrink || column.width) continue;
+    const head = heads[i];
+    if (!head || head.getBoundingClientRect().width >= cap) continue;
+    for (const row of rows) {
+      const cell = row.querySelectorAll(":scope > .crewlet-data-grid__cell")[i];
+      if (cell && cutShort(cell)) return true;
+    }
+  }
+  return false;
+}
+function cutShort(el) {
+  for (const node of [el, ...el.querySelectorAll("*")]) {
+    const box = node;
+    if (box.clientWidth > 1 && box.scrollWidth > box.clientWidth + 1) return true;
+  }
+  return false;
+}
+function droppedNames(columns, dropped, and) {
+  const names = dropped.map((key) => {
+    const c = columns.find((col) => col.key === key);
+    return c && (headerWord(c) || c.label) || key;
+  });
+  return names.length <= 1 ? names[0] ?? "" : `${names.slice(0, -1).join(", ")} ${and} ${names[names.length - 1]}`;
+}
+function DataGrid({
+  rows,
+  bands,
+  columns,
+  rowKey,
+  onRowActivate,
+  rowHref,
+  isSelected,
+  isFailed,
+  sort: sortRaw = "",
+  onSortChange,
+  serverSorted = false,
+  cols: colsRaw = "",
+  onColsChange,
+  empty,
+  footer,
+  onLoadMore,
+  loadedNote,
+  phoneRows = "labelled",
+  flush = false,
+  handleRef,
+  onPointerDown,
+  labels,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  className
+}) {
+  const text = { ...LABELS, ...labels };
+  const sort = parseGridSort(sortRaw);
+  const body = useRef(null);
+  const [cursor, setCursor] = useState(-1);
+  const gridId = useId();
+  const shownColumns = useMemo(() => {
+    const asked = colsRaw.split(",").map((c) => c.trim()).filter(Boolean);
+    if (asked.length === 0) return columns.filter((c) => !c.optional);
+    const byKey = new Map(columns.map((c) => [c.key, c]));
+    const picked = asked.map((key) => byKey.get(key)).filter((c) => !!c);
+    return picked.length > 0 ? picked : columns.filter((c) => !c.optional);
+  }, [columns, colsRaw]);
+  const [wrap, setWrap] = useState(null);
+  const phone = useMediaMatch(`(width < ${breakpoint.phone})`);
+  const shownKeys = shownColumns.map((c) => c.key).join(",");
+  const [fit, setFit] = useState(NO_FIT);
+  const dropped = !phone && fit.set === shownKeys ? fit.dropped : NO_DROPS;
+  const visibleColumns = useMemo(
+    () => dropped.length === 0 ? shownColumns : shownColumns.filter((c) => !dropped.includes(c.key)),
+    [shownColumns, dropped]
+  );
+  const sortRows = useCallback(
+    (input) => {
+      if (!sort || serverSorted) return input;
+      const column = columns.find((c) => c.key === sort.key);
+      if (!column?.sortValue) return input;
+      const get = column.sortValue;
+      return [...input].sort((a, b) => {
+        const av = get(a);
+        const bv = get(b);
+        if (av == null && bv == null) return 0;
+        if (av == null) return 1;
+        if (bv == null) return -1;
+        const cmp = compare(av, bv);
+        return sort.desc ? -cmp : cmp;
+      });
+    },
+    [columns, sort, serverSorted]
+  );
+  const flat = useMemo(() => {
+    const walk = (band) => band.bands ? band.bands.flatMap(walk) : sortRows(band.rows);
+    if (bands) return bands.flatMap(walk);
+    return sortRows(rows ?? []);
+  }, [bands, rows, sortRows]);
+  const [boxWidth, setBoxWidth] = useState(0);
+  useLayoutEffect(() => {
+    if (!wrap || typeof ResizeObserver !== "function") return;
+    const watch = new ResizeObserver(() => setBoxWidth(wrap.clientWidth));
+    watch.observe(wrap);
+    return () => watch.disconnect();
+  }, [wrap]);
+  useLayoutEffect(() => {
+    const el = wrap;
+    if (!el || phone) return;
+    const next = fitGridColumns({
+      fit: fit.set === shownKeys ? fit : { ...NO_FIT, set: shownKeys },
+      width: el.clientWidth,
+      overflows: overflowing(el) || squeezed(el, visibleColumns),
+      visible: visibleColumns
+    });
+    if (next !== null) setFit(next);
+  }, [wrap, phone, fit, shownKeys, visibleColumns, flat, boxWidth]);
+  useImperativeHandle(
+    handleRef,
+    () => ({
+      step: (by) => setCursor((at) => {
+        const next = Math.max(0, Math.min(flat.length - 1, at + by));
+        body.current?.querySelector(`[data-row-index="${next}"]`)?.scrollIntoView({ block: "nearest" });
+        return next;
+      }),
+      activate: (event) => {
+        const row = flat[cursor];
+        if (row === void 0 || !onRowActivate) return false;
+        onRowActivate(row, event);
+        return true;
+      },
+      rowCount: () => flat.length
+    }),
+    [flat, cursor, onRowActivate]
+  );
+  function headerClick(column) {
+    if (!column.sortValue || !onSortChange) return;
+    if (sort?.key === column.key && !sort.desc) onSortChange(`-${column.key}`);
+    else if (sort?.key === column.key && sort.desc) onSortChange("");
+    else onSortChange(column.key);
+  }
+  const template = visibleColumns.map((c) => c.width ?? (c.shrink ? `fit-content(${SHRINK_CAP})` : `minmax(${c.floor ?? 0}, 1fr)`)).join(" ");
+  if (flat.length === 0 && !bands?.length && empty) {
+    return /* @__PURE__ */ jsx("div", { className: cx("crewlet-data-grid", className), "data-flush": flush || void 0, children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        size: "compact",
+        icon: empty.icon,
+        title: empty.title,
+        description: empty.hint,
+        action: empty.action
+      }
+    ) });
+  }
+  let index = -1;
+  function renderRow(row) {
+    index += 1;
+    const at = index;
+    const link = rowHref?.(row);
+    const marked = Boolean(isSelected?.(row));
+    const rowId = `${gridId}-row-${at}`;
+    const overlay = link !== void 0 ? (
+      // eslint-disable-next-line jsx-a11y/anchor-has-content
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "crewlet-data-grid__row-link",
+          href: link,
+          "aria-labelledby": rowId,
+          "aria-current": marked ? "true" : void 0,
+          onClick: (e) => onRowActivate?.(row, e)
+        }
+      )
+    ) : onRowActivate ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-data-grid__row-link",
+        "aria-labelledby": rowId,
+        "aria-current": marked ? "true" : void 0,
+        onClick: (e) => onRowActivate(row, e)
+      }
+    ) : null;
+    const inner = visibleColumns.map((column, i) => /* @__PURE__ */ jsxs(
+      "span",
+      {
+        role: "cell",
+        className: cx(
+          "crewlet-data-grid__cell",
+          column.align === "right" && "crewlet-data-grid__cell--right",
+          column.shrink && "crewlet-data-grid__cell--shrink"
+        ),
+        "data-lead": column.phoneLead || void 0,
+        "data-phone-omit": column.phoneOmit || void 0,
+        "data-label": column.action ? void 0 : headerWord(column) || column.label || void 0,
+        children: [
+          i === 0 ? overlay : null,
+          column.cell(row)
+        ]
+      },
+      column.key
+    ));
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: rowId,
+        role: "row",
+        className: cx(
+          "crewlet-data-grid__row",
+          marked && "crewlet-data-grid__row--selected",
+          isFailed?.(row) && "crewlet-data-grid__row--failed",
+          cursor === at && "crewlet-data-grid__row--cursor"
+        ),
+        "data-row-index": at,
+        "aria-current": overlay === null && marked ? "true" : void 0,
+        children: inner
+      },
+      rowKey(row)
+    );
+  }
+  function renderBand(band) {
+    const loaded = bandRows(band).length;
+    return (
+      // A BAND IS ROWS OF THE TABLE: its head and its foot are rows of one
+      // cell each across every column, and its own box is layout alone.
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-data-grid__band", role: "none", children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-data-grid__band-head", role: "row", children: /* @__PURE__ */ jsxs("span", { className: "crewlet-data-grid__band-cell", role: "rowheader", "aria-colspan": visibleColumns.length, children: [
+          band.mark,
+          /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__truncate", children: band.label }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__band-count", children: band.total != null && band.total !== loaded ? `${loaded} of ${band.total}` : loaded })
+        ] }) }),
+        band.bands ? band.bands.map((sub) => renderBand(sub)) : sortRows(band.rows).map(renderRow),
+        band.footer && /* @__PURE__ */ jsx("div", { className: "crewlet-data-grid__band-foot", role: "row", children: /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__band-cell", role: "cell", "aria-colspan": visibleColumns.length, children: band.footer }) })
+      ] }, band.key)
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setWrap,
+      role: "table",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      className: cx("crewlet-data-grid", className),
+      "data-phone-rows": phoneRows === "compact" ? "compact" : void 0,
+      "data-flush": flush || void 0,
+      style: { gridTemplateColumns: template },
+      onPointerDown,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-data-grid__head", role: "row", children: visibleColumns.map((column) => {
+          const sorted = sort?.key === column.key;
+          const sortable = Boolean(column.sortValue && onSortChange);
+          const headClass = cx(
+            "crewlet-data-grid__th",
+            column.align === "right" && "crewlet-data-grid__th--right",
+            column.shrink && "crewlet-data-grid__th--shrink",
+            sorted && "crewlet-data-grid__th--sorted",
+            !sortable && "crewlet-data-grid__th--plain"
+          );
+          const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__truncate", children: column.header }),
+            sorted && (sort?.desc ? /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(ChevronUpGlyph, { size: "xs" }))
+          ] });
+          if (!sortable) {
+            const named = !headerWord(column) && !column.action ? column.label : void 0;
+            return /* @__PURE__ */ jsxs("div", { className: headClass, role: "columnheader", title: named, children: [
+              content,
+              named && /* @__PURE__ */ jsx(VisuallyHidden, { children: named })
+            ] }, column.key);
+          }
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: headClass,
+              role: "columnheader",
+              "aria-sort": sorted ? sort?.desc ? "descending" : "ascending" : void 0,
+              children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "crewlet-data-grid__sort",
+                  onClick: () => headerClick(column),
+                  "aria-label": headerWord(column) ? void 0 : column.label,
+                  children: content
+                }
+              )
+            },
+            column.key
+          );
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-data-grid__body", role: "rowgroup", ref: body, children: bands ? bands.map((band) => renderBand(band)) : sortRows(rows ?? []).map(renderRow) }),
+        (footer || onLoadMore || loadedNote || dropped.length > 0) && /* @__PURE__ */ jsxs("div", { className: "crewlet-data-grid__foot", children: [
+          footer,
+          /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__foot-spacer", "aria-hidden": "true" }),
+          dropped.length > 0 && /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__note", children: text.hiddenToFit(droppedNames(shownColumns, dropped, text.and)) }),
+          loadedNote && /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__note", children: loadedNote }),
+          onLoadMore && /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: onLoadMore, children: text.loadMore })
+        ] }),
+        colsRaw && onColsChange && /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-data-grid__cols-reset", onClick: () => onColsChange(""), children: text.showEveryColumn })
+      ]
+    }
+  );
+}
+
+export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort };

package/dist/chunk-ZUTUI27P.js

@@ -0,0 +1,21 @@
+import { Text } from './chunk-IKBK4A5O.js';
+import { Inline, Stack, Spacer } from './chunk-ZAC7SKUN.js';
+import { Card } from './chunk-INHXF2CL.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './RelatedRow-2FVS6QQA.css';
+import { ChevronRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function RelatedRow({ href, icon, title, description, label = "Related", className }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, className: cx("crewlet-related-row", className), children: /* @__PURE__ */ jsx(Card, { href, interactive: true, padding: "sm", children: /* @__PURE__ */ jsxs(Inline, { gap: 3, children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-related-row__glyph", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "cell", children: title }),
+      /* @__PURE__ */ jsx(Text, { variant: "caption", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(Spacer, {}),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-related-row__glyph", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronRightGlyph, { size: "sm" }) })
+  ] }) }) });
+}
+
+export { RelatedRow };

package/dist/generated/index.d.ts

@@ -50,6 +50,7 @@ export * from '../Container/index.js';
 export * from '../Copyable/index.js';
 export * from '../Count/index.js';
 export * from '../CursorFlag/index.js';
+export * from '../DataGrid/index.js';
 export * from '../DataTable/index.js';
 export * from '../DataView/index.js';
 export * from '../DatasetSource/index.js';
@@ -96,6 +97,7 @@ export * from '../ListInput/index.js';
 export * from '../Listbox/index.js';
 export * from '../LiveCursor/index.js';
 export * from '../LivePreview/index.js';
+export * from '../LockedLabel/index.js';
 export * from '../Markdown/index.js';
 export * from '../MarkdownEditor/index.js';
 export * from '../MediaMatch/index.js';
@@ -111,6 +113,7 @@ export * from '../OrgNode/index.js';
 export * from '../OrgTable/index.js';
 export * from '../Outline/index.js';
 export * from '../PageHeader/index.js';
+export * from '../PageNote/index.js';
 export * from '../PeopleRail/index.js';
 export * from '../PinTile/index.js';
 export * from '../Popover/index.js';
@@ -121,9 +124,11 @@ export * from '../PresenterView/index.js';
 export * from '../PricingCard/index.js';
 export * from '../Principal/index.js';
 export * from '../PrincipalPicker/index.js';
+export * from '../PropertyList/index.js';
 export * from '../Prose/index.js';
 export * from '../QrCode/index.js';
 export * from '../ReadingPane/index.js';
+export * from '../RelatedRow/index.js';
 export * from '../RelativeTime/index.js';
 export * from '../Reorder/index.js';
 export * from '../RichEditor/index.js';
@@ -131,6 +136,7 @@ export * from '../RichEditorMarkdown/index.js';
 export * from '../SandboxedFrame/index.js';
 export * from '../SearchTrigger/index.js';
 export * from '../Section/index.js';
+export * from '../SectionFrame/index.js';
 export * from '../SegmentedControl/index.js';
 export * from '../SegmentedMeter/index.js';
 export * from '../Select/index.js';