@skyhook-io/k8s-ui 1.14.6 → 1.14.7

package/src/components/ui/drawer-components.tsx

@@ -1,10 +1,11 @@
 import { createContext, useContext, useState } from 'react'
-import { ChevronRight, Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers, X, Minus } from 'lucide-react'
+import { Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers, X, Minus } from 'lucide-react'
 import { clsx } from 'clsx'
 import { formatAge, formatDuration, formatResources } from '../resources/resource-utils'
 import { getEffectiveResources } from '../../utils/extended-resources'
 import { Tooltip } from './Tooltip'
 import { getKindColorClass } from '../ui/Badge'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
 
 // ============================================================================
 // UI COMPONENTS
@@ -86,26 +87,22 @@ interface SectionProps {
 
 export function Section({ title, icon: Icon, children, defaultExpanded = true, contentClassName }: SectionProps) {
   const [expanded, setExpanded] = useState(defaultExpanded)
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   return (
     <div className="border-b-subtle pb-4 last:border-0">
       <button
+        {...buttonProps}
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 w-full text-left mb-2 hover:text-theme-text-primary transition-colors"
       >
-        <ChevronRight className={clsx('w-4 h-4 text-theme-text-tertiary transition-transform duration-200', expanded && 'rotate-90')} />
+        <CollapseChevron open={expanded} className="w-4 h-4" />
         {Icon && <Icon className="w-4 h-4 text-theme-text-secondary" />}
         <span className="text-sm font-medium text-theme-text-secondary">{title}</span>
       </button>
-      <div
-        className="grid transition-[grid-template-rows] duration-200 ease-out"
-        style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
-      >
-        {/* `relative` is load-bearing — see the note in ui/Collapse.tsx. */}
-        <div className="relative overflow-hidden">
-          <div className={contentClassName ?? 'pl-6'}>{children}</div>
-        </div>
-      </div>
+      <Collapse open={expanded} id={panelId}>
+        <div className={contentClassName ?? 'pl-6'}>{children}</div>
+      </Collapse>
     </div>
   )
 }
@@ -118,25 +115,21 @@ interface ExpandableSectionProps {
 
 export function ExpandableSection({ title, children, defaultExpanded = true }: ExpandableSectionProps) {
   const [expanded, setExpanded] = useState(defaultExpanded)
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   return (
     <div>
       <button
+        {...buttonProps}
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 text-sm text-theme-text-secondary hover:text-theme-text-primary transition-colors mb-1"
       >
-        <ChevronRight className={clsx('w-3.5 h-3.5 transition-transform duration-200', expanded && 'rotate-90')} />
+        <CollapseChevron open={expanded} className="w-3.5 h-3.5" />
         {title}
       </button>
-      <div
-        className="grid transition-[grid-template-rows] duration-200 ease-out"
-        style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
-      >
-        {/* `relative` is load-bearing — see the note in ui/Collapse.tsx. */}
-        <div className="relative overflow-hidden">
-          <div className="ml-5">{children}</div>
-        </div>
-      </div>
+      <Collapse open={expanded} id={panelId}>
+        <div className="ml-5">{children}</div>
+      </Collapse>
     </div>
   )
 }

package/src/components/ui/index.ts

@@ -26,7 +26,7 @@ export { ConfirmDialog } from './ConfirmDialog'
 export { HealthRing } from './HealthRing'
 export { MetricsChart, MetricsSparkline } from './MetricsChart'
 export * from './drawer-components'
-export { Collapse, CollapseChevron } from './Collapse'
+export { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from './Collapse'
 export { ResourceBar } from './ResourceBar'
 export { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
 export { InClusterConsentDialog } from './InClusterConsentDialog'
@@ -37,31 +37,39 @@ export { YamlEditor, YamlDiffEditor } from './YamlEditor'
 // pulling monaco-editor into the main bundle. Anything that mounts a bare
 // `Editor` must await this first, or @monaco-editor/react reaches for its CDN.
 export const ensureMonacoRuntime = () =>
-  import('./monacoRuntime').then(({ ensureMonaco }) => ensureMonaco())
+  import("./monacoRuntime").then(({ ensureMonaco }) => ensureMonaco());
 export type {
   YamlDiagnostic,
   YamlDocumentIdentity,
   YamlEditorProps,
   YamlSchemaLoader,
   YamlSchemaLoadResult,
-} from './YamlEditor'
-export { YamlReview } from './YamlReview'
-export type { YamlPreviewResult, YamlReviewProps } from './YamlReview'
-export { RowActionMenu } from './RowActionMenu'
-export type { RowActionItem } from './RowActionMenu'
+} from "./YamlEditor";
+export { YamlReview } from "./YamlReview";
+export type { YamlPreviewResult, YamlReviewProps } from "./YamlReview";
+export { RowActionMenu } from "./RowActionMenu";
+export type { RowActionItem } from "./RowActionMenu";
 
-export { PageHeader } from './PageHeader'
-export { SummaryTile } from './SummaryTile'
-export type { SummaryTone } from './SummaryTile'
-export { Facet, FacetSection, FacetButton } from './Facet'
-export type { FacetTone } from './Facet'
-export { SortableTh, TH_CLASS } from './SortableTh'
-export type { SortDir } from './SortableTh'
-export { DistributionBar, DistributionLegendChip } from './DistributionBar'
-export type { DistributionSegment } from './DistributionBar'
-export { SearchPillInput } from './SearchPillInput'
-export type { SearchModifier, SearchPillInputProps } from './SearchPillInput'
-export { CardSection, CardBody, TerminalBlock, renderProse, NEUTRAL_CHIP_CLASS, KIND_CHIP_CLASS } from './CardSection'
-export type { CardSectionTone } from './CardSection'
-export { MultiSelectPicker } from './MultiSelectPicker'
-export type { MultiSelectPickerProps } from './MultiSelectPicker'
+export { PageHeader } from "./PageHeader";
+export { SummaryTile } from "./SummaryTile";
+export type { SummaryTone } from "./SummaryTile";
+export { Facet, FacetSection, FacetButton } from "./Facet";
+export type { FacetTone } from "./Facet";
+export { SortableTh, TH_CLASS } from "./SortableTh";
+export type { SortDir } from "./SortableTh";
+export { DistributionBar, DistributionLegendChip } from "./DistributionBar";
+export type { DistributionSegment } from "./DistributionBar";
+export { SearchPillInput } from "./SearchPillInput";
+export type { SearchModifier, SearchPillInputProps } from "./SearchPillInput";
+export {
+  CardSection,
+  CardBody,
+  TerminalBlock,
+  TerminalBlockLabel,
+  renderProse,
+  NEUTRAL_CHIP_CLASS,
+  KIND_CHIP_CLASS,
+} from "./CardSection";
+export type { CardSectionTone } from "./CardSection";
+export { MultiSelectPicker } from "./MultiSelectPicker";
+export type { MultiSelectPickerProps } from "./MultiSelectPicker";

package/src/components/workload/WorkloadView.tsx

@@ -7,6 +7,7 @@ import { FetchResult } from '../ui/FetchResult'
 import { PaneLoader } from '../ui/PaneLoader'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { clsx } from 'clsx'
+import { Collapse } from '../ui/Collapse'
 import {
   ArrowLeft,
   ArrowRight,
@@ -2949,20 +2950,15 @@ function PodListFrame({
         {children}
       </div>
       {hasOverflow && (
-        <div
-          className={clsx(
-            'grid transition-[grid-template-rows,opacity] duration-200',
-            expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
-          )}
-          style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}
-          aria-hidden={!expanded || undefined}
-        >
-          <div className={clsx('min-h-0 overflow-hidden', expanded && 'max-h-[26rem] overflow-y-auto pr-1')} inert={!expanded || undefined}>
+        <Collapse open={expanded}>
+          {/* Long overflow lists scroll inside a capped box once open; the
+              cap comes off while closed so the collapse measures to zero. */}
+          <div className={clsx(expanded && 'max-h-[26rem] overflow-y-auto pr-1')}>
             <div className="space-y-2">
               {overflow}
             </div>
           </div>
-        </div>
+        </Collapse>
       )}
       {toggle}
     </div>

package/src/hooks/useAnimatedUnmount.ts

@@ -1,10 +1,15 @@
 import { useState, useEffect, useRef } from 'react'
-import { DURATION_NORMAL } from '../utils/animation'
+import { DURATION_NORMAL, prefersReducedMotion } from '../utils/animation'
 
 /**
  * Delays React unmount until exit animation completes.
  * - `shouldRender`: whether the component should be in the DOM
  * - `isOpen`: drives CSS transition classes (false → closed state, true → open state)
+ *
+ * Pass the EXIT duration (overlayExitMs('dialog') etc.) — that is how long the
+ * closed state stays mounted. Under reduced motion the app stylesheet zeroes the
+ * transition, so the hook disposes at logical close instead of holding an
+ * invisible overlay (and its focus / scroll lock) for the exit window.
  */
 export function useAnimatedUnmount(isVisible: boolean, duration = DURATION_NORMAL) {
   const [shouldRender, setShouldRender] = useState(isVisible)
@@ -21,8 +26,21 @@ export function useAnimatedUnmount(isVisible: boolean, duration = DURATION_NORMA
       return () => cancelAnimationFrame(rafRef.current)
     } else if (shouldRender) {
       setIsOpen(false)
-      const t = setTimeout(() => setShouldRender(false), duration)
-      return () => clearTimeout(t)
+      if (prefersReducedMotion()) {
+        setShouldRender(false)
+        return
+      }
+      // Start the disposal clock only once the closed state has painted (same
+      // double rAF as the open path). A heavy overlay can take a slow frame to
+      // commit its closed classes; a timer started at logical close would then
+      // unmount it before the exit transition has had its full duration.
+      let t = 0
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = requestAnimationFrame(() => {
+          t = window.setTimeout(() => setShouldRender(false), duration)
+        })
+      })
+      return () => { cancelAnimationFrame(rafRef.current); clearTimeout(t) }
     }
   }, [isVisible, duration]) // eslint-disable-line react-hooks/exhaustive-deps — shouldRender intentionally omitted to avoid re-triggering cleanup
 

package/src/theme/components.css

@@ -144,11 +144,14 @@
 
   /* ── ISSUE ROW DETAILS ── */
 
+  /* Legacy: prefer <Collapse unmountOnExit> (ui/Collapse.tsx). Kept for any
+     straggler; timing mirrors DURATION_DISCLOSURE / CSS_EASE in
+     utils/animation.ts — the source-hygiene test keeps them equal. */
   .issue-details-motion {
     display: grid;
     grid-template-rows: 0fr;
     overflow: hidden;
-    transition: grid-template-rows 200ms ease-out;
+    transition: grid-template-rows 300ms cubic-bezier(0.32, 0.72, 0, 1);
   }
 
   .issue-details-motion-open {

package/src/utils/animation.ts

@@ -1,27 +1,57 @@
 /**
  * Central animation presets for consistent motion across the UI.
  *
- * All animations use GPU-composited properties only (translate, scale, opacity)
- * to guarantee 60fps. The iOS-like spring easing gives a fast-in, gentle-out feel.
+ * One curve, a handful of durations, and class fragments that apply them.
+ * Every surface that opens, closes, expands or collapses takes its timing
+ * from here — the hub (radar-hub-web) re-exports this module so Radar Cloud
+ * chrome and the embedded Radar views move alike.
+ *
+ * Property choice: geometry that has to move (grid-template-rows on a
+ * disclosure, width on a drawer) is animated directly; everything else is
+ * transform + opacity so it stays GPU-composited.
  */
 
 // -- Easing ------------------------------------------------------------------
 
+/** The one UI curve. iOS-style decelerate: fast out of the gate, gentle
+ *  settle. Used for disclosures, menus, dialogs, sheets and drawers alike so
+ *  a click reads as the cause of the motion and the content is legible early.
+ *  Chosen over Material's standard curve in a side-by-side on real content. */
+export const CSS_EASE = 'cubic-bezier(0.32, 0.72, 0, 1)'
+/** Alias with the intent in the name; prefer it in new code. */
+export const EASE_UI = CSS_EASE
+
 // Tailwind-safe easing (no spaces — Tailwind splits class strings on whitespace)
 const TW_EASE = 'ease-[cubic-bezier(0.32,0.72,0,1)]'
-
-/** Raw CSS easing for inline transition strings */
-export const CSS_EASE = 'cubic-bezier(0.32, 0.72, 0, 1)'
+/** The same curve as a Tailwind class fragment, for class-string composition. */
+export const TW_EASE_UI = TW_EASE
 
 // -- Durations (ms) ----------------------------------------------------------
 
-/** Standard UI transitions: overlays, panels, toasts */
+/** Standard UI transitions: drawers, toasts. */
 export const DURATION_NORMAL = 300
-/** Dock height, subtle layout shifts */
+/** Dock height, subtle layout shifts. Deliberately fast: the dock is direct
+ *  manipulation the user performs dozens of times a day. */
 export const DURATION_DOCK = 150
 /** Toast exit animation */
 export const DURATION_TOAST_EXIT = 200
 
+/** In-flow disclosure (Collapse / drawer sections / row expanders): panel
+ *  and caret share this, open and close alike. Symmetric on purpose — an
+ *  interrupted toggle reverses cleanly when both directions run one clock. */
+export const DURATION_DISCLOSURE = 300
+
+/** Menus, popovers, listboxes. Exits are shorter than entrances: a dismissal
+ *  should feel immediate. */
+export const DURATION_MENU_IN = 140
+export const DURATION_MENU_OUT = 100
+/** Modal dialogs and command palettes. */
+export const DURATION_DIALOG_IN = 220
+export const DURATION_DIALOG_OUT = 160
+/** Bottom sheets: more travel, a little more time. */
+export const DURATION_SHEET_IN = 280
+export const DURATION_SHEET_OUT = 220
+
 /** Drawer ↔ fullscreen expand/collapse morph. Longer than DURATION_NORMAL so a
  *  large width change advances in small per-frame steps (reads as fluid, not
  *  abrupt). Drives the frame width, the content crossfade, and the JS window
@@ -32,19 +62,69 @@ export const DURATION_DRAWER_MORPH = 260
  *  crossfade fixed the reflow that originally needed the gentle start. */
 export const EASE_DRAWER_MORPH = 'cubic-bezier(0.2, 0.8, 0.2, 1)'
 
+// -- Reduced motion -----------------------------------------------------------
+
+/** True when the OS asks for reduced motion. Presence hooks use it to dispose
+ *  overlays at logical close instead of after an exit transition that the app
+ *  stylesheet has already zeroed. SSR- and test-safe. */
+export function prefersReducedMotion(): boolean {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
 // -- Tailwind class presets ---------------------------------------------------
 // Reusable class fragments — import and spread into clsx() calls.
 
+/** Disclosure panel: grid-template-rows 0fr ↔ 1fr on the wrapper. Pair with
+ *  TRANSITION_CHEVRON on the caret so both run one clock. */
+export const TRANSITION_DISCLOSURE =
+  `transition-[grid-template-rows] duration-300 ${TW_EASE} motion-reduce:transition-none`
+
+/** Disclosure caret (rotate). Same duration and curve as the panel it opens. */
+export const TRANSITION_CHEVRON =
+  `transition-transform duration-300 ${TW_EASE} motion-reduce:transition-none`
+
 /** Drawer slide from right — use with translate-x-0/translate-x-full + opacity.
  *  Also handles expand/collapse (width) so a single transition covers both. */
 export const TRANSITION_DRAWER =
-  `transition-[translate,opacity,width] duration-300 ${TW_EASE} will-change-[transform,width]`
+  `transition-[translate,opacity,width] duration-300 ${TW_EASE} will-change-[transform,width] motion-reduce:transition-none`
 
-
-/** Overlay backdrop fade */
+/** Overlay backdrop fade. Duration comes from the presence state (see
+ *  overlayTransitionStyle) so the exit can be shorter than the entrance. */
 export const TRANSITION_BACKDROP =
-  'transition-opacity duration-200'
+  `transition-opacity ${TW_EASE} motion-reduce:transition-none`
 
-/** Overlay panel scale + fade — use with scale-100/scale-[0.97] + opacity */
+/** Overlay panel scale + fade — use with scale-100/scale-[0.97] + opacity.
+ *  Duration comes from overlayTransitionStyle, not from this fragment. */
 export const TRANSITION_PANEL =
-  `transition-[translate,scale,opacity] duration-300 ${TW_EASE}`
+  `transition-[translate,scale,opacity] ${TW_EASE} motion-reduce:transition-none`
+
+/** Menu / popover: translate + scale + opacity from its anchor corner. Pair
+ *  with a transform-origin utility so it grows from the trigger. */
+export const TRANSITION_MENU =
+  `transition-[translate,scale,opacity] ${TW_EASE} motion-reduce:transition-none`
+
+export type OverlayKind = 'menu' | 'dialog' | 'sheet' | 'drawer'
+
+const OVERLAY_DURATIONS: Record<OverlayKind, { in: number; out: number }> = {
+  menu: { in: DURATION_MENU_IN, out: DURATION_MENU_OUT },
+  dialog: { in: DURATION_DIALOG_IN, out: DURATION_DIALOG_OUT },
+  sheet: { in: DURATION_SHEET_IN, out: DURATION_SHEET_OUT },
+  // Side drawers keep their symmetric slide (TRANSITION_DRAWER); this entry
+  // gives their backdrop the same clock.
+  drawer: { in: DURATION_NORMAL, out: DURATION_NORMAL },
+}
+
+/** Exit duration for an overlay kind — what useAnimatedUnmount should wait. */
+export function overlayExitMs(kind: OverlayKind): number {
+  return OVERLAY_DURATIONS[kind].out
+}
+
+/** Inline style that gives an overlay its entrance or exit duration. Apply to
+ *  the element that carries TRANSITION_PANEL / TRANSITION_MENU / TRANSITION_BACKDROP;
+ *  the class fragments deliberately carry no duration so the two directions
+ *  can differ. */
+export function overlayTransitionStyle(isOpen: boolean, kind: OverlayKind): { transitionDuration: string } {
+  const d = OVERLAY_DURATIONS[kind]
+  return { transitionDuration: `${isOpen ? d.in : d.out}ms` }
+}