@khanacademy/wonder-blocks-dropdown 2.3.20 → 2.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.3.20",
+  "version": "2.4.3",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -15,30 +15,31 @@
     "access": "public"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-button": "^2.9.12",
-    "@khanacademy/wonder-blocks-clickable": "^2.1.1",
-    "@khanacademy/wonder-blocks-color": "^1.1.17",
-    "@khanacademy/wonder-blocks-core": "^3.1.3",
-    "@khanacademy/wonder-blocks-icon": "^1.2.20",
-    "@khanacademy/wonder-blocks-icon-button": "^3.3.12",
-    "@khanacademy/wonder-blocks-layout": "^1.4.2",
-    "@khanacademy/wonder-blocks-modal": "^2.1.41",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.2",
-    "@khanacademy/wonder-blocks-timing": "^1.2.2",
-    "@khanacademy/wonder-blocks-typography": "^1.1.24"
+    "@babel/runtime": "^7.13.10",
+    "@khanacademy/wonder-blocks-button": "^2.9.14",
+    "@khanacademy/wonder-blocks-clickable": "^2.1.3",
+    "@khanacademy/wonder-blocks-color": "^1.1.19",
+    "@khanacademy/wonder-blocks-core": "^3.1.5",
+    "@khanacademy/wonder-blocks-icon": "^1.2.22",
+    "@khanacademy/wonder-blocks-icon-button": "^3.3.14",
+    "@khanacademy/wonder-blocks-layout": "^1.4.4",
+    "@khanacademy/wonder-blocks-modal": "^2.1.43",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
+    "@khanacademy/wonder-blocks-timing": "^2.0.1",
+    "@khanacademy/wonder-blocks-typography": "^1.1.26"
   },
   "peerDependencies": {
+    "@popperjs/core": "^2.10.1",
     "aphrodite": "^1.2.5",
-    "popper.js": "^1.14.1",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-popper": "^1.0.0",
+    "react-popper": "^2.0.0",
     "react-router-dom": "^4.2.2",
     "react-window": "^1.8.5"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.0.4"
+    "wb-dev-build-settings": "^0.1.2"
   },
-  "gitHead": "1e01eef4683b2be90d822eace58bb60ef6e28092"
+  "gitHead": "2a21f4ec19e5611fe716237c21f45c9164b65710"
 }

package/src/components/__tests__/dropdown-core.test.js

@@ -662,7 +662,9 @@ describe("DropdownCore", () => {
         });
 
         // Assert
-        expect(dropdown.find("InnerPopper").text()).toContain("No results");
+        expect(dropdown).toContainMatchingElement(
+            `[data-test-id="dropdown-core-no-results"]`,
+        );
     });
 
     it("When SearchTextInput has input and focused, tab key should not close the select", () => {

package/src/components/dropdown-core.js

@@ -19,11 +19,6 @@ import type {
     WithActionSchedulerProps,
     WithoutActionScheduler,
 } from "@khanacademy/wonder-blocks-timing";
-// NOTE(jeff): Here we share some code for use with PopperJS. Long term,
-// we should either contribute this code to the PopperJS component, or its
-// own non-wonder-blocks package.
-// $FlowIgnore
-import visibilityModifierDefaultConfig from "../../../../shared-unpackaged/visibility-modifier.js"; // eslint-disable-line import/no-restricted-paths
 import DropdownCoreVirtualized from "./dropdown-core-virtualized.js";
 import SeparatorItem from "./separator-item.js";
 import SearchTextInput from "./search-text-input.js";
@@ -639,7 +634,7 @@ class DropdownCore extends React.Component<Props, State> {
         });
     }
 
-    renderItems(outOfBoundaries: ?boolean): React.Node {
+    renderItems(isReferenceHidden: ?boolean): React.Node {
         const {dropdownStyle, light, openerElement} = this.props;
 
         // The dropdown width is at least the width of the opener.
@@ -662,7 +657,7 @@ class DropdownCore extends React.Component<Props, State> {
                 style={[
                     styles.dropdown,
                     light && styles.light,
-                    outOfBoundaries && styles.hidden,
+                    isReferenceHidden && styles.hidden,
                     {minWidth: minDropdownWidth},
                     dropdownStyle,
                 ]}
@@ -690,24 +685,39 @@ class DropdownCore extends React.Component<Props, State> {
         if (modalHost) {
             return ReactDOM.createPortal(
                 <Popper
-                    innerRef={(node) => {
+                    innerRef={(node: ?HTMLElement) => {
                         if (node) {
                             this.popperElement = node;
                         }
                     }}
                     referenceElement={this.props.openerElement}
+                    strategy="fixed"
                     placement={
                         alignment === "left" ? "bottom-start" : "bottom-end"
                     }
-                    modifiers={{
-                        wbVisibility: visibilityModifierDefaultConfig,
-                        preventOverflow: {
-                            boundariesElement: "viewport",
-                            escapeWithReference: true,
+                    modifiers={[
+                        {
+                            name: "preventOverflow",
+                            options: {
+                                rootBoundary: "viewport",
+                                // Allows to overlap the popper in case there's
+                                // no more vertical room in the viewport.
+                                altAxis: true,
+                                // Also needed to make sure the Popper will be
+                                // displayed correctly in different contexts
+                                // (e.g inside a Modal)
+                                tether: false,
+                            },
                         },
-                    }}
+                    ]}
                 >
-                    {({placement, ref, style, outOfBoundaries}) => {
+                    {({
+                        placement,
+                        ref,
+                        style,
+                        hasPopperEscaped,
+                        isReferenceHidden,
+                    }) => {
                         // For some reason react-popper includes `pointerEvents: "none"`
                         // in the `style` it passes to us, but only when running the tests.
                         const {pointerEvents: _, ...restStyle} = style;
@@ -717,7 +727,9 @@ class DropdownCore extends React.Component<Props, State> {
                                 style={restStyle}
                                 data-placement={placement}
                             >
-                                {this.renderItems(outOfBoundaries)}
+                                {this.renderItems(
+                                    hasPopperEscaped || isReferenceHidden,
+                                )}
                             </div>
                         );
                     }}
@@ -767,6 +779,7 @@ const styles = StyleSheet.create({
     },
 
     hidden: {
+        pointerEvents: "none",
         visibility: "hidden",
     },
 

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";
 
@@ -89,6 +94,14 @@ const styles = StyleSheet.create({
         height: "800px",
         width: "1200px",
     },
+    centered: {
+        alignItems: "center",
+        justifyContent: "center",
+        height: `calc(100vh - 16px)`,
+    },
+    scrollableArea: {
+        height: "200vh",
+    },
 });
 
 export const WithFilter: StoryComponentType = () => <SingleSelectWithFilter />;
@@ -105,3 +118,58 @@ WithFilter.story = {
 export const WithFilterOpened: StoryComponentType = () => (
     <SingleSelectWithFilter opened={true} />
 );
+
+export const DropdownInModal: StoryComponentType = () => {
+    const [value, setValue] = React.useState(null);
+    const [opened, setOpened] = React.useState(true);
+
+    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}
+                    opened={opened}
+                    onToggle={(opened) => setOpened(opened)}
+                    placeholder="Select a fruit"
+                    selectedValue={value}
+                >
+                    {optionItems}
+                </SingleSelect>
+            </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>
+    );
+};
+
+DropdownInModal.story = {
+    name: "Dropdown in a modal",
+    parameters: {
+        chromatic: {
+            // We don't need screenshots because this story can be tested after
+            // the modal is opened.
+            disable: true,
+        },
+    },
+};

package/src/__tests__/index.test.js

@@ -1,23 +0,0 @@
-// @flow
-
-describe("@khanacademy/wonder-blocks-dropdown", () => {
-    test("package exports default", async () => {
-        // Arrange
-        const importedModule = import("../index.js");
-
-        // Act
-        const result = await importedModule;
-
-        // Assert
-        expect(Object.keys(result).sort()).toEqual(
-            [
-                "ActionItem",
-                "ActionMenu",
-                "MultiSelect",
-                "OptionItem",
-                "SeparatorItem",
-                "SingleSelect",
-            ].sort(),
-        );
-    });
-});