chore: fix ts issues

.eslintrc

@@ -1,23 +1,40 @@
 {
-  "extends": ["@react-bootstrap", "4catalyzer-typescript", "prettier"],
-  "plugins": ["prettier"],
+  "extends": [
+    "@react-bootstrap",
+    "4catalyzer-typescript",
+    "prettier"
+  ],
+  "plugins": [
+    "prettier"
+  ],
   "rules": {
     "import/extensions": "off",
-    "prettier/prettier": "warn",
+    "prettier/prettier": "off",
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
-    "react/no-unknown-property": ["error", { "ignore": ["x-placement"] }],
+    "react/no-unknown-property": [
+      "error",
+      {
+        "ignore": [
+          "x-placement"
+        ]
+      }
+    ],
     "react/function-component-definition": "off"
   },
   "overrides": [
     {
-      "files": ["test/**/*"],
+      "files": [
+        "test/**/*"
+      ],
       "rules": {
         "@typescript-eslint/no-unused-expressions": "off"
       }
     },
     {
-      "files": ["www/**/*"],
+      "files": [
+        "www/**/*"
+      ],
       "rules": {
         "no-console": "off",
         "react/prop-types": "off",
@@ -29,10 +46,12 @@
       }
     },
     {
-      "files": ["www/docs/examples/**/*"],
+      "files": [
+        "www/docs/examples/**/*"
+      ],
       "rules": {
         "import/no-unresolved": "off"
       }
     }
   ]
-}
+}

package.json

@@ -39,9 +39,10 @@
     "build-docs": "yarn --cwd www build",
     "build-types": "yarn tsc -d --emitDeclarationOnly --outDir types",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "check-types": "tsc -p ./test/tsconfig.json --noEmit",
     "deploy-docs": "yarn --cwd www deploy",
     "format": "eslint --ext tsx --ext ts src --fix",
-    "lint": "eslint --ext tsx --ext ts src && tsc --noEmit",
+    "lint": "eslint --ext tsx --ext ts src && tsc --noEmit && yarn check-types",
     "prepublishOnly": "npm run build",
     "release": "rollout",
     "start": "yarn --cwd www start",
@@ -54,8 +55,7 @@
     "*.{js,ts,tsx}": "eslint --fix"
   },
   "prettier": {
-    "singleQuote": true,
-    "trailingComma": "all"
+    "singleQuote": true
   },
   "dependencies": {
     "@babel/runtime": "^7.22.5",
@@ -76,6 +76,7 @@
     "@4c/tsconfig": "^0.4.1",
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.5",
+    "@babel/eslint-parser": "^7.24.1",
     "@babel/preset-typescript": "^7.23.3",
     "@babel/register": "^7.22.15",
     "@react-bootstrap/babel-preset": "^2.2.0",
@@ -93,7 +94,6 @@
     "@types/warning": "^3.0.3",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
-    "@babel/eslint-parser": "^7.24.1",
     "babel-loader": "^9.1.3",
     "babel-plugin-istanbul": "^6.1.1",
     "chai": "^4.3.10",

src/Carousel.tsx

@@ -35,7 +35,7 @@ export interface CarouselRef {
 
 export interface CarouselProps
   extends BsPrefixProps,
-    Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+  Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
   slide?: boolean;
   fade?: boolean;
   controls?: boolean;
@@ -56,6 +56,7 @@ export interface CarouselProps
   nextIcon?: React.ReactNode;
   nextLabel?: React.ReactNode;
   variant?: CarouselVariant;
+  ref?: React.Ref<CarouselRef> | React.MutableRefObject<CarouselRef | undefined>
 }
 
 const SWIPE_THRESHOLD = 40;
@@ -588,9 +589,9 @@ const Carousel: BsPrefixRefForwardingComponent<'div', CarouselProps> =
                         child.props.className,
                         isActive && status !== 'entered' && orderClassName,
                         (status === 'entered' || status === 'exiting') &&
-                          'active',
+                        'active',
                         (status === 'entering' || status === 'exiting') &&
-                          directionalClassName,
+                        directionalClassName,
                       ),
                     })
                   }
@@ -629,7 +630,7 @@ const Carousel: BsPrefixRefForwardingComponent<'div', CarouselProps> =
         </Component>
       );
     },
-  );
+  ) as unknown as BsPrefixRefForwardingComponent<'div', CarouselProps>;
 
 Carousel.displayName = 'Carousel';
 Carousel.propTypes = propTypes;

test/AccordionButtonSpec.tsx

@@ -43,6 +43,6 @@ describe('<AccordionButton>', () => {
       </Accordion>,
     );
     fireEvent.click(getByTestId('btn'));
-    getByTestId('btn').getAttribute('aria-expanded').should.equal('true');
+    getByTestId('btn').getAttribute('aria-expanded')!.should.equal('true');
   });
 });

test/tsconfig.json

@@ -5,5 +5,5 @@
     "types": ["mocha", "chai", "sinon", "sinon-chai"],
     "rootDir": ".."
   },
-  "include": ["../src", "."]
+  "include": ["../src", ".", "../tests"]
 }

tests/simple-types-test.tsx

@@ -66,11 +66,7 @@ const RefTest = () => {
   carouselRef?.current?.prev();
   carouselRef?.current?.next();
 
-  return (
-    <>
-      <Carousel ref={carouselRef} />
-    </>
-  );
+  return <Carousel ref={carouselRef} />
 };
 
 class ClassComponent extends React.Component {
@@ -82,7 +78,7 @@ class ClassComponent extends React.Component {
 const FunctionComponent: React.FC = () => <div>abc</div>;
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
+const noop = () => { };
 
 const MegaComponent = () => (
   <>
@@ -320,7 +316,6 @@ const MegaComponent = () => (
       align="end"
       as="div"
       drop="up"
-      flip
       focusFirstItemOnShow="keyboard"
       navbar
       onSelect={noop}
@@ -684,7 +679,7 @@ const MegaComponent = () => (
       onKeyDown={noop}
       variant="pills"
       activeKey="1"
-      onSelect={(k: string) => {
+      onSelect={(k: string | null) => {
         // eslint-disable-next-line no-console
         console.log(k);
       }}
@@ -731,7 +726,6 @@ const MegaComponent = () => (
         drop="up"
         align="end"
         show
-        flip={false}
         onToggle={noop}
         onSelect={noop}
         focusFirstItemOnShow
@@ -874,7 +868,7 @@ const MegaComponent = () => (
       id="test-popover"
       body
       placement="auto"
-      popper={{}}
+      popper={{} as any}
       show
       bsPrefix="popover"
       style={style}
@@ -1008,11 +1002,12 @@ const MegaComponent = () => (
         type="checkbox"
         size="lg"
         style={style}
+        id="abc"
       >
         Radio 1 (pre-checked)
       </ToggleButton>
-      <ToggleButton value={2}>Radio 2</ToggleButton>
-      <ToggleButton value={3}>Radio 3</ToggleButton>
+      <ToggleButton id="abc" value={2}>Radio 2</ToggleButton>
+      <ToggleButton id="abc" value={3}>Radio 3</ToggleButton>
     </ToggleButtonGroup>
     <Stack direction="horizontal" gap={1} />
     <Stack