@orsetra/shared-ui 1.10.4 → 1.10.6

package/components/ui/index.ts

@@ -47,6 +47,7 @@ export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, Pagi
 export { Popover, PopoverTrigger, PopoverContent } from './popover'
 export { Progress } from './progress'
 export { RadioGroup, RadioGroupItem } from './radio-group'
+export { RelativeTimeRangePicker, type RelativeTimeRangeOption, type RelativeTimeRangePickerProps } from './relative-time-range-picker'
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './resizable'
 export { ScrollArea, ScrollBar } from './scroll-area'
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator } from './select'

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

@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronDown, Clock } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+
+export interface RelativeTimeRangeOption {
+  label: string
+  /** Length of the window, in seconds (e.g. 3600 for "1h"). Used as the option's identity. */
+  seconds: number
+}
+
+export interface RelativeTimeRangePickerProps {
+  id?: string
+  value: number
+  onChange: (seconds: number) => void
+  options: RelativeTimeRangeOption[]
+  disabled?: boolean
+  className?: string
+  /** Popover alignment relative to the trigger. Defaults to "end" (picker anchored right — the
+   * common placement next to a panel's close button). */
+  align?: "start" | "center" | "end"
+  /** Accessible name and popover heading. Defaults to "Time range". */
+  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,
+  value,
+  onChange,
+  options,
+  disabled = false,
+  className,
+  align = "end",
+  triggerLabel = "Time range",
+}: RelativeTimeRangePickerProps) {
+  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>
+        <Button
+          id={id}
+          type="button"
+          variant="secondary"
+          size="sm"
+          disabled={disabled}
+          aria-label={triggerLabel}
+          className={cn("rounded-none", className)}
+          leftIcon={<Clock className="h-3.5 w-3.5" />}
+          rightIcon={<ChevronDown className="h-3.5 w-3.5 opacity-60" />}
+        >
+          {triggerText}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align={align} sideOffset={6} className="w-auto rounded-none p-2">
+        <p className="px-1 pb-2 text-xs font-medium text-ibm-gray-50">{triggerLabel}</p>
+        <div role="listbox" aria-label={triggerLabel} className="grid grid-cols-3 gap-1.5">
+          {options.map(opt => {
+            const isSelected = opt.seconds === value
+            return (
+              <button
+                key={opt.seconds}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                onClick={() => { onChange(opt.seconds); setOpen(false) }}
+                className={cn(
+                  "flex items-center justify-center gap-1 h-9 px-2 text-sm font-medium border transition-colors whitespace-nowrap",
+                  isSelected
+                    ? "bg-ibm-blue-60 text-white border-ibm-blue-60"
+                    : "bg-white text-ibm-gray-100 border-ibm-gray-20 hover:bg-ibm-blue-10 hover:border-ibm-blue-40"
+                )}
+              >
+                {isSelected && <Check className="h-3 w-3 flex-shrink-0" />}
+                {opt.label}
+              </button>
+            )
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/package.json

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