Lint fixes

Author: Pigna

src/components/NotificationPopup/NotificationPopup.tsx

@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type ReactNode, type Ref, useEffect, useRef, useCallback, useState } from 'react';
+
 import { CloseButton } from '../CloseButton';
 import { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from '../../icons';
 import type { NotificationPopupLabels } from '../../labels';
@@ -82,18 +83,18 @@ export function NotificationPopup({
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pausedRef = useRef(false);
-  const prevVisibleRef = useRef(visible);
 
   const [paused, setPaused] = useState(false);
   const [mounted, setMounted] = useState(visible);
   const [leaving, setLeaving] = useState(false);
   const [progressKey, setProgressKey] = useState(0);
+  const [prevVisible, setPrevVisible] = useState(visible);
 
   // Derive mount/leave state from the `visible` prop during render.
   // Calling setState here uses React's "update during render" pattern: React immediately
   // discards the current output and retries — no cascading renders, no effect involvement.
-  if (prevVisibleRef.current !== visible) {
-    prevVisibleRef.current = visible;
+  if (prevVisible !== visible) {
+    setPrevVisible(visible);
     if (visible) {
       if (!mounted) setMounted(true);
       if (leaving) setLeaving(false);

src/components/Table/Table.tsx

@@ -149,12 +149,14 @@ export function Table<T extends Record<string, unknown> = Record<string, unknown
   onRowClick,
   className,
   ref,
-  onKeyDown,
   labels,
   ...rest
 }: TableProps<T>) {
   const ctx = useComponentLibraryStrings();
-  const l = { ...DEFAULT_TABLE_LABELS, ...ctx.table, ...labels };
+  const l = useMemo(
+    () => ({ ...DEFAULT_TABLE_LABELS, ...ctx.table, ...labels }),
+    [ctx.table, labels],
+  );
 
   const [sortKey, setSortKey] = useState<string | null>(null);
   const [sortDir, setSortDir] = useState<SortDirection>('none');
@@ -220,7 +222,7 @@ export function Table<T extends Record<string, unknown> = Record<string, unknown
         setAnnouncement('');
       }
     },
-    [data, columns],
+    [data, columns, l],
   );
 
   /* Row interaction — selection toggle + optional onRowClick callback */
@@ -235,7 +237,7 @@ export function Table<T extends Record<string, unknown> = Record<string, unknown
       }
       onRowClick?.(row, globalIdx);
     },
-    [selectable, onRowClick],
+    [selectable, onRowClick, l.rowSelected, l.selectionCleared],
   );
 
   const handleRowKeyDown = useCallback(
@@ -248,16 +250,15 @@ export function Table<T extends Record<string, unknown> = Record<string, unknown
     [handleRowInteraction],
   );
 
-  /* Escape on the wrapper clears row selection */
-  const handleWrapperKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLDivElement>) => {
+  /* Escape on the table clears row selection */
+  const handleTableKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTableElement>) => {
       if (e.key === 'Escape' && selectedRow !== null) {
         setSelectedRow(null);
         setAnnouncement(l.selectionCleared);
       }
-      onKeyDown?.(e);
     },
-    [selectedRow, onKeyDown],
+    [selectedRow, l.selectionCleared],
   );
 
   /* Resize handler */
@@ -298,8 +299,12 @@ export function Table<T extends Record<string, unknown> = Record<string, unknown
     ...(headerTextColor ? { '--table-header-color': headerTextColor } : {}),
   } as CSSProperties;
 
+  const tableInteractionProps = selectable
+    ? { role: 'grid' as const, onKeyDown: handleTableKeyDown }
+    : {};
+
   return (
-    <div ref={ref} className={classNames} onKeyDown={handleWrapperKeyDown} {...rest}>
+    <div ref={ref} className={classNames} {...rest}>
       {/* Screen reader live region for search results and selection state */}
       <div
         id={liveRegionId}
@@ -340,7 +345,7 @@ export function Table<T extends Record<string, unknown> = Record<string, unknown
             .join(' ')}
           style={tableStyle}
           aria-busy={loading || undefined}
-          role={selectable ? 'grid' : undefined}
+          {...tableInteractionProps}
         >
           {caption && <caption className={styles.caption}>{caption}</caption>}
           <thead className={styles.thead}>