@@ -70,16 +70,18 @@ type TableRowProps = {
7070 className ?: string ;
7171 children : ReactNode ;
7272 disabled ?: boolean ;
73+ isSelected ?: boolean ;
7374} ;
7475
7576export const TableRow = forwardRef < HTMLTableRowElement , TableRowProps > (
76- ( { className, disabled, children } , ref ) => {
77+ ( { className, disabled, isSelected , children } , ref ) => {
7778 return (
7879 < tr
7980 ref = { ref }
8081 className = { cn (
81- disabled && "opacity-50" ,
8282 "group/table-row relative w-full after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed" ,
83+ disabled && "opacity-50" ,
84+ isSelected && isSelectedStyle ,
8385 className
8486 ) }
8587 >
@@ -146,6 +148,7 @@ type TableCellProps = TableCellBasicProps & {
146148 isSticky ?: boolean ;
147149 actionClassName ?: string ;
148150 rowHoverStyle ?: keyof typeof rowHoverStyles ;
151+ isSelected ?: boolean ;
149152} ;
150153
151154const rowHoverStyles = {
@@ -160,6 +163,8 @@ const rowHoverStyles = {
160163const stickyStyles =
161164 "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 w-[--sticky-width] [&:has(.group-hover\\/table-row\\:block)]:w-auto" ;
162165
166+ const isSelectedStyle = "bg-charcoal-750 group-hover:bg-charcoal-750" ;
167+
163168export const TableCell = forwardRef < HTMLTableCellElement , TableCellProps > (
164169 (
165170 {
@@ -173,6 +178,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
173178 hasAction = false ,
174179 isSticky = false ,
175180 rowHoverStyle = "default" ,
181+ isSelected,
176182 } ,
177183 ref
178184 ) => {
@@ -203,7 +209,8 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
203209 to || onClick || hasAction ? "cursor-pointer" : "px-3 py-3 align-middle" ,
204210 ! to && ! onClick && alignmentClassName ,
205211 isSticky && stickyStyles ,
206- rowHoverStyles [ rowHoverStyle ] ,
212+ isSelected && isSelectedStyle ,
213+ ! isSelected && rowHoverStyles [ rowHoverStyle ] ,
207214 className
208215 ) }
209216 colSpan = { colSpan }
@@ -259,10 +266,20 @@ export const TableCellMenu = forwardRef<
259266 hiddenButtons ?: ReactNode ;
260267 popoverContent ?: ReactNode ;
261268 children ?: ReactNode ;
269+ isSelected ?: boolean ;
262270 }
263271> (
264272 (
265- { className, isSticky, onClick, visibleButtons, hiddenButtons, popoverContent, children } ,
273+ {
274+ className,
275+ isSticky,
276+ onClick,
277+ visibleButtons,
278+ hiddenButtons,
279+ popoverContent,
280+ children,
281+ isSelected,
282+ } ,
266283 ref
267284 ) => {
268285 const [ isOpen , setIsOpen ] = useState ( false ) ;
@@ -275,9 +292,17 @@ export const TableCellMenu = forwardRef<
275292 ref = { ref }
276293 alignment = "right"
277294 hasAction = { true }
295+ isSelected = { isSelected }
278296 >
279- < div className = "relative p-1" >
280- < div className = "absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 bg-background-dimmed p-0.5 group-hover/table-row:rounded-[0.25rem] group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright" >
297+ < div className = "relative h-full p-1" >
298+ < div
299+ className = { cn (
300+ "absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] bg-background-dimmed p-0.5 group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright" ,
301+ isSelected && isSelectedStyle ,
302+ isSelected &&
303+ "group-hover/table-row:bg-charcoal-750 group-hover/table-row:ring-charcoal-600/50"
304+ ) }
305+ >
281306 { /* Hidden buttons that show on hover */ }
282307 { hiddenButtons && (
283308 < div className = "hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r group-hover/table-row:border-grid-dimmed" >
0 commit comments