Merge pull request #133 from heetch/dropdown-modifiers

Add support for dropdown modifiers
heetch · Apr 17, 2020 · 3db5b63 · 3db5b63 · vercel · Apr 17, 2020
2 parents a865700 + 27dd578
commit 3db5b63
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/packages/react/src/components/Dropdown/index.js b/packages/react/src/components/Dropdown/index.js
@@ -14,6 +14,7 @@ const Dropdown = ({
   triggerer,
   placement,
   portalNode,
+  modifiers,
 }) => {
   const [isOpen, setIsOpen] = React.useState(isOpenProp);
 
@@ -84,6 +85,7 @@ const Dropdown = ({
           offset: {
             offset: '0, 4px',
           },
+          ...modifiers,
         }}
         innerRef={setPopperNode}
         placement={placement}
@@ -105,6 +107,7 @@ Dropdown.propTypes = {
   triggerer: PropTypes.func.isRequired,
   placement: PropTypes.string, // https://popper.js.org/docs/v1/#Popper.placements
   portalNode: PropTypes.instanceOf(HTMLElement),
+  modifiers: PropTypes.shape({}), // https://popper.js.org/docs/v1/#modifiers
 };
 
 Dropdown.defaultProps = {
@@ -114,6 +117,7 @@ Dropdown.defaultProps = {
   onOpen: () => {},
   placement: 'bottom-end',
   portalNode: null,
+  modifiers: {},
 };
 
 export default Dropdown;
diff --git a/packages/react/src/components/Dropdown/index.stories.js b/packages/react/src/components/Dropdown/index.stories.js
@@ -70,5 +70,17 @@ stories.add('Playground', () => (
     <DropdownContainer>
       <StoryDropdown portalNode={document.body} />
     </DropdownContainer>
+
+    <Heading>With modifiers</Heading>
+    <DropdownContainer>
+      <StoryDropdown
+        modifiers={{
+          preventOverflow: {
+            enabled: false,
+          },
+        }}
+        portalNode={document.body}
+      />
+    </DropdownContainer>
   </>
 ));