chore: bump toolchain & fix lint

packages/frontend/component/src/ui/avatar/avatar.tsx

@@ -61,6 +61,11 @@ export type AvatarProps = {
   removeButtonProps?: HTMLAttributes<HTMLButtonElement>;
 } & HTMLAttributes<HTMLSpanElement>;
 
+const EMPTY_STYLE: CSSProperties = {};
+const EMPTY_FALLBACK_PROPS: AvatarFallbackProps = {};
+const EMPTY_HOVER_WRAPPER_PROPS: HTMLAttributes<HTMLDivElement> = {};
+const EMPTY_REMOVE_BUTTON_PROPS: HTMLAttributes<HTMLButtonElement> = {};
+
 function drawImageFit(
   img: ImageBitmap,
   ctx: CanvasRenderingContext2D,
@@ -88,32 +93,32 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
   (
     {
       size = 20,
-      style: propsStyles = {},
+      style: propsStyles = EMPTY_STYLE,
       url,
       image,
       name,
       className,
       colorfulFallback = false,
       hoverIcon,
-      fallbackProps: { className: fallbackClassName, ...fallbackProps } = {},
+      fallbackProps = EMPTY_FALLBACK_PROPS,
       imageProps,
       avatarProps,
       rounded = '50%',
       onRemove,
-      hoverWrapperProps: {
-        className: hoverWrapperClassName,
-        ...hoverWrapperProps
-      } = {},
+      hoverWrapperProps = EMPTY_HOVER_WRAPPER_PROPS,
       avatarTooltipOptions,
       removeTooltipOptions,
-      removeButtonProps: {
-        className: removeButtonClassName,
-        ...removeButtonProps
-      } = {},
+      removeButtonProps = EMPTY_REMOVE_BUTTON_PROPS,
       ...props
     },
     ref
   ) => {
+    const { className: fallbackClassName, ...otherFallbackProps } =
+      fallbackProps;
+    const { className: hoverWrapperClassName, ...otherHoverWrapperProps } =
+      hoverWrapperProps;
+    const { className: removeButtonClassName, ...otherRemoveButtonProps } =
+      removeButtonProps;
     const firstCharOfName = useMemo(() => {
       return name?.slice(0, 1);
     }, [name]);
@@ -180,7 +185,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
                 <AvatarFallback
                   className={clsx(style.avatarFallback, fallbackClassName)}
                   delayMs={url ? 600 : undefined}
-                  {...fallbackProps}
+                  {...otherFallbackProps}
                 >
                   {colorfulFallback ? (
                     <ColorfulFallback char={firstCharOfName} />
@@ -196,7 +201,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
                     fallbackClassName
                   )}
                   delayMs={url ? 600 : undefined}
-                  {...fallbackProps}
+                  {...otherFallbackProps}
                 >
                   <DefaultFallbackSvg />
                 </AvatarFallback>
@@ -204,7 +209,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
             {hoverIcon ? (
               <div
                 className={clsx(style.hoverWrapper, hoverWrapperClassName)}
-                {...hoverWrapperProps}
+                {...otherHoverWrapperProps}
               >
                 {hoverIcon}
               </div>
@@ -223,7 +228,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
             className={clsx(style.removeButton, removeButtonClassName)}
             onClick={onRemove}
             ref={setRemoveButtonDom}
-            {...removeButtonProps}
+            {...otherRemoveButtonProps}
           >
             <CloseIcon />
           </IconButton>

packages/frontend/component/src/ui/input/input.tsx

@@ -27,6 +27,8 @@ export type InputProps = {
   onEnter?: (value: string) => void;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'onBlur'>;
 
+const EMPTY_STYLE: CSSProperties = {};
+
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   {
     disabled,
@@ -34,8 +36,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     noBorder = false,
     className,
     status = 'default',
-    style = {},
-    inputStyle = {},
+    style = EMPTY_STYLE,
+    inputStyle = EMPTY_STYLE,
     size = 'default',
     preFix,
     endFix,

packages/frontend/component/src/ui/input/row-input.tsx

@@ -25,6 +25,8 @@ export type RowInputProps = {
   debounce?: number;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'onBlur'>;
 
+const EMPTY_STYLE: CSSProperties = {};
+
 // RowInput component that is used in the selector layout for search input
 // handles composition events and enter key press
 export const RowInput = forwardRef<HTMLInputElement, RowInputProps>(
@@ -33,7 +35,7 @@ export const RowInput = forwardRef<HTMLInputElement, RowInputProps>(
       disabled,
       onChange: propsOnChange,
       className,
-      style = {},
+      style = EMPTY_STYLE,
       onEnter,
       onKeyDown,
       onBlur,

packages/frontend/component/src/ui/menu/desktop/root.tsx

@@ -11,26 +11,26 @@ const MenuContextValue = {
   type: 'dropdown-menu',
 } as const;
 
+const EMPTY_ROOT_OPTIONS: NonNullable<MenuProps['rootOptions']> = {};
+const EMPTY_CONTENT_OPTIONS: NonNullable<MenuProps['contentOptions']> = {};
+const EMPTY_CONTENT_STYLE: React.CSSProperties = {};
+
 export const DesktopMenu = ({
   children,
   items,
   noPortal,
   portalOptions,
-  rootOptions: {
-    defaultOpen,
-    modal,
-    open,
-    onOpenChange,
-    onClose,
-    ...rootOptions
-  } = {},
-  contentOptions: {
-    className = '',
-    style: contentStyle = {},
-    ...otherContentOptions
-  } = {},
+  rootOptions: rawRootOptions,
+  contentOptions: rawContentOptions,
   ref,
 }: MenuProps) => {
+  const { defaultOpen, modal, open, onOpenChange, onClose, ...rootOptions } =
+    rawRootOptions ?? EMPTY_ROOT_OPTIONS;
+  const {
+    className = '',
+    style: contentStyle = EMPTY_CONTENT_STYLE,
+    ...otherContentOptions
+  } = rawContentOptions ?? EMPTY_CONTENT_OPTIONS;
   const [innerOpen, setInnerOpen] = useState(defaultOpen);
   const finalOpen = open ?? innerOpen;
 

packages/frontend/component/src/ui/menu/desktop/sub.tsx

@@ -9,18 +9,25 @@ import * as styles from '../styles.css';
 import { useMenuItem } from '../use-menu-item';
 import { DesktopMenuContext } from './context';
 
+const EMPTY_SUB_OPTIONS: NonNullable<MenuSubProps['subOptions']> = {};
+const EMPTY_SUB_CONTENT_OPTIONS: NonNullable<
+  MenuSubProps['subContentOptions']
+> = {};
+
 export const DesktopMenuSub = ({
   children: propsChildren,
   items,
   portalOptions,
-  subOptions: { defaultOpen, ...otherSubOptions } = {},
+  subOptions,
   triggerOptions,
-  subContentOptions: {
+  subContentOptions,
+}: MenuSubProps) => {
+  const { defaultOpen, ...otherSubOptions } = subOptions ?? EMPTY_SUB_OPTIONS;
+  const {
     className: subContentClassName = '',
     style: contentStyle,
     ...otherSubContentOptions
-  } = {},
-}: MenuSubProps) => {
+  } = subContentOptions ?? EMPTY_SUB_CONTENT_OPTIONS;
   const { type } = useContext(DesktopMenuContext);
   const { className, children, otherProps } = useMenuItem({
     children: propsChildren,

packages/frontend/component/src/ui/menu/mobile/root.tsx

@@ -24,11 +24,18 @@ import {
 import * as styles from './styles.css';
 import { MobileMenuSubRaw } from './sub';
 
+const EMPTY_CONTENT_OPTIONS: NonNullable<MenuProps['contentOptions']> = {};
+
 export const MobileMenu = ({
   children,
   items,
   title,
-  contentOptions: {
+  contentOptions,
+  contentWrapperStyle,
+  rootOptions,
+  ref,
+}: MenuProps) => {
+  const {
     className,
     onPointerDownOutside,
     onInteractOutside,
@@ -38,11 +45,7 @@ export const MobileMenu = ({
     align: _align,
 
     ...otherContentOptions
-  } = {},
-  contentWrapperStyle,
-  rootOptions,
-  ref,
-}: MenuProps) => {
+  } = contentOptions ?? EMPTY_CONTENT_OPTIONS;
   const [subMenus, setSubMenus] = useState<SubMenuContent[]>([]);
   const [open, setOpen] = useState(false);
   const mobileContextValue = useMemo(

packages/frontend/component/src/ui/menu/mobile/sub.tsx

@@ -6,13 +6,18 @@ import type { MenuSubProps } from '../menu.types';
 import { useMenuItem } from '../use-menu-item';
 import { useMobileSubMenuHelper } from './context';
 
+const EMPTY_SUB_CONTENT_OPTIONS: NonNullable<
+  MenuSubProps['subContentOptions']
+> = {};
+
 export const MobileMenuSub = ({
   title,
   children: propsChildren,
   items,
   triggerOptions,
-  subContentOptions: contentOptions = {},
+  subContentOptions,
 }: MenuSubProps & { title?: string }) => {
+  const contentOptions = subContentOptions ?? EMPTY_SUB_CONTENT_OPTIONS;
   const {
     className,
     children,
@@ -43,11 +48,12 @@ export const MobileMenuSubRaw = ({
   children,
   items,
   subOptions,
-  subContentOptions: contentOptions = {},
+  subContentOptions,
 }: MenuSubProps & {
   onClick?: (e: MouseEvent<HTMLDivElement>) => void;
   title?: string;
 }) => {
+  const contentOptions = subContentOptions ?? EMPTY_SUB_CONTENT_OPTIONS;
   const id = useId();
   const { addSubMenu } = useMobileSubMenuHelper();
 

packages/frontend/component/src/ui/popover/popover.tsx

@@ -15,17 +15,21 @@ export interface PopoverProps extends PopoverPrimitiveProps {
   portalOptions?: PopoverPortalProps;
   contentOptions?: PopoverContentProps;
 }
+
+const EMPTY_CONTENT_OPTIONS: NonNullable<PopoverProps['contentOptions']> = {};
+
 export const Popover = ({
   content,
   children,
   portalOptions,
-  contentOptions: {
+  contentOptions,
+  ...props
+}: PopoverProps) => {
+  const {
     className: contentClassName,
     style: contentStyle,
     ...otherContentOptions
-  } = {},
-  ...props
-}: PopoverProps) => {
+  } = contentOptions ?? EMPTY_CONTENT_OPTIONS;
   return (
     <PopoverPrimitive.Root {...props}>
       <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>