popper-max-size-modifier - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

dist/popper-max-size-modifier.cjs.js

@@ -12,4 +12,5 @@ 'use strict';
     var state = _ref.state,
-        name = _ref.name;
-    var overflow = detectOverflow.detectOverflow(state);
+        name = _ref.name,
+        options = _ref.options;
+    var overflow = detectOverflow.detectOverflow(state, options);
 
@@ -16,0 +17,0 @@ var _ref2 = state.modifiersData.preventOverflow || {

dist/popper-max-size-modifier.esm.js

@@ -10,4 +10,5 @@ import { detectOverflow } from '@popperjs/core';
     var state = _ref.state,
-        name = _ref.name;
-    var overflow = detectOverflow(state);
+        name = _ref.name,
+        options = _ref.options;
+    var overflow = detectOverflow(state, options);
 
@@ -14,0 +15,0 @@ var _ref2 = state.modifiersData.preventOverflow || {

index.d.ts

@@ -1,5 +0,22 @@
-import {Modifier} from '@popperjs/core';
+import {
+  Modifier,
+  Placement,
+  Boundary,
+  RootBoundary,
+  Context,
+  Padding
+} from '@popperjs/core';
 
-declare const maxSize: Modifier<{}>;
+// TODO: import from @popperjs/core directly once this can be exported
+type Options = {
+  placement: Placement;
+  boundary: Boundary;
+  rootBoundary: RootBoundary;
+  elementContext: Context;
+  altBoundary: boolean;
+  padding: Padding;
+};
 
+declare const maxSize: Modifier<'maxSize', Options>;
+
 export default maxSize;

package.json

 {
   "name": "popper-max-size-modifier",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A Popper.js modifier to change the size of your popper to fit it within the available viewport space.",
@@ -5,0 +5,0 @@ "main": "dist/popper-max-size-modifier.cjs.js",

README.md

@@ -26,7 +26,7 @@ # popper-max-size-modifier
 
-// Create your own apply modifier that mutates the popper element's styles:
+// Create your own apply modifier that adds the styles to the state
 const applyMaxSize = {
   name: 'applyMaxSize',
   enabled: true,
-  phase: 'write',
+  phase: 'beforeWrite',
   requires: ['maxSize'],
@@ -37,4 +37,7 @@ fn({state}) {
 
-    state.elements.popper.style.maxWidth = `${width}px`;
-    state.elements.popper.style.maxHeight = `${height}px`;
+    state.styles.popper = {
+      ...state.styles.popper,
+      maxWidth: `${width}px`,
+      maxHeight: `${height}px`
+    };
   }
@@ -54,6 +57,27 @@ };
 // Minimum acceptable size is 100px
-state.elements.popper.style.maxWidth = `${Math.max(100, width)}px`;
-state.elements.popper.style.maxHeight = `${Math.max(100, height)}px`;
+`${Math.max(100, width)}px`;
+`${Math.max(100, height)}px`;
 ```
 
+## Options
+
+All
+[`detectOverflow` options](https://popper.js.org/docs/v2/utils/detect-overflow/#options)
+can be passed.
+
+```js
+createPopper(reference, popper, {
+  modifiers: [
+    {
+      ...maxSize,
+      options: {
+        boundary: customBoundaryElement,
+        padding: 20
+      }
+    },
+    applyMaxSize
+  ]
+});
+```
+
 ## Contributing
@@ -60,0 +84,0 @@

No alert changes

Improved metrics

Total package byte prevSize

5740

increased by12.9%

Lines of code

82

increased by28.13%

Number of lines in readme file

84

increased by40%

No dependency changes