@proteos/ui 0.46.0 → 0.48.0

package/dist/index.cjs

@@ -13,6 +13,7 @@ var reorderWithEdge = require('@atlaskit/pragmatic-drag-and-drop-hitbox/util/reo
 var reactTable = require('@tanstack/react-table');
 var reactVirtual = require('@tanstack/react-virtual');
 var combine = require('@atlaskit/pragmatic-drag-and-drop/combine');
+var thinkingOrbs = require('thinking-orbs');
 var date = require('@internationalized/date');
 
 function Popover(props) {
@@ -1250,7 +1251,8 @@ var CHANNEL_ICONS = {
   "google-meet": lucideReact.Video,
   "teams-meeting": lucideReact.Video,
   "webex-meeting": lucideReact.Video,
-  adhoc: lucideReact.AudioLines
+  adhoc: lucideReact.AudioLines,
+  phone: lucideReact.Phone
 };
 function channelIcon(channel) {
   return CHANNEL_ICONS[channel] ?? lucideReact.MessagesSquare;
@@ -1265,7 +1267,14 @@ function Checkbox({ children, className, ...props }) {
     {
       ...props,
       className: (renderProps) => chunkMWAXK66H_cjs.cn(
-        "group inline-flex items-center gap-2.5 cursor-pointer",
+        // `relative` so RAC's visually-hidden <input> — which is absolutely
+        // positioned and is the element that actually receives focus — is
+        // laid out against THIS checkbox. Without a positioned ancestor here
+        // it resolves against a far-away container, ends up outside any
+        // scroll clipping, and focusing it makes the browser scroll a
+        // container the user cannot scroll back (the roles permission
+        // matrix, where toggling a row threw the page off-screen).
+        "group relative inline-flex items-center gap-2.5 cursor-pointer",
         "font-sans text-[14px] text-ink-2 select-none",
         "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed",
         typeof className === "function" ? className(renderProps) : className
@@ -2614,6 +2623,7 @@ function useInfiniteScrollSentinel({
   return ref;
 }
 var DEFAULT_ROW_HEIGHT = 32;
+var SELECTION_COLUMN_ID = "__select__";
 function DataTable({
   query,
   columns,
@@ -2638,6 +2648,9 @@ function DataTable({
   extraRows,
   bodyBefore,
   bodyAfter,
+  selectionMode = "none",
+  selectedIds,
+  onSelectionChange,
   columnBorders = false
 }) {
   const rows = react.useMemo(() => {
@@ -2648,19 +2661,112 @@ function DataTable({
     if (startExtras.length === 0 && endExtras.length === 0) return dataRows;
     return [...startExtras, ...dataRows, ...endExtras];
   }, [query.data, extraRows]);
+  const resolveRowId = react.useMemo(
+    () => getRowId ?? ((row, index) => {
+      const r = row;
+      if (typeof r.id === "string" || typeof r.id === "number") return String(r.id);
+      if (typeof r.slug === "string") return r.slug;
+      return String(index);
+    }),
+    [getRowId]
+  );
+  const selectionEnabled = selectionMode === "multiple";
+  const selected = react.useMemo(() => selectedIds ?? /* @__PURE__ */ new Set(), [selectedIds]);
+  const loadedIds = react.useMemo(
+    () => selectionEnabled ? rows.map((row, index) => resolveRowId(row, index)) : [],
+    [selectionEnabled, rows, resolveRowId]
+  );
+  const lastToggledIndexRef = react.useRef(null);
+  const toggleRow = (id, index, isRange) => {
+    if (!onSelectionChange) return;
+    const next = new Set(selected);
+    const anchor = lastToggledIndexRef.current;
+    if (isRange && anchor !== null) {
+      const [from, to] = anchor <= index ? [anchor, index] : [index, anchor];
+      for (let i = from; i <= to; i += 1) {
+        const rangeId = loadedIds[i];
+        if (rangeId !== void 0) next.add(rangeId);
+      }
+    } else if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    lastToggledIndexRef.current = index;
+    onSelectionChange(next);
+  };
+  const loadedSelectedCount = loadedIds.reduce((count, id) => count + (selected.has(id) ? 1 : 0), 0);
+  const allLoadedSelected = loadedIds.length > 0 && loadedSelectedCount === loadedIds.length;
+  const toggleAllLoaded = () => {
+    if (!onSelectionChange) return;
+    const next = new Set(selected);
+    if (allLoadedSelected) {
+      for (const id of loadedIds) next.delete(id);
+    } else {
+      for (const id of loadedIds) next.add(id);
+    }
+    lastToggledIndexRef.current = null;
+    onSelectionChange(next);
+  };
+  const rangeModifierRef = react.useRef(false);
+  const selectionColumn = react.useMemo(
+    () => ({
+      id: SELECTION_COLUMN_ID,
+      size: 36,
+      enableSorting: false,
+      meta: { align: "center", sticky: "left", cellClassName: "px-0 justify-center" },
+      header: () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox,
+        {
+          "aria-label": allLoadedSelected ? "Deselect all rows" : "Select all rows",
+          isSelected: allLoadedSelected,
+          isIndeterminate: loadedSelectedCount > 0 && !allLoadedSelected,
+          isDisabled: loadedIds.length === 0,
+          onChange: toggleAllLoaded
+        }
+      ) }),
+      cell: ({ row }) => (
+        // Stop the click here: selecting a row must never also open it.
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "inline-flex items-center justify-center w-full",
+            onClick: (event) => event.stopPropagation(),
+            onKeyDown: (event) => {
+              event.stopPropagation();
+              rangeModifierRef.current = event.shiftKey;
+            },
+            onPointerDownCapture: (event) => {
+              rangeModifierRef.current = event.shiftKey;
+            },
+            role: "presentation",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Checkbox,
+              {
+                "aria-label": `Select row ${row.index + 1}`,
+                isSelected: selected.has(row.id),
+                onChange: () => toggleRow(row.id, row.index, rangeModifierRef.current)
+              }
+            )
+          }
+        )
+      )
+    }),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: handlers read the latest selection via closure recreated on these inputs
+    [selected, loadedIds, allLoadedSelected, loadedSelectedCount]
+  );
+  const tableColumns = react.useMemo(
+    () => selectionEnabled ? [selectionColumn, ...columns] : columns,
+    [selectionEnabled, selectionColumn, columns]
+  );
   const table = reactTable.useReactTable({
     data: rows,
-    columns,
+    columns: tableColumns,
     state: { sorting: sorting ?? [] },
     ...onSortingChange ? { onSortingChange } : {},
     manualSorting: true,
     getCoreRowModel: reactTable.getCoreRowModel(),
-    getRowId: getRowId ? (row, index) => getRowId(row, index) : (row, index) => {
-      const r = row;
-      if (typeof r.id === "string" || typeof r.id === "number") return String(r.id);
-      if (typeof r.slug === "string") return r.slug;
-      return String(index);
-    }
+    getRowId: (row, index) => resolveRowId(row, index)
   });
   const tableRows = table.getRowModel().rows;
   const tableRowCount = tableRows.length;
@@ -2692,8 +2798,8 @@ function DataTable({
     enabled: !!query.hasNextPage
   });
   const totalColumnWidth = react.useMemo(
-    () => columns.reduce((sum, c) => sum + (c.size ?? 140), 0),
-    [columns]
+    () => tableColumns.reduce((sum, c) => sum + (c.size ?? 140), 0),
+    [tableColumns]
   );
   const columnsRef = react.useRef(columns);
   columnsRef.current = columns;
@@ -5189,6 +5295,24 @@ function NavGroup({ icon, label, children, className, ...props }) {
     ) })
   ] });
 }
+var SIZE_PX = { xs: 12, sm: 20, md: 40, lg: 64 };
+var DESIGN = { xs: 20, sm: 20, md: 64, lg: 64 };
+function Orb({ size = "sm", state = "solving", speed, theme, className, label }) {
+  const px = SIZE_PX[size];
+  const design = DESIGN[size];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    thinkingOrbs.ThinkingOrb,
+    {
+      state,
+      size: design,
+      ...speed !== void 0 ? { speed } : {},
+      ...theme !== void 0 ? { theme } : {},
+      className: chunkMWAXK66H_cjs.cn("inline-block shrink-0", className),
+      ...px !== design ? { style: { width: px, height: px } } : {},
+      ...label ? { "aria-label": label } : { "aria-hidden": true }
+    }
+  );
+}
 var progressBarStyles = tailwindVariants.tv({
   slots: {
     track: "relative overflow-hidden rounded-pill bg-surface-2 w-full",
@@ -5323,6 +5447,12 @@ function FieldTypeTag({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4", children });
 }
 
+// src/components/record-filter/field-label.ts
+var FIELD_LABEL_SEPARATOR = " \xB7 ";
+function joinFieldLabel(...parts) {
+  return parts.filter((part) => !!part && part.length > 0).join(FIELD_LABEL_SEPARATOR);
+}
+
 // src/components/record-filter/operators.ts
 var OPERATORS = [
   {
@@ -5454,7 +5584,7 @@ function ChipItem({
     if (custom !== void 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
   }
   if (field.type === "enum") {
-    const option = field.options?.find((o) => o.value === value);
+    const option = findEnumOption(field, value);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Badge,
       {
@@ -5470,6 +5600,9 @@ function ChipItem({
 function Em({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[12px] text-ink-4", children });
 }
+function findEnumOption(field, value) {
+  return field.options?.find((option) => option.value === value);
+}
 function formatValue(field, operator, value) {
   const arity = arityOf(operator);
   if (arity === 0) return "";
@@ -5477,13 +5610,16 @@ function formatValue(field, operator, value) {
     const arr = Array.isArray(value) ? value : typeof value === "string" && value.length > 0 ? value.split(",") : [];
     if (arr.length === 0) return "\u2014";
     if (field.type === "enum") {
-      const labels = arr.map((v) => field.options?.find((x) => x.value === v)?.label ?? v);
+      const labels = arr.map((v) => findEnumOption(field, v)?.label ?? v);
       return labels.length <= 2 ? labels.join(", ") : `${labels[0]}, ${labels[1]} +${labels.length - 2}`;
     }
     return arr.length <= 2 ? arr.join(", ") : `${arr[0]}, ${arr[1]} +${arr.length - 2}`;
   }
   if (field.type === "boolean") return value === true || value === "true" ? "true" : "false";
   if (value === "" || value == null) return "\u2014";
+  if (field.type === "enum") {
+    return findEnumOption(field, String(value))?.label ?? String(value);
+  }
   if (field.type === "number" || field.type === "integer") {
     const n = Number(value);
     return Number.isFinite(n) ? n.toLocaleString() : String(value);
@@ -7091,7 +7227,7 @@ function Chip2({
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-sans text-[12.5px] text-ink-2", children: [
             field.parentLabel ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ink-4", children: [
               field.parentLabel,
-              " / "
+              FIELD_LABEL_SEPARATOR
             ] }) : null,
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ink", children: field.shortLabel })
           ] }),
@@ -7666,6 +7802,7 @@ exports.DraftMessageComposer = DraftMessageComposer;
 exports.DraftMessageReview = DraftMessageReview;
 exports.EmptyState = EmptyState;
 exports.ErrorAnimation = ErrorAnimation;
+exports.FIELD_LABEL_SEPARATOR = FIELD_LABEL_SEPARATOR;
 exports.FieldCaret = FieldCaret;
 exports.FileField = FileField;
 exports.FileViewer = FileViewer;
@@ -7697,6 +7834,7 @@ exports.NavItem = NavItem;
 exports.NavSection = NavSection;
 exports.OPERATORS = OPERATORS;
 exports.OperatorPicker = OperatorPicker;
+exports.Orb = Orb;
 exports.PROTECTED_COMBOS = PROTECTED_COMBOS;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
@@ -7714,6 +7852,7 @@ exports.RecordFilterChips = RecordFilterChips;
 exports.RecordFilterEditor = RecordFilterEditor;
 exports.RenderChipItemProvider = RenderChipItemProvider;
 exports.RenderValueInputProvider = RenderValueInputProvider;
+exports.SELECTION_COLUMN_ID = SELECTION_COLUMN_ID;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.Separator = Separator;
@@ -7771,6 +7910,7 @@ exports.isColumnDragData = isColumnDragData;
 exports.isDraftReviewOutcome = isDraftReviewOutcome;
 exports.isEditableTarget = isEditableTarget;
 exports.isPreviewableImageName = isPreviewableImageName;
+exports.joinFieldLabel = joinFieldLabel;
 exports.makeActionsColumn = makeActionsColumn;
 exports.messageComposerStyles = messageComposerStyles;
 exports.navItemStyles = navItemStyles;