fix(lint)!: upgrade eslint to v10 and fix some issues uncovered by the upgrade

.yarnrc.yml

@@ -3,3 +3,8 @@ enableHardenedMode: false
 enableScripts: false
 
 nodeLinker: node-modules
+
+packageExtensions:
+  "eslint-plugin-jsx-a11y@*":
+    peerDependencies:
+      eslint: "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9 || ^10"

components/AriaTable/AriaTable.tsx

@@ -114,6 +114,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(
     const [isCollapsed, setIsCollapsed] = useState(false);
 
     if (!asChild) {
+      // eslint-disable-next-line @eslint-react/no-children-to-array
       const arrayChildren = Children.toArray(children);
       const hasColSpanChildren = arrayChildren.some((child) => {
         if (!isValidElement(child)) {
@@ -154,12 +155,13 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(
             </Box>
           </Td>
         ) : null,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line @eslint-react/exhaustive-deps
       [isCollapsed],
     );
 
     const renderedChildren = useMemo(() => {
       if (asChild) {
+        // eslint-disable-next-line @eslint-react/no-clone-element
         return cloneElement(
           children as any,
           {

components/Badge/Badge.stories.tsx

@@ -74,7 +74,7 @@ export const Interactive: StoryFn<typeof BadgeForStory> = (args) => (
   <Flex css={{ gap: '$3' }}>
     <Badge {...args}>Default</Badge>
     {COLORS.map((color) => (
-      <Badge {...args} variant={color}>
+      <Badge key={color} {...args} variant={color}>
         {color}
       </Badge>
     ))}

components/Badge/Badge.tsx

@@ -146,7 +146,7 @@ export const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>
         return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;
       }
       return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line @eslint-react/exhaustive-deps
     }, [asChild]);
 
     return <Component {...props} ref={forwardedRef} />;

components/DateTimePicker/DateTimePicker.stories.tsx

@@ -42,7 +42,7 @@ const Component: Meta<typeof DateTimePickerForStory> = {
 };
 
 const DateTimePickerTemplate: StoryFn<typeof DateTimePickerForStory> = (args) => {
-  const [selectedDates, onDatesChange] = useState<Date[]>([]);
+  const [selectedDates, setSelectedDates] = useState<Date[]>([]);
   const [minDate] = useState(() => new Date(args.minDate || Date.now()));
 
   return (
@@ -53,7 +53,7 @@ const DateTimePickerTemplate: StoryFn<typeof DateTimePickerForStory> = (args) =>
           minDate,
         }}
         calendar={{ mode: args.calendarMode, startDay: 1 }}
-        onDatesChange={onDatesChange}
+        onDatesChange={setSelectedDates}
         selectedDates={selectedDates}
       />
       <Flex direction="column" css={{ gap: '2px' }}>

components/DateTimePickerInput/DateTimePickerInput.stories.tsx

@@ -52,17 +52,18 @@ const Component: Meta<typeof DateTimePickerInputForStory> = {
 };
 
 const DateTimePickerTemplate: StoryFn<typeof DateTimePickerInputForStory> = (args) => {
-  const [selectedDates, onDatesChange] = useState<Date[]>([]);
+  const [selectedDates, setSelectedDates] = useState<Date[]>([]);
+  const [minDate] = useState(() => new Date());
 
   return (
     <form>
       <Flex direction="column" gap={3}>
         <DateTimePickerInputForStory
           {...args}
           calendar={{ startDay: 1 }}
-          dates={{ minDate: new Date() }}
+          dates={{ minDate }}
           inputCSS={{ width: '100%' }}
-          onChange={onDatesChange}
+          onChange={setSelectedDates}
         />
         <Flex direction="column" css={{ gap: '2px' }}>
           <Label htmlFor="selected-dates">Selected date:</Label>

components/DateTimePickerInput/DateTimePickerInput.tsx

@@ -116,7 +116,7 @@ export const DateTimePickerInput = React.forwardRef<
     const arrowRef = useRef(null);
 
     const [inputValue, setInputValue] = useState<string>('');
-    const [selectedDates, onDatesChange] = useState<Date[]>([]);
+    const [selectedDates, setSelectedDates] = useState<Date[]>([]);
     const [isPickerOpen, setIsPickerOpen] = useState(false);
 
     const middleware = useMemo(
@@ -159,7 +159,7 @@ export const DateTimePickerInput = React.forwardRef<
               const newDates = (value as string)
                 .split(',')
                 .map((d) => parse(d.trim(), formatStr, new Date()));
-              onDatesChange(newDates);
+              setSelectedDates(newDates);
               if (onChange) onChange(newDates);
               // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (err) {
@@ -183,7 +183,7 @@ export const DateTimePickerInput = React.forwardRef<
                   {...pickerProps}
                   css={pickerCSS}
                   onDatesChange={(d) => {
-                    onDatesChange(d);
+                    setSelectedDates(d);
                     setInputValue(d.map((date) => format(date, formatStr)).join(', '));
                     if (onChange) onChange(d);
                   }}

components/Heading/Heading.vanilla.tsx

@@ -39,6 +39,9 @@ function createHeadingComponent<C extends ElementType>(
   type HeadingComponent = PolymorphicComponent<C, HeadingProps<ElementType>>;
 
   const HeadingImpl = forwardRef(
+    // Safe: factory is called once at module load (e.g. `export const H1 = createHeading(...)`),
+    // not inside a render, so HeadingImpl gets a stable reference; no remount on re-render.
+    // eslint-disable-next-line @eslint-react/component-hook-factories
     <E extends ElementType = C>(
       { as, className, css, style, transform, ...props }: HeadingProps<E>,
       ref?: PolymorphicRef<E>,

components/List/List.tsx

@@ -151,8 +151,7 @@ export const Ul = React.forwardRef<React.ElementRef<typeof StyledUl>, ListProps>
 );
 
 export interface OrderedListProps
-  extends ComponentProps<typeof StyledOl>,
-    VariantProps<typeof StyledOl> {
+  extends ComponentProps<typeof StyledOl>, VariantProps<typeof StyledOl> {
   interactive?: boolean;
 }
 
@@ -187,7 +186,8 @@ const ControlsWrapper = styled('div', {
 });
 
 export interface ListItemProps
-  extends ComponentProps<typeof StyledLi>,
+  extends
+    ComponentProps<typeof StyledLi>,
     VariantProps<typeof StyledLi>,
     VariantProps<typeof Flex> {
   controls?: ReactNode;
@@ -196,6 +196,7 @@ export const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemPr
   ({ children, controls, align, justify, direction, gap, wrap, ...props }, forwardedRef) => {
     const { interactive } = useContext(ListContext);
 
+    // eslint-disable-next-line @eslint-react/no-children-to-array
     const childArray = React.Children.toArray(children);
     const nestedLists = childArray.filter(
       (child) => React.isValidElement(child) && (child.type === Ul || child.type === Ol),

components/NavigationTree/NavigationTreeContainer.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { CSS } from '../../stitches.config';
 import { NavigationContainer, NavigationContainerProps } from '../Navigation';
+import { NavigationTreeContext } from './NavigationTreeContext';
 
 export interface NavigationTreeProps {
   children: React.ReactNode;
@@ -19,13 +20,9 @@ export const NavigationTreeContainer = ({
   fullWidth = false,
   ...props
 }: NavigationTreeProps & NavigationContainerProps) => {
-  const renderChildren = React.Children.map(children, (child) => {
-    return React.cloneElement(child as React.ReactElement, {
-      defaultCollapseIcon,
-      defaultExpandIcon,
-      fullWidth,
-    });
-  });
-
-  return <NavigationContainer {...props}>{renderChildren}</NavigationContainer>;
+  return (
+    <NavigationTreeContext.Provider value={{ defaultCollapseIcon, defaultExpandIcon, fullWidth }}>
+      <NavigationContainer {...props}>{children}</NavigationContainer>
+    </NavigationTreeContext.Provider>
+  );
 };

components/NavigationTree/NavigationTreeContext.tsx

@@ -0,0 +1,16 @@
+import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import React from 'react';
+
+interface NavigationTreeContextValue {
+  defaultExpandIcon: React.ReactNode;
+  defaultCollapseIcon: React.ReactNode;
+  fullWidth: boolean;
+}
+
+export const NavigationTreeContext = React.createContext<NavigationTreeContextValue>({
+  defaultExpandIcon: <ChevronRightIcon />,
+  defaultCollapseIcon: <ChevronDownIcon />,
+  fullWidth: false,
+});
+
+export const useNavigationTree = () => React.useContext(NavigationTreeContext);

components/NavigationTree/NavigationTreeDrawer.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { CSS } from '../../stitches.config';
 import { NavigationDrawer, NavigationDrawerProps } from '../Navigation';
+import { NavigationTreeContext, useNavigationTree } from './NavigationTreeContext';
 
 export interface NavigationTreeDrawerProps {
   children: React.ReactNode;
@@ -14,15 +15,13 @@ export const NavigationTreeDrawer = ({
   fullWidth = false,
   ...props
 }: NavigationTreeDrawerProps & NavigationDrawerProps) => {
-  const renderChildren = React.Children.map(children, (child) => {
-    return React.cloneElement(child as React.ReactElement, {
-      fullWidth,
-    });
-  });
+  const parentCtx = useNavigationTree();
 
   return (
-    <NavigationDrawer fullWidth={fullWidth} {...props}>
-      {renderChildren}
-    </NavigationDrawer>
+    <NavigationTreeContext.Provider value={{ ...parentCtx, fullWidth }}>
+      <NavigationDrawer fullWidth={fullWidth} {...props}>
+        {children}
+      </NavigationDrawer>
+    </NavigationTreeContext.Provider>
   );
 };

components/NavigationTree/NavigationTreeItem.tsx

@@ -6,19 +6,17 @@ import { Flex } from '../Flex';
 import { NavigationItem, NavigationItemProps } from '../Navigation';
 import { Text } from '../Text';
 import { NavigationTreeContainer } from './NavigationTreeContainer';
+import { useNavigationTree } from './NavigationTreeContext';
 
 export interface NavigationTreeItemProps {
   label: string | ReactNode;
   subtitle?: string;
   children?: React.ReactNode;
   defaultExpanded?: boolean;
   onClick?: () => void;
-  defaultExpandIcon?: React.ReactNode;
-  defaultCollapseIcon?: React.ReactNode;
   customExpandIcon?: React.ReactNode;
   customCollapseIcon?: React.ReactNode;
   nestedChildrenLevel?: number;
-  fullWidth?: boolean;
 }
 
 export const NavigationTreeItem = ({
@@ -27,16 +25,14 @@ export const NavigationTreeItem = ({
   children,
   onClick,
   defaultExpanded = false,
-  defaultCollapseIcon,
-  defaultExpandIcon,
   customCollapseIcon,
   customExpandIcon,
   nestedChildrenLevel = 1,
-  fullWidth = false,
   ...props
 }: NavigationTreeItemProps & NavigationItemProps) => {
+  const { defaultCollapseIcon, defaultExpandIcon, fullWidth } = useNavigationTree();
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-  const isExpandable = useMemo(() => React.Children.count(children) > 0, [children]);
+  const isExpandable = useMemo(() => !!children, [children]);
   const hasStartAdornment = useMemo(() => !!props.startAdornment, [props.startAdornment]);
   const usedStartAdornment = useMemo(
     () =>
@@ -70,7 +66,7 @@ export const NavigationTreeItem = ({
         },
       },
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [isExpandable, nestedChildrenLevel]);
 
   const focusStyle = useMemo(() => {

components/SidePanel/SidePanel.stories.tsx

@@ -88,11 +88,11 @@ Basic.args = {
 
 export const CombinedWithModal: StoryFn<typeof SidePanel> = (args) => {
   const [open, setOpen] = useState(false);
-  const [isModalOpen, setModalOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
     <>
-      <Dialog open={isModalOpen} onOpenChange={(isModalOpen) => setModalOpen(isModalOpen)}>
+      <Dialog open={isModalOpen} onOpenChange={(isModalOpen) => setIsModalOpen(isModalOpen)}>
         <DialogPortal>
           <DialogOverlay />
           <DialogContent>
@@ -102,7 +102,7 @@ export const CombinedWithModal: StoryFn<typeof SidePanel> = (args) => {
       </Dialog>
 
       <SidePanel {...args} open={open} onOpenChange={(isOpen) => setOpen(isOpen)}>
-        <Content ctaLabel="Open modal" onClickBtn={() => setModalOpen(true)} />
+        <Content ctaLabel="Open modal" onClickBtn={() => setIsModalOpen(true)} />
       </SidePanel>
 
       <Box>

components/Skeleton/Skeleton.stories.tsx

@@ -90,7 +90,7 @@ export const Typographies: StoryFn<typeof SkeletonForStory> = () => (
     </H6>
 
     {TEXT_SIZES.map((size) => (
-      <FaencyText size={size}>
+      <FaencyText key={size} size={size}>
         <Skeleton variant="text" />
       </FaencyText>
     ))}
@@ -102,7 +102,7 @@ const AVATAR_SIZES = ['1', '2', '3', '4', '5', '6'] as const;
 export const Avatars: StoryFn<typeof SkeletonForStory> = () => (
   <Flex gap="3" align="center">
     {AVATAR_SIZES.map((size) => (
-      <Flex gap="3" align="center" direction="column">
+      <Flex key={size} gap="3" align="center" direction="column">
         <Skeleton variant="circle">
           <Avatar size={size} />
         </Skeleton>
@@ -187,15 +187,15 @@ export const Customs: StoryFn<typeof SkeletonForStory> = () => (
       <Flex direction="column" gap={2} css={{ flex: 1 }}>
         {Array(10)
           .fill(0)
-          .map(() => (
-            <Skeleton variant="text" />
+          .map((_, i) => (
+            <Skeleton key={i} variant="text" />
           ))}
       </Flex>
       <Flex direction="column" gap={2} css={{ flex: 1 }}>
         {Array(10)
           .fill(0)
-          .map(() => (
-            <Skeleton variant="text" />
+          .map((_, i) => (
+            <Skeleton key={i} variant="text" />
           ))}
       </Flex>
     </Flex>

components/Text/Text.stories.tsx

@@ -72,6 +72,7 @@ export const Transform: StoryFn<typeof TextForStory> = ({ ...args }) => (
     </TextForStory>
     {VARIANT_PARENTS.map((color) => (
       <Flex
+        key={color}
         direction="column"
         align="center"
         justify="center"
@@ -137,6 +138,7 @@ export const Size: StoryFn<typeof TextForStory> = ({ ...args }) => (
     </TextForStory>
     {SIZE_PARENTS.map((fontSize) => (
       <Flex
+        key={fontSize}
         css={{
           fontSize,
           border: '1px dashed $hiContrast',