"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { XIcon } from "@kineticui/icons"; export type BulkAction = { id: string; label: string; icon?: React.ReactNode; shortcut?: string; destructive?: boolean; onClick: () => void }; export type BulkActionBarProps = { /** Number of selected items. The bar shows when > 0. */ count: number; total?: number; actions: BulkAction[]; onClear: () => void; onSelectAll?: () => void; noun?: [string, string]; fixed?: boolean; className?: string; }; /** Floating bar that slides up while items are selected: count with rolling digits, select-all, actions with shortcuts, Esc to clear. */ export function BulkActionBar({ count, total, actions, onClear, onSelectAll, noun = ["item", "items"], fixed = true, className }: BulkActionBarProps) { React.useEffect(() => { if (!count) return; const onKey = (e: KeyboardEvent) => { if (/^(INPUT|TEXTAREA|SELECT)$/.test((e.target as HTMLElement).tagName)) return; if (e.key === "Escape") onClear(); const a = actions.find((x) => x.shortcut && x.shortcut.toLowerCase() === e.key.toLowerCase() && !e.metaKey && !e.ctrlKey); if (a) { e.preventDefault(); a.onClick(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [count, actions, onClear]); return ( {count > 0 ? ( ) : null} ); }

Bulk Action Bar

Installation

Exports