@khanacademy/wonder-blocks-dropdown 2.4.2 → 2.4.3

package/dist/es/index.js

@@ -1420,6 +1420,7 @@ class DropdownCore extends Component {
           }
         },
         referenceElement: this.props.openerElement,
+        strategy: "fixed",
         placement: alignment === "left" ? "bottom-start" : "bottom-end",
         modifiers: [{
           name: "preventOverflow",
@@ -1428,7 +1429,10 @@ class DropdownCore extends Component {
             // Allows to overlap the popper in case there's
             // no more vertical room in the viewport.
             altAxis: true,
-            mainAxis: true
+            // Also needed to make sure the Popper will be
+            // displayed correctly in different contexts
+            // (e.g inside a Modal)
+            tether: false
           }
         }]
       }, ({

package/dist/index.js

@@ -1414,6 +1414,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           }
         },
         referenceElement: this.props.openerElement,
+        strategy: "fixed",
         placement: alignment === "left" ? "bottom-start" : "bottom-end",
         modifiers: [{
           name: "preventOverflow",
@@ -1422,7 +1423,10 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
             // Allows to overlap the popper in case there's
             // no more vertical room in the viewport.
             altAxis: true,
-            mainAxis: true
+            // Also needed to make sure the Popper will be
+            // displayed correctly in different contexts
+            // (e.g inside a Modal)
+            tether: false
           }
         }]
       }, ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -41,5 +41,5 @@
   "devDependencies": {
     "wb-dev-build-settings": "^0.1.2"
   },
-  "gitHead": "9a9cc04bf2bbfb425f991a347b4f8b0d0d56e120"
+  "gitHead": "2a21f4ec19e5611fe716237c21f45c9164b65710"
 }

package/src/components/dropdown-core.js

@@ -691,6 +691,7 @@ class DropdownCore extends React.Component<Props, State> {
                         }
                     }}
                     referenceElement={this.props.openerElement}
+                    strategy="fixed"
                     placement={
                         alignment === "left" ? "bottom-start" : "bottom-end"
                     }
@@ -702,7 +703,10 @@ class DropdownCore extends React.Component<Props, State> {
                                 // Allows to overlap the popper in case there's
                                 // no more vertical room in the viewport.
                                 altAxis: true,
-                                mainAxis: true,
+                                // Also needed to make sure the Popper will be
+                                // displayed correctly in different contexts
+                                // (e.g inside a Modal)
+                                tether: false,
                             },
                         },
                     ]}

package/src/components/single-select.stories.js

@@ -2,8 +2,13 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
+import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {Body} from "@khanacademy/wonder-blocks-typography";
 
 import type {StoryComponentType} from "@storybook/react";
 
@@ -94,6 +99,9 @@ const styles = StyleSheet.create({
         justifyContent: "center",
         height: `calc(100vh - 16px)`,
     },
+    scrollableArea: {
+        height: "200vh",
+    },
 });
 
 export const WithFilter: StoryComponentType = () => <SingleSelectWithFilter />;
@@ -111,13 +119,21 @@ export const WithFilterOpened: StoryComponentType = () => (
     <SingleSelectWithFilter opened={true} />
 );
 
-export const DropdownOverlap: StoryComponentType = () => {
+export const DropdownInModal: StoryComponentType = () => {
     const [value, setValue] = React.useState(null);
     const [opened, setOpened] = React.useState(true);
 
-    return (
-        <View style={styles.centered}>
+    const modalContent = (
+        <View style={styles.scrollableArea}>
             <View>
+                <Body>
+                    Sometimes we want to include Dropdowns inside a Modal, and
+                    these controls can be accessed only by scrolling down. This
+                    example help us to demonstrate that SingleSelect components
+                    can correctly be displayed within the visible scrolling
+                    area.
+                </Body>
+                <Strut size={Spacing.large_24} />
                 <SingleSelect
                     onChange={(selected) => setValue(selected)}
                     isFilterable={true}
@@ -131,13 +147,29 @@ export const DropdownOverlap: StoryComponentType = () => {
             </View>
         </View>
     );
+
+    const modal = (
+        <OnePaneDialog title="Dropdown in a Modal" content={modalContent} />
+    );
+
+    return (
+        <View style={styles.centered}>
+            <ModalLauncher modal={modal}>
+                {({openModal}) => (
+                    <Button onClick={openModal}>Click here!</Button>
+                )}
+            </ModalLauncher>
+        </View>
+    );
 };
 
-DropdownOverlap.story = {
-    name: "Dropdown container overlaps anchor",
+DropdownInModal.story = {
+    name: "Dropdown in a modal",
     parameters: {
         chromatic: {
-            viewports: [320, 640, 1024],
+            // We don't need screenshots because this story can be tested after
+            // the modal is opened.
+            disable: true,
         },
     },
 };