Drop support for BS4

Author: ericgio

.storybook/preview-head.html

@@ -1,11 +1,5 @@
-<!-- <link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-  integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
-  crossorigin="anonymous" /> -->
-
 <link
-  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
   rel="stylesheet"
-  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+  integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
   crossorigin="anonymous" />

.storybook/preview.js

@@ -1,5 +1,4 @@
 import '../styles/Typeahead.scss';
-import '../styles/Typeahead.bs5.scss';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

README.md

@@ -25,8 +25,7 @@ yarn add react-bootstrap-typeahead
 Include the module in your project:
 
 ```jsx
-import { Typeahead } from 'react-bootstrap-typeahead'; // ES2015
-var Typeahead = require('react-bootstrap-typeahead').Typeahead; // CommonJS
+import { Typeahead } from 'react-bootstrap-typeahead';
 ```
 
 #### UMD Build
@@ -62,9 +61,6 @@ or
 />
 ```
 
-### Bootstrap 5
-In an effort to support Bootstrap 5, this package also contains a CSS file named `Typeahead.bs5.css` that should be included alongside the base CSS file above.
-
 ## Examples
 
 Try the [live examples](http://ericgio.github.io/react-bootstrap-typeahead/), which also include code samples. If you'd like to modify the examples, clone the repository and run `npm install` and `npm start` to build the example file. You can then open the HTML file locally in your browser.

docs/Upgrading.md

@@ -17,6 +17,9 @@ The following HOCs were deprecated in a previous version and have been removed:
 - `withItem` (use `useItem`)
 - `withToken` (use `useToken`)
 
+### Drop support for Bootstrap 4
+Bootstrap 5 is now over 3 years old. BS4 should still mostly work, but you may need to add some custom CSS in a few cases.
+
 ## v6.0 Breaking Changes
 
 ### `"small"` and `"large"` are no longer valid `size` values

example/src/index.tsx

@@ -12,7 +12,6 @@ import PublicMethodsSection from './sections/PublicMethodsSection';
 import RenderingSection from './sections/RenderingSection';
 
 import '../../styles/Typeahead.scss';
-import '../../styles/Typeahead.bs5.scss';
 
 const container = document.getElementById('root');
 const root = createRoot(container!);

src/components/ClearButton/ClearButton.stories.tsx

@@ -19,3 +19,8 @@ export const Large = Template.bind({});
 Large.args = {
   size: 'lg',
 };
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'sm',
+};

src/components/ClearButton/ClearButton.tsx

@@ -22,8 +22,6 @@ export interface ClearButtonProps
 
 /**
  * ClearButton
- *
- * http://getbootstrap.com/css/#helper-classes-close
  */
 const ClearButton = ({
   className,

src/components/ClearButton/__snapshots__/ClearButton.test.tsx.snap

@@ -39,3 +39,23 @@ exports[`<ClearButton> Large story renders snapshot 1`] = `
   </span>
 </button>
 `;
+
+exports[`<ClearButton> Small story renders snapshot 1`] = `
+<button
+  aria-label="Clear"
+  class="close btn-close rbt-close rbt-close-sm"
+  type="button"
+>
+  <span
+    aria-hidden="true"
+    class="rbt-close-content"
+  >
+    ×
+  </span>
+  <span
+    class="sr-only visually-hidden"
+  >
+    Clear
+  </span>
+</button>
+`;

styles/Typeahead.bs5.scss

@@ -114,11 +114,20 @@ $rbt-placeholder-color: #6c757d !default;
  * Close Button
  */
 .rbt-close {
+  font-size: 1rem;
   z-index: 1;
 
+  &-sm {
+    font-size: 0.75rem;
+  }
+
   &-lg {
     font-size: 1.5rem;
   }
+
+  &-content {
+    display: none;
+  }
 }
 
 /**
@@ -205,14 +214,13 @@ $rbt-token-active-color: $rbt-color-white !default;
   position: absolute;
   right: 0;
   top: 0;
-  width: 2rem;
+  width: 2.5rem;
 
   &-lg {
     width: 3rem;
   }
 
   & .rbt-close {
-    margin-top: -0.25rem;
     pointer-events: auto; /* Override pointer-events: none; above */
   }
 }
@@ -258,3 +266,25 @@ $rbt-token-active-color: $rbt-color-white !default;
     border-bottom-right-radius: 0;
   }
 }
+
+.rbt .form-floating {
+  flex: 1;
+}
+
+.form-floating > .rbt-input-multi {
+  &:not(:placeholder-shown) ~ label {
+    opacity: inherit;
+    transform: inherit;
+  }
+
+  // Hide the placeholder
+  .rbt-input-main::placeholder {
+    color: transparent;
+  }
+
+  // Shrink the label when multi-selector is focused or there are selections.
+  &.focus ~ label {
+    opacity: 0.65;
+    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+  }
+}