Merge pull request #18 from csandman/csandman/fix-menu-placement

Csandman/fix menu placement

.eslintrc

@@ -31,7 +31,7 @@
     "react/jsx-filename-extension": [
       "error",
       {
-        "extensions": [".ts", ".tsx"]
+        "extensions": [".js", ".tsx"]
       }
     ]
   }

README.md

@@ -4,7 +4,7 @@
 [![npm - chakra-react-select](https://img.shields.io/npm/v/chakra-react-select "chakra-react-select npm")](https://www.npmjs.com/package/chakra-react-select)
 [![bundle size - chakra-react-select](https://badgen.net/bundlephobia/min/chakra-react-select "chakra-react-select bundlephobia")](https://bundlephobia.com/result?p=chakra-react-select)
 [![bundle size - chakra-react-select](https://badgen.net/bundlephobia/minzip/chakra-react-select "chakra-react-select bundlephobia")](https://bundlephobia.com/result?p=chakra-react-select)
-[![Total Downloads - chakra-react-select](https://badgen.net/npm/dt/chakra-react-select?color=blue "chakra-react-select npm downloads")](https://bundlephobia.com/result?p=chakra-react-select)
+[![Total Downloads - chakra-react-select](https://badgen.net/npm/dt/chakra-react-select?color=blue "chakra-react-select npm downloads")](https://www.npmjs.com/package/chakra-react-select)
 
 This component is a wrapper for the popular react component [react-select](https://react-select.com/home) made using the UI library [Chakra UI](https://chakra-ui.com/).
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chakra-react-select",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "A chakra-ui wrapper for the popular select library react-select",
   "license": "MIT",
   "author": "Chris Sandvik <chris.sandvik@gmail.com>",

src/chakra-react-select.tsx

@@ -240,7 +240,15 @@ const chakraComponents: ChakraSelectProps["components"] = {
     return <Spinner mr={3} {...innerProps} size={spinnerSize} />;
   },
   // Menu components
-  Menu: ({ children, innerProps, selectProps: { size } }) => {
+  Menu: ({
+    children,
+    innerProps,
+    innerRef,
+    // @ts-ignore `placement` is not recognized as a prop but it's essential
+    // for the menu placement (and it is passed)
+    placement,
+    selectProps: { size },
+  }) => {
     const menuStyles = useMultiStyleConfig("Menu", {});
 
     const chakraTheme = useTheme();
@@ -252,9 +260,11 @@ const chakraComponents: ChakraSelectProps["components"] = {
 
     return (
       <Box
+        ref={innerRef}
         sx={{
           position: "absolute",
-          top: "100%",
+          ...(placement === "bottom" && { top: "100%" }),
+          ...(placement === "top" && { bottom: "100%" }),
           my: "8px",
           w: "100%",
           zIndex: 1,

src/types.ts

@@ -1,9 +1,9 @@
 import { Props, ThemeSpacing } from "react-select";
 import { CSSWithMultiValues } from "@chakra-ui/react";
 
-export { Theme } from "react-select";
+export type { Theme } from "react-select";
 
-export { RecursiveCSSObject } from "@chakra-ui/react";
+export type { RecursiveCSSObject } from "@chakra-ui/react";
 
 export type Size = "sm" | "md" | "lg";