fix: Gatsby webpack conflicts b/w e.g. 'useToggle.tsx' and 'useToggle…

….mdx'

src/ColorPicker/index.jsx

@@ -8,7 +8,7 @@ import Form from '../Form';
 import ModalPopup from '../Modal/ModalPopup';
 import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
-import useToggle from '../hooks/useToggle';
+import useToggle from '../hooks/useToggleHook';
 
 function ColorPicker({
   color, setColor, className, size,

src/DataTable/CollapsibleButtonGroup.jsx

@@ -2,7 +2,7 @@ import React, { useContext, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { MoreVert } from '../../icons';
-import useToggle from '../hooks/useToggle';
+import useToggle from '../hooks/useToggleHook';
 import useWindowSize from '../hooks/useWindowSize';
 import DataTableContext from './DataTableContext';
 import Icon from '../Icon';

src/Form/FormAutosuggest.jsx

@@ -12,7 +12,7 @@ import FormControl from './FormControl';
 import FormControlFeedback from './FormControlFeedback';
 import IconButton from '../IconButton';
 import Spinner from '../Spinner';
-import useArrowKeyNavigation from '../hooks/useArrowKeyNavigation';
+import useArrowKeyNavigation from '../hooks/useArrowKeyNavigationHook';
 import messages from './messages';
 
 const FormAutosuggest = forwardRef(

src/Menu/SelectMenu.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { ExpandMore } from '../../icons';
 import Button from '../Button';
 import ModalPopup from '../Modal/ModalPopup';
-import useToggle from '../hooks/useToggle';
+import useToggle from '../hooks/useToggleHook';
 import Menu from '.';
 import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
 

src/Menu/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import useArrowKeyNavigation from '../hooks/useArrowKeyNavigation';
+import useArrowKeyNavigation from '../hooks/useArrowKeyNavigationHook';
 
 function Menu({
   as,

src/Tabs/index.jsx

@@ -11,7 +11,7 @@ import BaseTabs from 'react-bootstrap/Tabs';
 import TabsDeprecated from './deprecated';
 import Bubble from '../Bubble';
 import Dropdown from '../Dropdown';
-import useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChild';
+import useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChildHook';
 import Tab from './Tab';
 
 export const MORE_TAB_TEXT = 'More...';

src/hooks/tests/useToggle.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { useToggle } from '../..';
-import { ToggleHandlers } from '../useToggle';
+import { ToggleHandlers } from '../useToggleHook';
 
 const TOGGLE_IS_ON = 'on';
 const TOGGLE_IS_OFF = 'off';

src/hooks/useArrowKeyNavigation.tsx → src/hooks/useArrowKeyNavigationHook.tsx

@@ -1,3 +1,7 @@
+// Note: this file was renamed from 'useArrowKeyNavigation.tsx' to 'useArrowKeyNavigationHook.tsx' to fix
+// some bugs in the Gatsby www site, where Webpack was getting the .tsx and .mdx
+// files confused. Renaming this file allows us to keep the URLs of the docs site
+// unchanged.
 import { useRef, useEffect } from 'react';
 
 interface HandleEnterArgs {

src/hooks/useIndexOfLastVisibleChild.tsx → src/hooks/useIndexOfLastVisibleChildHook.tsx

@@ -1,3 +1,7 @@
+// Note: this file was renamed from 'useIndexOfLastVisibleChild.tsx' to 'useIndexOfLastVisibleChildHook.tsx' to fix
+// some bugs in the Gatsby www site, where Webpack was getting the .tsx and .mdx
+// files confused. Renaming this file allows us to keep the URLs of the docs site
+// unchanged.
 import { useLayoutEffect, useState } from 'react';
 
 /**

src/hooks/useToggle.tsx → src/hooks/useToggleHook.tsx

@@ -1,3 +1,7 @@
+// Note: this file was renamed from 'useToggle.tsx' to 'useToggleHook.tsx' to fix
+// some bugs in the Gatsby www site, where Webpack was getting the .tsx and .mdx
+// files confused. Renaming this file allows us to keep the URLs of the docs site
+// unchanged.
 import { useState, useCallback } from 'react';
 
 export type Toggler = [

src/index.d.ts

@@ -41,9 +41,9 @@ export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
 export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSize';
-export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggle';
-export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigation';
-export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
+export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggleHook';
+export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigationHook';
+export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook';
 export { default as useIsVisible } from './hooks/useIsVisible';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //

src/index.js

@@ -41,9 +41,9 @@ export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
 export { default as useWindowSize } from './hooks/useWindowSize';
-export { default as useToggle } from './hooks/useToggle';
-export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigation';
-export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
+export { default as useToggle } from './hooks/useToggleHook';
+export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigationHook';
+export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook';
 export { default as useIsVisible } from './hooks/useIsVisible';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //

www/gatsby-config.mjs

@@ -42,7 +42,6 @@ const plugins = [
   },
   'gatsby-plugin-react-helmet',
   'gatsby-plugin-mdx-source-name',
-  'gatsby-plugin-typescript',
   {
     resolve: 'gatsby-plugin-manifest',
     options: {