add 'height: 100%;' and 'align-items: center;' style to 'IndicatorIcon' div - expands size of active icon element for easier user manipulation; added new property menuPosition (typeof 'top' | 'auto' | 'bottom'). Determines where menu will be placed in relation to the control - 'auto' will first check if menu has space to open below the control, otherwise it will open above the control. Defaults to 'bottom', which essentially keeps current functionality intact; bump some dev dependencies; rebuild storybook files

Author: based-ghost

.storybook/config/reactToastifyCss.js

@@ -102,20 +102,24 @@ export default css`
 
     .Toastify__close-button {
       color: #fff;
-      font-weight: 700;
-      font-size: 1rem;
       background: transparent;
       outline: none;
       border: none;
       padding: 0;
       cursor: pointer;
       opacity: 0.7;
-      transition: color 0.3s ease, opacity 0.3s ease;
+      transition: 0.3s ease;
       align-self: flex-start;
       &--default {
         color: #000;
         opacity: 0.3;
       }
+      & > svg {
+        fill: currentColor;
+        height: 16px;
+        width: 14px;
+        font-weight: 700;
+      }
       &:hover,
       &:focus {
         opacity: 1;

.storybook/preview.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { toast } from 'react-toastify';
 import { addParameters } from '@storybook/react';
-import { toast, ToastPosition } from 'react-toastify';
 import { polyfillBrowserMS, GlobalStyle } from './config';
 
 // Polyfill IE and Edge browsers
@@ -34,7 +34,7 @@ const completeSetupDOM = () => {
     autoClose: 2500,
     draggable: false,
     newestOnTop: true,
-    position: ToastPosition.TOP_RIGHT,
+    position: 'top-right'
   });
 
   if (globalStyleEl) {

README.md

@@ -150,6 +150,7 @@ All properties are technically optional (with a few having default values). Very
 |`scrollMenuIntoView`| bool | `true` | Performs animated scroll to show menu in view when menu is opened (if there is room to do so)
 |`backspaceClearsValue`| bool | `true` | Remove the currently focused option when the user presses backspace
 |`filterMatchFrom`| 'any' OR 'start' | `'any'` | Position in stringified option to match search input
+|`menuPosition`| 'top' OR 'auto' OR 'bottom' | `'bottom'` | Determines where menu will be placed in relation to the control - `'auto'` will first check if menu has space to open below the control, otherwise it will open above the control.
 |`filterIgnoreCase`| bool | `true` | Search input ignores case of characters when comparing
 |`filterIgnoreAccents`| bool | `false` | Search input will strip diacritics from string before comparing
 |`onMenuOpen`| (...args: any[]): void | `undefined` | Callback function executed after the menu is opened

__tests__/Menu.test.tsx

@@ -30,9 +30,9 @@ const createMenuProps = (menuOptions = []): MenuProps => {
     width: '100%',
     renderOptionLabel,
     focusedOptionIndex,
+    height: MENU_MAX_HEIGHT_DEFAULT,
     loadingMsg: LOADING_MSG_DEFAULT,
     itemSize: MENU_ITEM_SIZE_DEFAULT,
-    maxHeight: MENU_MAX_HEIGHT_DEFAULT,
     noOptionsMsg: NO_OPTIONS_MSG_DEFAULT
   };
 };

docs/8.b6fb2797418f51894f9f.bundle.js.map

@@ -1,41 +1,41 @@
 {
   "files": {
-    "main~24120820.js": "./main~24120820.b6fb2797418f51894f9f.bundle.js",
-    "main~24120820.js.map": "./main~24120820.b6fb2797418f51894f9f.bundle.js.map",
-    "runtime~main.js": "./runtime~main.b6fb2797418f51894f9f.bundle.js",
-    "runtime~main.js.map": "./runtime~main.b6fb2797418f51894f9f.bundle.js.map",
-    "vendors~main~1f20a385.js": "./vendors~main~1f20a385.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~1f20a385.js.map": "./vendors~main~1f20a385.b6fb2797418f51894f9f.bundle.js.map",
-    "vendors~main~253ae210.js": "./vendors~main~253ae210.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~253ae210.js.map": "./vendors~main~253ae210.b6fb2797418f51894f9f.bundle.js.map",
-    "vendors~main~678f84af.js": "./vendors~main~678f84af.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~678f84af.js.map": "./vendors~main~678f84af.b6fb2797418f51894f9f.bundle.js.map",
-    "vendors~main~d939e436.js": "./vendors~main~d939e436.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~d939e436.js.map": "./vendors~main~d939e436.b6fb2797418f51894f9f.bundle.js.map",
-    "vendors~main~db300d2f.js": "./vendors~main~db300d2f.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~db300d2f.js.map": "./vendors~main~db300d2f.b6fb2797418f51894f9f.bundle.js.map",
-    "vendors~main~ec8c427e.js": "./vendors~main~ec8c427e.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~ec8c427e.js.map": "./vendors~main~ec8c427e.b6fb2797418f51894f9f.bundle.js.map",
-    "8.b6fb2797418f51894f9f.bundle.js": "./8.b6fb2797418f51894f9f.bundle.js",
-    "8.b6fb2797418f51894f9f.bundle.js.map": "./8.b6fb2797418f51894f9f.bundle.js.map",
+    "main~24120820.js": "./main~24120820.ed9c8847484ee859d3c8.bundle.js",
+    "main~24120820.js.map": "./main~24120820.ed9c8847484ee859d3c8.bundle.js.map",
+    "runtime~main.js": "./runtime~main.ed9c8847484ee859d3c8.bundle.js",
+    "runtime~main.js.map": "./runtime~main.ed9c8847484ee859d3c8.bundle.js.map",
+    "vendors~main~1f20a385.js": "./vendors~main~1f20a385.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~1f20a385.js.map": "./vendors~main~1f20a385.ed9c8847484ee859d3c8.bundle.js.map",
+    "vendors~main~253ae210.js": "./vendors~main~253ae210.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~253ae210.js.map": "./vendors~main~253ae210.ed9c8847484ee859d3c8.bundle.js.map",
+    "vendors~main~678f84af.js": "./vendors~main~678f84af.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~678f84af.js.map": "./vendors~main~678f84af.ed9c8847484ee859d3c8.bundle.js.map",
+    "vendors~main~d939e436.js": "./vendors~main~d939e436.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~d939e436.js.map": "./vendors~main~d939e436.ed9c8847484ee859d3c8.bundle.js.map",
+    "vendors~main~db300d2f.js": "./vendors~main~db300d2f.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~db300d2f.js.map": "./vendors~main~db300d2f.ed9c8847484ee859d3c8.bundle.js.map",
+    "vendors~main~ec8c427e.js": "./vendors~main~ec8c427e.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~ec8c427e.js.map": "./vendors~main~ec8c427e.ed9c8847484ee859d3c8.bundle.js.map",
+    "8.ed9c8847484ee859d3c8.bundle.js": "./8.ed9c8847484ee859d3c8.bundle.js",
+    "8.ed9c8847484ee859d3c8.bundle.js.map": "./8.ed9c8847484ee859d3c8.bundle.js.map",
     "iframe.html": "./iframe.html",
-    "precache-manifest.110fb9d4f264103e9eeaefc4a77056dd.js": "./precache-manifest.110fb9d4f264103e9eeaefc4a77056dd.js",
+    "precache-manifest.49a1aed0c2f4f97c285ae38fb46d43bf.js": "./precache-manifest.49a1aed0c2f4f97c285ae38fb46d43bf.js",
     "service-worker.js": "./service-worker.js",
     "static/media/react-logo.svg": "./static/media/react-logo.9f16557d.svg",
-    "vendors~main~1f20a385.b6fb2797418f51894f9f.bundle.js.LICENSE.txt": "./vendors~main~1f20a385.b6fb2797418f51894f9f.bundle.js.LICENSE.txt",
-    "vendors~main~253ae210.b6fb2797418f51894f9f.bundle.js.LICENSE.txt": "./vendors~main~253ae210.b6fb2797418f51894f9f.bundle.js.LICENSE.txt",
-    "vendors~main~678f84af.b6fb2797418f51894f9f.bundle.js.LICENSE.txt": "./vendors~main~678f84af.b6fb2797418f51894f9f.bundle.js.LICENSE.txt",
-    "vendors~main~db300d2f.b6fb2797418f51894f9f.bundle.js.LICENSE.txt": "./vendors~main~db300d2f.b6fb2797418f51894f9f.bundle.js.LICENSE.txt",
-    "vendors~main~ec8c427e.b6fb2797418f51894f9f.bundle.js.LICENSE.txt": "./vendors~main~ec8c427e.b6fb2797418f51894f9f.bundle.js.LICENSE.txt"
+    "vendors~main~1f20a385.ed9c8847484ee859d3c8.bundle.js.LICENSE.txt": "./vendors~main~1f20a385.ed9c8847484ee859d3c8.bundle.js.LICENSE.txt",
+    "vendors~main~253ae210.ed9c8847484ee859d3c8.bundle.js.LICENSE.txt": "./vendors~main~253ae210.ed9c8847484ee859d3c8.bundle.js.LICENSE.txt",
+    "vendors~main~678f84af.ed9c8847484ee859d3c8.bundle.js.LICENSE.txt": "./vendors~main~678f84af.ed9c8847484ee859d3c8.bundle.js.LICENSE.txt",
+    "vendors~main~db300d2f.ed9c8847484ee859d3c8.bundle.js.LICENSE.txt": "./vendors~main~db300d2f.ed9c8847484ee859d3c8.bundle.js.LICENSE.txt",
+    "vendors~main~ec8c427e.ed9c8847484ee859d3c8.bundle.js.LICENSE.txt": "./vendors~main~ec8c427e.ed9c8847484ee859d3c8.bundle.js.LICENSE.txt"
   },
   "entrypoints": [
-    "runtime~main.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~253ae210.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~d939e436.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~db300d2f.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~1f20a385.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~678f84af.b6fb2797418f51894f9f.bundle.js",
-    "vendors~main~ec8c427e.b6fb2797418f51894f9f.bundle.js",
-    "main~24120820.b6fb2797418f51894f9f.bundle.js"
+    "runtime~main.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~253ae210.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~d939e436.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~db300d2f.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~1f20a385.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~678f84af.ed9c8847484ee859d3c8.bundle.js",
+    "vendors~main~ec8c427e.ed9c8847484ee859d3c8.bundle.js",
+    "main~24120820.ed9c8847484ee859d3c8.bundle.js"
   ]
 }

docs/8.b6fb2797418f51894f9f.bundle.js docs/8.ed9c8847484ee859d3c8.bundle.jsdocs/8.b6fb2797418f51894f9f.bundle.js renamed to docs/8.ed9c8847484ee859d3c8.bundle.js

@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.b6fb2797418f51894f9f.bundle.js"></script><script src="vendors~main~253ae210.b6fb2797418f51894f9f.bundle.js"></script><script src="vendors~main~d939e436.b6fb2797418f51894f9f.bundle.js"></script><script src="vendors~main~db300d2f.b6fb2797418f51894f9f.bundle.js"></script><script src="vendors~main~1f20a385.b6fb2797418f51894f9f.bundle.js"></script><script src="vendors~main~678f84af.b6fb2797418f51894f9f.bundle.js"></script><script src="vendors~main~ec8c427e.b6fb2797418f51894f9f.bundle.js"></script><script src="main~24120820.b6fb2797418f51894f9f.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.ed9c8847484ee859d3c8.bundle.js"></script><script src="vendors~main~253ae210.ed9c8847484ee859d3c8.bundle.js"></script><script src="vendors~main~d939e436.ed9c8847484ee859d3c8.bundle.js"></script><script src="vendors~main~db300d2f.ed9c8847484ee859d3c8.bundle.js"></script><script src="vendors~main~1f20a385.ed9c8847484ee859d3c8.bundle.js"></script><script src="vendors~main~678f84af.ed9c8847484ee859d3c8.bundle.js"></script><script src="vendors~main~ec8c427e.ed9c8847484ee859d3c8.bundle.js"></script><script src="main~24120820.ed9c8847484ee859d3c8.bundle.js"></script></body></html>

docs/8.ed9c8847484ee859d3c8.bundle.js.map

@@ -74,4 +74,4 @@
   }</style><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.015293d2bd2970586a57.bundle.js"></script><script src="vendors~main.d1e6a754a7cfd25b2088.bundle.js"></script><script src="main.b8c72c42851a138bf38c.bundle.js"></script></body></html>
+      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.015293d2bd2970586a57.bundle.js"></script><script src="vendors~main.d1e6a754a7cfd25b2088.bundle.js"></script><script src="main.409c007b3bff3c47005e.bundle.js"></script></body></html>