Fix typescript and eslint errors

Author: Kubit

src/components/carousel/hooks/useCarousel.ts

@@ -401,7 +401,7 @@ export const useCarousel = ({
           carouselContent.style.left = `${left}px`;
         }
       } else {
-        let modifyExtraPadding = circular ? extraPadding ?? 0 : 0;
+        let modifyExtraPadding = circular ? (extraPadding ?? 0) : 0;
         if (!circular && extraPadding && index.current === numPagesState - 1) {
           modifyExtraPadding = extraPadding * 2;
         }

src/components/footer/components/footerContent.tsx

@@ -33,8 +33,8 @@ const MediaButtonStandaloneComponent = (
   } = props.twistedIcon ?? {};
 
   const ariaLabel = props.twisted
-    ? twistedIconAriaLabel ?? twistedIconAltText
-    : iconAriaLabel ?? iconAltText;
+    ? (twistedIconAriaLabel ?? twistedIconAltText)
+    : (iconAriaLabel ?? iconAltText);
 
   // When 'twisted' changes, We turn around the icon combined with the css property backface-visibility=hidden in the file icon.styled.ts
   const iconTwistAnimationTransformValue = props.twisted

src/components/mediaButton/mediaButtonStandAlone.tsx

@@ -35,7 +35,8 @@ const NavigationCardStandaloneComponent = (
   return (
     // Can not be spread -> styled component breaks
     <NavigationCardStyled
-      ref={ref as React.ForwardedRef<HTMLButtonElement>}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref={ref as any}
       aria-disabled={props['aria-disabled']}
       as={props.url ? props.component : 'button'}
       className={props.className}

src/components/navigationCard/navigationCardStandAlone.tsx

@@ -59,7 +59,7 @@ const OptionStandAlone = React.forwardRef(
         {...ariaProps}
         $stateStyles={stateStyles}
         $styles={props.styles}
-        as={props.url ? props.componentLink : props.as ?? OptionDivStyled}
+        as={props.url ? props.componentLink : (props.as ?? OptionDivStyled)}
         data-testid={props.dataTestId}
         role={props.role}
         tabIndex={props.tabIndex}

src/components/option/optionStandAlone.tsx

@@ -79,8 +79,8 @@ export const useContent = (props: IUseContent): IUseContentResponse => {
   const hasFooter = !!props.footer;
   const getExpandedAria = () =>
     showExpandedContent
-      ? props.value.accordionIconExpandedAriaLabel ?? props.accordionIconExpandedAriaLabel
-      : props.value.accordionIconCollapsedAriaLabel ?? props.accordionIconCollapsedAriaLabel;
+      ? (props.value.accordionIconExpandedAriaLabel ?? props.accordionIconExpandedAriaLabel)
+      : (props.value.accordionIconCollapsedAriaLabel ?? props.accordionIconCollapsedAriaLabel);
 
   const getValue = (headerValue: ITableHeader): string | JSX.Element | DividerContent => {
     if (headerValue.value) {

src/components/table/hooks/useContent.ts

@@ -492,7 +492,7 @@ export const mockCustomizableTable = {
             <div>{value.surname}</div>
           </div>
         ) : (
-          value.name.value ?? value.name
+          (value.name.value ?? value.name)
         ),
     },
     {

src/components/table/stories/mockTable.tsx

@@ -35,8 +35,8 @@ const ToggleThreePositionComponent = (
     position === POSITIONS.CENTER
       ? inputValues.centerInputValue
       : position === POSITIONS.RIGHT
-        ? inputValues.rightInputValue ?? props.onIcon?.altText
-        : inputValues.leftInputValue ?? props.offIcon?.altText;
+        ? (inputValues.rightInputValue ?? props.onIcon?.altText)
+        : (inputValues.leftInputValue ?? props.offIcon?.altText);
 
   const buildTextOrIcon = (position: POSITIONS) => {
     return (
@@ -153,7 +153,7 @@ const ToggleThreePositionComponent = (
       hasThreePositions={props.hasThreePositions}
       id={props.id}
       styles={props.styles}
-      tabIndex={!props.disabled ? props.tabIndex ?? 0 : undefined}
+      tabIndex={!props.disabled ? (props.tabIndex ?? 0) : undefined}
       togglePosition={props.togglePosition}
       onKeyDown={e => {
         e.persist();

src/components/toggle/components/toggleThreePosition.tsx

@@ -55,7 +55,7 @@ const ToggleTwoPositionComponent = (
       id={props.id}
       role={ROLES.SWITCH}
       styles={props.styles}
-      tabIndex={!props.disabled ? props.tabIndex ?? 0 : undefined}
+      tabIndex={!props.disabled ? (props.tabIndex ?? 0) : undefined}
       togglePosition={props.togglePosition}
       onClick={e => {
         e.persist();

src/components/toggle/components/toggleTwoPositions.tsx

@@ -27,7 +27,7 @@ export const detectOverflow = (
   const clippingClientRect = rectToClientRect(
     getClippingRect({
       element:
-        isElement(element) ?? true
+        (isElement(element) ?? true)
           ? (element as Element)
           : (element as VirtualElement).contextElement || window.document.documentElement,
       boundary,