bug(ui) fix Select menu bottom placement (issue 67)

* switch from `flip` to `autoPlacement` positioning strategy in headless ui middleware

packages/ui-components/src/components/Select/Select.component.js

@@ -11,7 +11,7 @@ import { Icon } from "../Icon/Icon.component"
 import { Spinner } from "../Spinner/Spinner.component"
 import { FormHint } from "../FormHint/FormHint.component"
 import { Float } from "@headlessui-float/react"
-import { flip, offset, shift, size } from "@floating-ui/react-dom"
+import { autoPlacement, offset, shift, size } from "@floating-ui/react-dom"
 import { usePortalRef } from "../PortalProvider/index"
 import { createPortal } from "react-dom"
 import "./select.scss"
@@ -170,8 +170,14 @@ export const Select = ({
   // Headless-UI-Float Middleware
   const middleware = [
     offset(4),
-    shift(),
-    flip(),
+    autoPlacement((state) =>
+      // Uncomment to examine Headless-UI-Floating middleware:
+      // console.log(state),
+      ({
+        crossAxis: true,
+        allowedPlacements: ["bottom", "top"],
+      })
+    ),
     size({
       boundary: "viewport",
       apply({ availableWidth, availableHeight, elements }) {
@@ -182,6 +188,7 @@ export const Select = ({
         })
       },
     }),
+    shift(),
   ]
 
   // This function is used to determine what to render for the selected options in the Select Toggle in multi-select case.

packages/ui-components/src/components/Select/Select.stories.js

@@ -84,6 +84,13 @@ ControlledTemplate.propTypes = {
   children: PropTypes.node,
 }
 
+const BottomPositionTemplate = ({ parentStyles, children, ...args }) => (
+  <div style={parentStyles}>
+    Bottom Positioned Select
+    <Select {...args}>{children}</Select>
+  </div>
+)
+
 export const Default = {
   render: Template,
   args: {
@@ -535,3 +542,19 @@ export const MultiSelectWithOptionValuesAndLabels = {
     ],
   },
 }
+
+export const BottomPositionedSelect = {
+  render: BottomPositionTemplate,
+  args: {
+    parentStyles: {
+      position: "absolute",
+      bottom: "0",
+    },
+    children: [
+      <SelectOption key="1" value="Option 1" />,
+      <SelectOption key="2" value="Option 2" />,
+      <SelectOption key="3" value="Option 3" />,
+      <SelectOption key="4" value="Option 4" />,
+    ],
+  },
+}