@elaraai/e3-ui-components 1.0.31 → 1.0.32

package/dist/index.js

@@ -28,7 +28,7 @@ import { jsx as jsx$1, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useId, useMemo, useContext, createContext, useRef, useEffect, useState, useCallback, useSyncExternalStore, memo, forwardRef, useLayoutEffect, Fragment as Fragment$1, Component } from "react";
 import { Box, Flex, Text, HStack, Input, useSlotRecipe, useRecipe, VStack, useToken, Drawer, Portal, Field, NativeSelect, Textarea, chakra, Tooltip, SegmentGroup, Menu, HoverCard, useChakraContext, Spinner, Code, Clipboard, IconButton, Badge, Button, Tabs, useTabs } from "@chakra-ui/react";
-import { implementUIComponent, getSomeorUndefined, formatPredicate, SliceEditPopover, SlicePredicateBuilder, EastChakraSelect, EastChakraStringInput, EastChakraDateTimeInput, EastChakraFloatInput, EastChakraIntegerInput, formatTick, useSliceReactivity, SliceRailCluster, EastChakraComponent, ClauseChip, StateImpl, NavImpl, SliceImpl, SliceApplyImpl, OverlayImpl, ClipboardImpl, DownloadImpl, ShareImpl, createUIStore, UIStoreProvider } from "@elaraai/east-ui-components";
+import { implementUIComponent, getSomeorUndefined, formatPredicate, SliceEditPopover, SlicePredicateBuilder, EastChakraSelect, EastChakraStringInput, EastChakraDateTimeInput, EastChakraFloatInput, EastChakraIntegerInput, formatTick, useSliceReactivity, usePersistedState, SliceRailCluster, EastChakraComponent, ClauseChip, StateImpl, NavImpl, SliceImpl, SliceApplyImpl, OverlayImpl, ClipboardImpl, DownloadImpl, ShareImpl, createUIStore, UIStoreProvider } from "@elaraai/east-ui-components";
 import { createPortal } from "react-dom";
 import { sliceMatches } from "@elaraai/east-ui/internal";
 import { QueryClient as QueryClient$1, QueryClientProvider, useMutation, useQuery } from "@tanstack/react-query";
@@ -62910,6 +62910,39 @@ const URGENCY_RANK = {
   due: 1,
   routine: 2
 };
+const URGENCY_GROUP_LABEL = {
+  overdue: "Overdue",
+  due: "Due today",
+  routine: "Routine"
+};
+function buildGroups(rows, option) {
+  if (option.key === "none") {
+    return [{ label: "", decisions: rows, pastSla: 0, total: 0, bulk: false }];
+  }
+  const labelFor = (d2) => {
+    var _a2;
+    return option.key === "urgency" ? URGENCY_GROUP_LABEL[d2.urgency.type] : option.key === "kind" ? d2.kind : ((_a2 = option.accessor) == null ? void 0 : _a2.call(option, d2)) ?? "";
+  };
+  const out = /* @__PURE__ */ new Map();
+  for (const d2 of rows) {
+    const label = labelFor(d2);
+    let group2 = out.get(label);
+    if (group2 === void 0) {
+      group2 = {
+        label,
+        decisions: [],
+        pastSla: 0,
+        total: 0,
+        bulk: option.key === "urgency" && d2.urgency.type === "routine"
+      };
+      out.set(label, group2);
+    }
+    group2.decisions.push(d2);
+    group2.total += d2.value;
+    if (d2.urgency.type === "overdue") group2.pastSla += 1;
+  }
+  return [...out.values()];
+}
 const FACETS = [
   { key: "evidence", label: "Evidence" },
   { key: "options", label: "Options" },
@@ -63026,7 +63059,8 @@ const Row = memo(function Row2({ decision, handle, selected: selected2, narrow,
     ),
     /* @__PURE__ */ jsx$1(Box, { as: "button", css: button({ variant: "ghost", size: "xs" }), onClick: handleReject, children: "Reject" })
   ] });
-  const title = /* @__PURE__ */ jsxs(Box, { minW: 0, cursor: selected2 ? void 0 : "pointer", onClick: handleSelect, children: [
+  const fullTitle = `${decision.kind} · ${decision.title}${summary !== void 0 ? ` · ${summary}` : ""}`;
+  const title = /* @__PURE__ */ jsxs(Box, { css: rs.titleText, title: fullTitle, cursor: selected2 ? void 0 : "pointer", onClick: handleSelect, children: [
     /* @__PURE__ */ jsx$1(Text, { as: "span", fontWeight: "semibold", children: decision.kind }),
     /* @__PURE__ */ jsx$1(Text, { as: "span", color: "fg.subtle", children: " · " }),
     /* @__PURE__ */ jsx$1(Text, { as: "span", children: decision.title }),
@@ -63111,10 +63145,39 @@ const RoutineGroup = memo(function RoutineGroup2({ routine, acceptAll, leaving,
     ] })
   ] });
 });
+const GroupHead = memo(function GroupHead2({ group: group2, collapsible, collapsed, onToggle, acceptAll }) {
+  const dq = useSlotRecipe({ key: "decisionQueue" });
+  const button = useRecipe({ key: "button" });
+  const rs = dq({});
+  const format2 = group2.decisions[0] ? getSomeorUndefined(group2.decisions[0].format) : void 0;
+  const handleToggle = useCallback(() => {
+    if (collapsible) onToggle(group2.label);
+  }, [collapsible, onToggle, group2.label]);
+  const handleAcceptAll = useCallback((e3) => {
+    e3.stopPropagation();
+    if (acceptAll) acceptAll(group2.decisions);
+  }, [acceptAll, group2.decisions]);
+  return /* @__PURE__ */ jsxs(Box, { css: rs.groupHead, ...collapsible ? { "data-collapsible": "" } : {}, onClick: handleToggle, children: [
+    collapsible && /* @__PURE__ */ jsx$1(Box, { as: "span", css: rs.groupCaret, children: collapsed ? "▸" : "▾" }),
+    /* @__PURE__ */ jsxs(Box, { as: "span", css: rs.groupLabel, children: [
+      group2.label,
+      " · ",
+      group2.decisions.length
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { as: "span", css: rs.groupSummary, children: [
+      formatTick(group2.total, format2),
+      group2.pastSla > 0 ? ` · ${group2.pastSla} past SLA` : ""
+    ] }),
+    acceptAll && /* @__PURE__ */ jsx$1(Box, { as: "button", css: button({ variant: "solid", size: "xs" }), onClick: handleAcceptAll, children: "Accept all" })
+  ] });
+});
 const EastChakraDecisionQueue = memo(function EastChakraDecisionQueue2({ value, storageKey }) {
   var _a2;
   const eyebrow = useSlotRecipe({ key: "eyebrowRow" });
   const es = eyebrow({});
+  const dq = useSlotRecipe({ key: "decisionQueue" });
+  const qs = dq({});
+  const chip = useRecipe({ key: "chip" });
   const handleRef = value.handle;
   const handle = useDecisionHandle(handleRef);
   const decisions = handle.decisions;
@@ -63183,6 +63246,25 @@ const EastChakraDecisionQueue = memo(function EastChakraDecisionQueue2({ value,
     return facets === void 0 ? null : new Set(facets.map((f2) => f2.type));
   }, [value.facets]);
   const defaultExpanded = getSomeorUndefined(value.defaultExpanded);
+  const groupDefs = useMemo(
+    () => getSomeorUndefined(value.groups) ?? [],
+    [value.groups]
+  );
+  const defaultGroupKey = getSomeorUndefined(value.groupBy);
+  const grouped = defaultGroupKey !== void 0;
+  const collapsible = grouped && (getSomeorUndefined(value.collapsible) ?? true);
+  const groupOptions = useMemo(() => [
+    { key: "urgency", label: "Urgency" },
+    { key: "kind", label: "Kind" },
+    ...groupDefs.map((g2) => ({ key: g2.label, label: g2.label, accessor: g2.value })),
+    { key: "none", label: "None" }
+  ], [groupDefs]);
+  const { state: toolbar, setState: setToolbar } = usePersistedState(`${storageKey}.toolbar`, {
+    groupKey: defaultGroupKey ?? "urgency",
+    // The urgency grouping's routine tail ships collapsed.
+    collapsed: [URGENCY_GROUP_LABEL.routine]
+  });
+  const activeOption = groupOptions.find((o2) => o2.key === toolbar.groupKey) ?? groupOptions[0];
   const selectedId = handle.selected ?? (defaultExpanded == null ? void 0 : defaultExpanded.id) ?? null;
   const resolve2 = useCallback((ds, hook2, reason) => {
     if (hook2) for (const d2 of ds) {
@@ -63197,15 +63279,15 @@ const EastChakraDecisionQueue = memo(function EastChakraDecisionQueue2({ value,
   const apply2 = useCallback((d2) => resolve2([d2], onApply, "apply"), [resolve2, onApply]);
   const reject2 = useCallback((d2) => resolve2([d2], onReject, "reject"), [resolve2, onReject]);
   const acceptAll = useCallback((ds) => resolve2(ds, onApply, "apply"), [resolve2, onApply]);
-  const { active, routine, pastSla, visible } = useMemo(() => {
+  const { merged, active, routine, pastSla, visible } = useMemo(() => {
     const scoped = decisions ?? [];
     const now2 = /* @__PURE__ */ new Date();
     const live = sliceState !== null ? scoped.filter((d2) => sliceMatches(sliceState, DECISION_SLICE_CONFIG, d2, now2)) : scoped;
-    const merged = [...live];
+    const merged2 = [...live];
     for (const { decision } of exiting.values()) {
-      if (!merged.some((d2) => d2.id === decision.id)) merged.push(decision);
+      if (!merged2.some((d2) => d2.id === decision.id)) merged2.push(decision);
     }
-    merged.sort((a2, b2) => {
+    merged2.sort((a2, b2) => {
       var _a3, _b2;
       const r2 = URGENCY_RANK[a2.urgency.type] - URGENCY_RANK[b2.urgency.type];
       if (r2 !== 0) return r2;
@@ -63215,17 +63297,55 @@ const EastChakraDecisionQueue = memo(function EastChakraDecisionQueue2({ value,
       return b2.value - a2.value;
     });
     return {
-      active: merged.filter((d2) => d2.urgency.type !== "routine"),
-      routine: merged.filter((d2) => d2.urgency.type === "routine"),
-      pastSla: merged.filter((d2) => d2.urgency.type === "overdue").length,
+      merged: merged2,
+      active: merged2.filter((d2) => d2.urgency.type !== "routine"),
+      routine: merged2.filter((d2) => d2.urgency.type === "routine"),
+      pastSla: merged2.filter((d2) => d2.urgency.type === "overdue").length,
       visible: live.length
     };
   }, [decisions, exiting, sliceState]);
+  const groups = useMemo(
+    () => grouped ? buildGroups(merged, activeOption) : [],
+    [grouped, merged, activeOption]
+  );
+  const allCollapsed = groups.length > 0 && groups.every((g2) => g2.label === "" || toolbar.collapsed.includes(g2.label));
+  const toggleGroup = useCallback((label) => {
+    setToolbar((prev2) => ({
+      ...prev2,
+      collapsed: prev2.collapsed.includes(label) ? prev2.collapsed.filter((l2) => l2 !== label) : [...prev2.collapsed, label]
+    }));
+  }, [setToolbar]);
+  const toggleAll = useCallback(() => {
+    const next2 = allCollapsed ? [] : groups.map((g2) => g2.label).filter((l2) => l2 !== "");
+    setToolbar((prev2) => ({ ...prev2, collapsed: next2 }));
+  }, [setToolbar, allCollapsed, groups]);
+  const setGroupKey = useCallback((key) => {
+    setToolbar((prev2) => prev2.groupKey === key ? prev2 : { ...prev2, groupKey: key });
+  }, [setToolbar]);
   const exitingReasons = useMemo(() => {
     const m2 = /* @__PURE__ */ new Map();
     for (const [id3, e3] of exiting) m2.set(id3, e3.reason);
     return m2;
   }, [exiting]);
+  const renderRow = (d2) => /* @__PURE__ */ jsx$1(
+    Row,
+    {
+      decision: d2,
+      handle,
+      selected: selectedId === d2.id,
+      narrow,
+      leverPayloads,
+      modify,
+      evidence,
+      defaultFacet,
+      facetInclude,
+      apply: apply2,
+      reject: reject2,
+      leaving: exitingReasons.get(d2.id),
+      storageKey
+    },
+    d2.id
+  );
   if (decisions === null) {
     return /* @__PURE__ */ jsx$1(Box, { layerStyle: "surface.frameless", p: "16px", children: /* @__PURE__ */ jsx$1(Text, { color: "fg.muted", fontSize: "13px", children: "Loading decisions…" }) });
   }
@@ -63253,33 +63373,45 @@ const EastChakraDecisionQueue = memo(function EastChakraDecisionQueue2({ value,
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(
+    grouped && /* @__PURE__ */ jsxs(Box, { css: qs.toolbar, children: [
+      /* @__PURE__ */ jsx$1(Box, { as: "span", css: qs.segLabel, children: "Group by" }),
+      groupOptions.map((o2) => /* @__PURE__ */ jsx$1(
+        Box,
+        {
+          as: "button",
+          css: { ...chip({ tone: toolbar.groupKey === o2.key ? "brand" : "neutral", size: "sm" }), cursor: "pointer" },
+          "aria-pressed": toolbar.groupKey === o2.key,
+          onClick: () => setGroupKey(o2.key),
+          children: o2.label
+        },
+        o2.key
+      )),
+      collapsible && /* @__PURE__ */ jsx$1(Box, { as: "button", css: qs.collapseAll, onClick: toggleAll, children: allCollapsed ? "Expand all" : "Collapse all" })
+    ] }),
+    /* @__PURE__ */ jsx$1(
       Box,
       {
         maxHeight: getSomeorUndefined(value.maxHeight),
         overflowY: value.maxHeight.type === "some" ? "auto" : void 0,
-        children: [
-          active.map((d2) => /* @__PURE__ */ jsx$1(
-            Row,
-            {
-              decision: d2,
-              handle,
-              selected: selectedId === d2.id,
-              narrow,
-              leverPayloads,
-              modify,
-              evidence,
-              defaultFacet,
-              facetInclude,
-              apply: apply2,
-              reject: reject2,
-              leaving: exitingReasons.get(d2.id),
-              storageKey
-            },
-            d2.id
-          )),
+        children: grouped ? groups.map((g2) => {
+          const isCollapsed = collapsible && g2.label !== "" && toolbar.collapsed.includes(g2.label);
+          return /* @__PURE__ */ jsxs(Box, { children: [
+            g2.label !== "" && /* @__PURE__ */ jsx$1(
+              GroupHead,
+              {
+                group: g2,
+                collapsible,
+                collapsed: isCollapsed,
+                onToggle: toggleGroup,
+                acceptAll: g2.bulk ? acceptAll : void 0
+              }
+            ),
+            !isCollapsed && g2.decisions.map(renderRow)
+          ] }, g2.label || "_flat");
+        }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          active.map(renderRow),
           /* @__PURE__ */ jsx$1(RoutineGroup, { routine, acceptAll, leaving: exitingReasons, narrow })
-        ]
+        ] })
       }
     )
   ] });