@orsetra/shared-ui 1.10.5 → 1.10.6

package/components/ui/relative-time-range-picker.tsx

@@ -26,11 +26,30 @@ export interface RelativeTimeRangePickerProps {
   triggerLabel?: string
 }
 
+const DAY_SECONDS = 24 * 60 * 60
+
+// Refreshed periodically (see the interval effect below) so the label doesn't drift far
+// from reality if the picker is left open for a while without the selection changing.
+const REFRESH_INTERVAL_MS = 30_000
+
+const timeFormatter = new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit", hour12: false })
+const dayFormatter = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" })
+
+/** "Since 14:32" for hour/minute-scale options, "Since Aug 18, 14:32" once the option spans a day or more. */
+function formatSince(sinceMs: number, isDayScale: boolean): string {
+  const date = new Date(sinceMs)
+  const time = timeFormatter.format(date)
+  return isDayScale ? `Since ${dayFormatter.format(date)}, ${time}` : `Since ${time}`
+}
+
 /**
  * Flyout picker for a small set of relative time ranges (20m, 1h, 3h, ...), styled as a gallery
  * of choices rather than a dropdown list — the current selection is highlighted with both a
  * filled background and a check mark (not color alone), mirroring how Calendar marks the
  * selected day and Combobox marks the selected item in this same component set.
+ *
+ * The trigger shows the resolved absolute start of the window ("Since ...") rather than the
+ * bare option label, so the picker doubles as a readout of what's actually being queried.
  */
 export function RelativeTimeRangePicker({
   id,
@@ -45,6 +64,23 @@ export function RelativeTimeRangePicker({
   const [open, setOpen] = React.useState(false)
   const selected = options.find(o => o.seconds === value)
 
+  const [now, setNow] = React.useState(() => Date.now())
+
+  // Freshen immediately on selection change and whenever the flyout opens.
+  React.useEffect(() => {
+    setNow(Date.now())
+  }, [value, open])
+
+  // ...and keep it from going stale while left open/mounted without interaction.
+  React.useEffect(() => {
+    const interval = setInterval(() => setNow(Date.now()), REFRESH_INTERVAL_MS)
+    return () => clearInterval(interval)
+  }, [])
+
+  const triggerText = selected
+    ? formatSince(now - selected.seconds * 1000, selected.seconds >= DAY_SECONDS)
+    : "Select…"
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -59,7 +95,7 @@ export function RelativeTimeRangePicker({
           leftIcon={<Clock className="h-3.5 w-3.5" />}
           rightIcon={<ChevronDown className="h-3.5 w-3.5 opacity-60" />}
         >
-          {selected?.label ?? "Select…"}
+          {triggerText}
         </Button>
       </PopoverTrigger>
       <PopoverContent align={align} sideOffset={6} className="w-auto rounded-none p-2">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",