detect-element-overflow - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/esm/index.js

@@ -1,42 +0,31 @@
-var getRect = function getRect(element) {
-  return element.getBoundingClientRect();
-};
-
-var detectElementOverflow = function detectElementOverflow(element, container) {
-  return {
-    get collidedTop() {
-      return getRect(element).top < getRect(container).top;
-    },
-
-    get collidedBottom() {
-      return getRect(element).bottom > getRect(container).bottom;
-    },
-
-    get collidedLeft() {
-      return getRect(element).left < getRect(container).left;
-    },
-
-    get collidedRight() {
-      return getRect(element).right > getRect(container).right;
-    },
-
-    get overflowTop() {
-      return getRect(container).top - getRect(element).top;
-    },
-
-    get overflowBottom() {
-      return getRect(element).bottom - getRect(container).bottom;
-    },
-
-    get overflowLeft() {
-      return getRect(container).left - getRect(element).left;
-    },
-
-    get overflowRight() {
-      return getRect(element).right - getRect(container).right;
-    }
-
-  };
-};
-
-export default detectElementOverflow;
+function getRect(element) {
+    return element.getBoundingClientRect();
+}
+export default function detectElementOverflow(element, container) {
+    return {
+        get collidedTop() {
+            return getRect(element).top < getRect(container).top;
+        },
+        get collidedBottom() {
+            return getRect(element).bottom > getRect(container).bottom;
+        },
+        get collidedLeft() {
+            return getRect(element).left < getRect(container).left;
+        },
+        get collidedRight() {
+            return getRect(element).right > getRect(container).right;
+        },
+        get overflowTop() {
+            return getRect(container).top - getRect(element).top;
+        },
+        get overflowBottom() {
+            return getRect(element).bottom - getRect(container).bottom;
+        },
+        get overflowLeft() {
+            return getRect(container).left - getRect(element).left;
+        },
+        get overflowRight() {
+            return getRect(element).right - getRect(container).right;
+        },
+    };
+}

package.json

 {
   "name": "detect-element-overflow",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A function that tells you whether a given element is overflowing its container or not. Useful for creating dropdowns and tooltips.",
-  "main": "dist/umd/index.js",
+  "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "source": "src/index.js",
+  "source": "src/index.ts",
+  "types": "src/index.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn build-esm && yarn build-umd",
-    "build-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore **/*.spec.js",
-    "build-umd": "BABEL_ENV=production-umd babel src -d dist/umd --ignore **/*.spec.js",
+    "build": "yarn build-esm && yarn build-cjs",
+    "build-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
+    "build-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
     "clean": "rimraf dist",
-    "lint": "eslint src/ --ext .jsx,.js",
-    "prepublishOnly": "yarn clean && yarn build",
-    "test": "yarn lint"
+    "lint": "eslint src",
+    "prepack": "yarn clean && yarn build",
+    "prettier": "prettier --check . --cache",
+    "test": "yarn lint && yarn tsc && yarn prettier",
+    "tsc": "tsc --noEmit"
   },
@@ -29,15 +32,22 @@ "keywords": [
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "eslint": "^6.1.0",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-plugin-import": "^2.18.2",
-    "rimraf": "^3.0.0"
+    "@babel/cli": "^7.15.0",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-typescript": "^7.18.6",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "eslint": "^8.26.0",
+    "eslint-config-wojtekmaj": "^0.7.1",
+    "husky": "^8.0.0",
+    "prettier": "^2.7.0",
+    "pretty-quick": "^3.1.0",
+    "rimraf": "^3.0.0",
+    "typescript": "^4.9.4"
   },
+  "resolutions": {
+    "semver@7.0.0": "^7.0.0"
+  },
   "files": [
-    "LICENSE",
-    "README.md",
-    "dist/",
-    "src/"
+    "dist",
+    "src"
   ],
@@ -47,3 +57,5 @@ "repository": {
     "url": "https://github.com/wojtekmaj/detect-element-overflow.git"
-  }
-}
+  },
+  "funding": "https://github.com/wojtekmaj/detect-element-overflow?sponsor=1",
+  "packageManager": "yarn@3.1.0"
+}

README.md

@@ -1,14 +0,16 @@
-![downloads](https://img.shields.io/npm/dt/detect-element-overflow.svg) ![build](https://img.shields.io/travis/wojtekmaj/detect-element-overflow/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/detect-element-overflow.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/detect-element-overflow.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
+[![npm](https://img.shields.io/npm/v/detect-element-overflow.svg)](https://www.npmjs.com/package/detect-element-overflow) ![downloads](https://img.shields.io/npm/dt/detect-element-overflow.svg) [![CI](https://github.com/wojtekmaj/detect-element-overflow/workflows/CI/badge.svg)](https://github.com/wojtekmaj/detect-element-overflow/actions) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 
 # Detect-Element-Overflow
+
 A function that tells you whether a given element is overflowing its container or not. Useful for creating dropdowns and tooltips.
 
 ## tl;dr
-* Install by executing `npm install detect-element-overflow` or `yarn add detect-element-overflow`.
-* Import by adding `import detectElementOverflow from 'detect-element-overflow'`.
-* Do stuff with it!
-    ```js
-    const collisions = detectElementOverflow(child, parent);
-    ```
 
+- Install by executing `npm install detect-element-overflow` or `yarn add detect-element-overflow`.
+- Import by adding `import detectElementOverflow from 'detect-element-overflow'`.
+- Do stuff with it!
+  ```js
+  const collisions = detectElementOverflow(child, parent);
+  ```
+
 ## User guide
@@ -18,12 +20,12 @@
 
-|Attribute name|Description|Example values
-|----|----|----|
-|collidedTop|Whether or not child element collided with the top parent's border.|`true`|
-|collidedBottom|Whether or not child element collided with the bottom parent's border.|`true`|
-|collidedLeft|Whether or not child element collided with the left parent's border.|`true`|
-|collidedRight|Whether or not child element collided with the left parent's border.|`true`|
-|overflowTop|How many pixels of child have crossed top parent's border. Negative values specify how many pixels are between the child and the top parent's border.|`20`, `-15`|
-|overflowBottom|How many pixels of child have crossed bottom parent's border. Negative values specify how many pixels are between the child and the bottom parent's border.|`20`, `-15`|
-|overflowLeft|How many pixels of child have crossed left parent's border. Negative values specify how many pixels are between the child and the left parent's border.|`20`, `-15`|
-|overflowRight|How many pixels of child have crossed right parent's border. Negative values specify how many pixels are between the child and the right parent's border.|`20`, `-15`|
+| Attribute name | Description                                                                                                                                                         | Example values |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| collidedTop    | Whether or not the child element collided with the top parent's border.                                                                                             | `true`         |
+| collidedBottom | Whether or not the child element collided with the bottom parent's border.                                                                                          | `true`         |
+| collidedLeft   | Whether or not the child element collided with the left parent's border.                                                                                            | `true`         |
+| collidedRight  | Whether or not the child element collided with the right parent's border.                                                                                           | `true`         |
+| overflowTop    | How many pixels of the child have crossed the top parent's border. Negative values specify how many pixels are between the child and the top parent's border.       | `20`, `-15`    |
+| overflowBottom | How many pixels of the child have crossed the bottom parent's border. Negative values specify how many pixels are between the child and the bottom parent's border. | `20`, `-15`    |
+| overflowLeft   | How many pixels of the child have crossed the left parent's border. Negative values specify how many pixels are between the child and the left parent's border.     | `20`, `-15`    |
+| overflowRight  | How many pixels of the child have crossed the right parent's border. Negative values specify how many pixels are between the child and the right parent's border.   | `20`, `-15`    |
 
@@ -44,5 +46,5 @@ ## License
       <a href="mailto:[e-mail]">[e-mail]</a><br />
-      <a href="http://wojtekmaj.pl">http://wojtekmaj.pl</a>
+      <a href="https://wojtekmaj.pl">https://wojtekmaj.pl</a>
     </td>
   </tr>
 </table>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10137

increased by28.14%

Number of package files

8

increased by33.33%

Lines of code

116

increased by20.83%

Number of lines in readme file

49

increased by4.26%

Worsened metrics

Dev dependency count

13

increased by85.71%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes