flex-wrap-layout - npm Package Compare versions

Comparing version 0.2.1 to 0.9.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+## v0.9.0 (2020/02/24)
+
+- Rework everything: exposes `useDetectWrappedElements()`, `detectWrappedElements()` and `DevTools`
+- Remove `DetectRowWrapController`, `flex-wrap-layout.scss` (`layout='column'`, `layout='row'`, `vspace`, `hspace`, `grow`)
+
 ## v0.2.1 (2020/01/31)
@@ -2,0 +7,0 @@

dist/cjs/DevTools.js

@@ -11,38 +11,40 @@ "use strict";
 const react_1 = __importStar(require("react"));
-const index_1 = require("./index");
+const useDetectWrappedElements_1 = require("./useDetectWrappedElements");
 // See https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/styles/index.js
 const panel = {
-    position: 'fixed',
-    height: 26,
-    backgroundColor: 'white',
-    color: 'rgba(0, 0, 0, 0.8)',
+    display: 'inline-block',
+    border: '1px solid rgba(0, 0, 0, 0.1)',
     borderRadius: '2px',
-    borderStyle: 'solid',
-    borderWidth: '1px',
-    borderColor: 'rgba(0, 0, 0, 0.1)',
-    zIndex: 65000,
     padding: '0 5px'
 };
+function useDevTools(showBordersInit, detectWrappedElementsInit, flexFillInit) {
+    const [showBorders, setShowBorders] = react_1.useState(showBordersInit);
+    const [detectWrappedElements, setDetectWrappedElements] = react_1.useState(detectWrappedElementsInit);
+    const [flexFill, setFlexFill] = react_1.useState(flexFillInit);
+    const showBordersClassName = showBorders ? 'showBorders' : '';
+    const flexFillClassName = flexFill ? 'flex-fill' : '';
+    return {
+        showBordersClassName,
+        showBorders,
+        setShowBorders,
+        detectWrappedElements,
+        setDetectWrappedElements,
+        flexFillClassName,
+        flexFill,
+        setFlexFill
+    };
+}
+exports.useDevTools = useDevTools;
+// https://inventingwithmonster.io/20190207-break-the-rules-of-react-hooks/
+function DetectWrappedElements({ detectWrappedElementsRef }) {
+    useDetectWrappedElements_1.useDetectWrappedElements(detectWrappedElementsRef);
+    return null;
+}
 function DevTools(props) {
-    const { rootRef, enableDetectRowWrap, position } = props;
-    const [bordersDisplayed, setBordersDisplayed] = react_1.useState(index_1.Borders.displayed());
-    const [detectRowWrapEnabled, setDetectRowWrapEnabled] = react_1.useState(enableDetectRowWrap);
-    // See [Is there something like instance variables?](https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables)
-    const detectRowWrap = react_1.useRef();
-    react_1.useEffect(() => {
-        detectRowWrap.current = new index_1.DetectRowWrapController(rootRef.current, enableDetectRowWrap);
-    }, [rootRef, enableDetectRowWrap]);
-    function handleToggleBordersChange() {
-        const displayed = index_1.Borders.toggle();
-        setBordersDisplayed(displayed);
-        const enabled = detectRowWrap.current.run();
-        setDetectRowWrapEnabled(enabled);
-    }
-    function handleToggleDetectRowWrapChange() {
-        const enabled = detectRowWrap.current.toggle();
-        setDetectRowWrapEnabled(enabled);
-    }
-    return (react_1.default.createElement("div", { style: { ...panel, ...position } },
+    const { detectWrappedElementsRef, context } = props;
+    const { showBorders, setShowBorders, detectWrappedElements, setDetectWrappedElements, flexFill, setFlexFill } = context;
+    return (react_1.default.createElement("div", { style: { ...panel } },
+        detectWrappedElements && (react_1.default.createElement(DetectWrappedElements, { detectWrappedElementsRef: detectWrappedElementsRef })),
         react_1.default.createElement("label", { title: "Dotted line: growing block, solid line: fixed block" },
-            react_1.default.createElement("input", { type: "checkbox", checked: bordersDisplayed, onChange: handleToggleBordersChange }),
+            react_1.default.createElement("input", { type: "checkbox", checked: showBorders, onChange: () => setShowBorders(!showBorders) }),
             ' ',
@@ -52,13 +54,11 @@ "Borders"),
         react_1.default.createElement("label", { title: "Make previous and next blocks grow" },
-            react_1.default.createElement("input", { type: "checkbox", checked: detectRowWrapEnabled, onChange: handleToggleDetectRowWrapChange }),
+            react_1.default.createElement("input", { type: "checkbox", checked: detectWrappedElements, onChange: () => setDetectWrappedElements(!detectWrappedElements) }),
             ' ',
-            "detectRowWrap()")));
+            "detectWrappedElements()"),
+        '  ',
+        react_1.default.createElement("label", null,
+            react_1.default.createElement("input", { type: "checkbox", checked: flexFill, onChange: () => setFlexFill(!flexFill) }),
+            ' ',
+            ".flex-fill")));
 }
 exports.DevTools = DevTools;
-DevTools.defaultProps = {
-    position: {
-        // See https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/index.jsx#L40
-        top: -2,
-        right: 20
-    }
-};

dist/cjs/index.js

@@ -6,4 +6,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./detectRowWrap"));
-__export(require("./DetectRowWrapController"));
-__export(require("./Borders"));
+__export(require("./detectWrappedElements"));
+__export(require("./useDetectWrappedElements"));
+__export(require("./DevTools"));

dist/DevTools.d.ts

 import React from 'react';
-export interface Props {
-    rootRef: React.RefObject<HTMLElement>;
-    enableDetectRowWrap: boolean;
-    position: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
+interface DevToolsContext {
+    showBordersClassName: string;
+    showBorders: boolean;
+    setShowBorders: React.Dispatch<React.SetStateAction<boolean>>;
+    detectWrappedElements: boolean;
+    setDetectWrappedElements: React.Dispatch<React.SetStateAction<boolean>>;
+    flexFillClassName: string;
+    flexFill: boolean;
+    setFlexFill: React.Dispatch<React.SetStateAction<boolean>>;
 }
+export declare function useDevTools(showBordersInit: boolean, detectWrappedElementsInit: boolean, flexFillInit: boolean): {
+    showBordersClassName: string;
+    showBorders: boolean;
+    setShowBorders: React.Dispatch<React.SetStateAction<boolean>>;
+    detectWrappedElements: boolean;
+    setDetectWrappedElements: React.Dispatch<React.SetStateAction<boolean>>;
+    flexFillClassName: string;
+    flexFill: boolean;
+    setFlexFill: React.Dispatch<React.SetStateAction<boolean>>;
+};
+interface Props {
+    detectWrappedElementsRef: React.RefObject<HTMLElement>;
+    context: DevToolsContext;
+}
 export declare function DevTools(props: Props): JSX.Element;
-export declare namespace DevTools {
-    var defaultProps: {
-        position: {
-            top: number;
-            right: number;
-        };
-    };
-}
+export {};

dist/DevTools.js

@@ -1,38 +0,39 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Borders, DetectRowWrapController } from './index';
+import React, { useState } from 'react';
+import { useDetectWrappedElements } from './useDetectWrappedElements';
 // See https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/styles/index.js
 const panel = {
-    position: 'fixed',
-    height: 26,
-    backgroundColor: 'white',
-    color: 'rgba(0, 0, 0, 0.8)',
+    display: 'inline-block',
+    border: '1px solid rgba(0, 0, 0, 0.1)',
     borderRadius: '2px',
-    borderStyle: 'solid',
-    borderWidth: '1px',
-    borderColor: 'rgba(0, 0, 0, 0.1)',
-    zIndex: 65000,
     padding: '0 5px'
 };
+export function useDevTools(showBordersInit, detectWrappedElementsInit, flexFillInit) {
+    const [showBorders, setShowBorders] = useState(showBordersInit);
+    const [detectWrappedElements, setDetectWrappedElements] = useState(detectWrappedElementsInit);
+    const [flexFill, setFlexFill] = useState(flexFillInit);
+    const showBordersClassName = showBorders ? 'showBorders' : '';
+    const flexFillClassName = flexFill ? 'flex-fill' : '';
+    return {
+        showBordersClassName,
+        showBorders,
+        setShowBorders,
+        detectWrappedElements,
+        setDetectWrappedElements,
+        flexFillClassName,
+        flexFill,
+        setFlexFill
+    };
+}
+// https://inventingwithmonster.io/20190207-break-the-rules-of-react-hooks/
+function DetectWrappedElements({ detectWrappedElementsRef }) {
+    useDetectWrappedElements(detectWrappedElementsRef);
+    return null;
+}
 export function DevTools(props) {
-    const { rootRef, enableDetectRowWrap, position } = props;
-    const [bordersDisplayed, setBordersDisplayed] = useState(Borders.displayed());
-    const [detectRowWrapEnabled, setDetectRowWrapEnabled] = useState(enableDetectRowWrap);
-    // See [Is there something like instance variables?](https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables)
-    const detectRowWrap = useRef();
-    useEffect(() => {
-        detectRowWrap.current = new DetectRowWrapController(rootRef.current, enableDetectRowWrap);
-    }, [rootRef, enableDetectRowWrap]);
-    function handleToggleBordersChange() {
-        const displayed = Borders.toggle();
-        setBordersDisplayed(displayed);
-        const enabled = detectRowWrap.current.run();
-        setDetectRowWrapEnabled(enabled);
-    }
-    function handleToggleDetectRowWrapChange() {
-        const enabled = detectRowWrap.current.toggle();
-        setDetectRowWrapEnabled(enabled);
-    }
-    return (React.createElement("div", { style: { ...panel, ...position } },
+    const { detectWrappedElementsRef, context } = props;
+    const { showBorders, setShowBorders, detectWrappedElements, setDetectWrappedElements, flexFill, setFlexFill } = context;
+    return (React.createElement("div", { style: { ...panel } },
+        detectWrappedElements && (React.createElement(DetectWrappedElements, { detectWrappedElementsRef: detectWrappedElementsRef })),
         React.createElement("label", { title: "Dotted line: growing block, solid line: fixed block" },
-            React.createElement("input", { type: "checkbox", checked: bordersDisplayed, onChange: handleToggleBordersChange }),
+            React.createElement("input", { type: "checkbox", checked: showBorders, onChange: () => setShowBorders(!showBorders) }),
             ' ',
@@ -42,12 +43,10 @@ "Borders"),
         React.createElement("label", { title: "Make previous and next blocks grow" },
-            React.createElement("input", { type: "checkbox", checked: detectRowWrapEnabled, onChange: handleToggleDetectRowWrapChange }),
+            React.createElement("input", { type: "checkbox", checked: detectWrappedElements, onChange: () => setDetectWrappedElements(!detectWrappedElements) }),
             ' ',
-            "detectRowWrap()")));
+            "detectWrappedElements()"),
+        '  ',
+        React.createElement("label", null,
+            React.createElement("input", { type: "checkbox", checked: flexFill, onChange: () => setFlexFill(!flexFill) }),
+            ' ',
+            ".flex-fill")));
 }
-DevTools.defaultProps = {
-    position: {
-        // See https://github.com/mobxjs/mobx-react-devtools/blob/6.1.1/src/Panel/index.jsx#L40
-        top: -2,
-        right: 20
-    }
-};

dist/index.d.ts

@@ -1,3 +0,3 @@
-export * from './detectRowWrap';
-export * from './DetectRowWrapController';
-export * from './Borders';
+export * from './detectWrappedElements';
+export * from './useDetectWrappedElements';
+export * from './DevTools';

dist/index.js

@@ -1,3 +0,3 @@
-export * from './detectRowWrap';
-export * from './DetectRowWrapController';
-export * from './Borders';
+export * from './detectWrappedElements';
+export * from './useDetectWrappedElements';
+export * from './DevTools';

package.json

 {
   "name": "flex-wrap-layout",
-  "version": "0.2.1",
+  "version": "0.9.0",
   "repository": {
@@ -12,4 +12,3 @@ "type": "git",
     "flexbox",
-    "layout",
-    "grid"
+    "flex-wrap"
   ],
@@ -25,50 +24,44 @@ "main": "dist/cjs/index.js",
   "scripts": {
-    "clean": "rm -rf dist build",
-    "clean:all": "npm run clean && rm -rf node_modules package-lock.json",
-    "build:umd": "NODE_ENV=development rollup --config && NODE_ENV=production rollup --config",
+    "clean": "rm -rf dist examples/build",
+    "clean:all": "npm run clean && rm -rf node_modules package-lock.json examples/node_modules examples/package-lock.json",
     "build:esnext": "tsc --project tsconfig.dist.json --outDir dist --module esnext --declaration true",
     "build:cjs": "tsc --project tsconfig.dist.json --outDir dist/cjs",
-    "build:css": "node-sass --output-style expanded --source-map true --source-map-contents true src/flex-wrap-layout.scss dist/flex-wrap-layout.css",
-    "build": "npm run build:umd && npm run build:esnext && npm run build:cjs && npm run build:css",
-    "build:examples": "webpack -d",
-    "build:examples:watch": "webpack -d --watch",
+    "build": "npm run build:esnext && npm run build:cjs",
+    "npm:install:examples": "cd examples && npm install",
+    "build:examples": "cd examples && ./node_modules/.bin/webpack -d",
+    "test": "NODE_ENV=test jest --verbose",
+    "test:coverage": "jest --coverage",
+    "test:examples": "cd examples && NODE_ENV=test ./node_modules/.bin/jest --config jest-e2e.config.js --verbose",
     "tsc": "tsc",
     "format": "prettier --write \"**/*\"",
-    "lint": "npm run tsc && eslint . '**/*.{js,jsx,ts,tsx}' && stylelint '**/*.scss'",
-    "precommit": "npm run format && npm run lint",
-    "prepush": "npm run precommit && npm run build && npm run build:examples",
-    "prepublishOnly": "npm run clean && npm run tsc && npm run lint && npm run build",
+    "lint": "npm run tsc && eslint . '**/*.{js,ts,tsx}' && stylelint '**/*.scss'",
+    "prepush": "npm run build:esnext && npm run build:examples && npm run test && npm run test:examples",
+    "prepublishOnly": "npm run clean && npm run build",
     "npm:update": "npm run clean:all && npx npm-check-updates --upgrade && npm install"
   },
+  "dependencies": {},
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
   "devDependencies": {
-    "@types/node": "^13.5.2",
-    "@types/react": "^16.9.19",
-    "@types/react-dom": "^16.9.5",
-    "@types/webpack": "^4.41.3",
-    "@typescript-eslint/eslint-plugin": "^2.18.0",
-    "@typescript-eslint/parser": "^2.18.0",
-    "bootstrap": "^4.4.1",
-    "bootstrap-sass": "^3.4.1",
-    "css-loader": "^3.4.2",
+    "@testing-library/react": "^9.4.1",
+    "@types/jest": "^25.1.3",
+    "@types/react": "^16.9.22",
+    "@typescript-eslint/eslint-plugin": "^2.20.0",
+    "@typescript-eslint/parser": "^2.20.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "file-loader": "^5.0.2",
-    "husky": "^4.2.1",
-    "node-sass": "^4.13.1",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^2.4.0",
+    "husky": "^4.2.3",
+    "jest": "^25.1.0",
+    "lint-staged": "^10.0.7",
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "rollup": "^1.30.1",
-    "rollup-plugin-filesize": "^6.2.1",
-    "rollup-plugin-typescript2": "^0.25.3",
-    "rollup-plugin-uglify": "^6.0.4",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.1.3",
-    "stylelint": "^13.0.0",
+    "stylelint": "^13.2.0",
     "stylelint-config-airbnb": "0.0.0",
@@ -78,8 +71,5 @@ "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-scss": "^3.14.2",
-    "ts-loader": "^6.2.1",
-    "ts-node": "^8.6.2",
-    "typescript": "^3.7.5",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10"
+    "ts-jest": "^25.2.1",
+    "typescript": "^3.8.2"
   }
 }

README.md

 # flex-wrap-layout
 
-[![npm version](https://badge.fury.io/js/flex-wrap-layout.svg)](https://badge.fury.io/js/flex-wrap-layout)
-![Build status](https://github.com/tkrotoff/flex-wrap-layout/workflows/Node.js%20CI/badge.svg)
+[![npm version](https://badge.fury.io/js/flex-wrap-layout.svg)](https://www.npmjs.com/package/flex-wrap-layout)
+[![Build status](https://github.com/tkrotoff/flex-wrap-layout/workflows/Node.js%20CI/badge.svg)](https://github.com/tkrotoff/flex-wrap-layout/actions)
 
-Experimentations with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) and [`flex-wrap: wrap`](http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property) to get rid of the classic and limited [12 columns grid](https://gist.github.com/tkrotoff/e15da98129e46db39bf6) (e.g. things like `.col-md-6 { width: 50% }`).
+Detects flex-wrap via JavaScript ([unfortunately not possible in CSS](https://stackoverflow.com/q/40012428)).
 
-Web technologies (HTML, CSS, JavaScript) are now used for creating complex GUIs (web apps vs web sites). Desktop tools and libraries like [Qt](http://www.qt.io/) have elegantly solved [the problem](http://doc.qt.io/qt-5/layout.html) for decades.
+[`detectWrappedElements()`](src/detectWrappedElements.ts) and [`useDetectWrappedElements()`](src/useDetectWrappedElements.ts) are JavaScript functions that detect when elements are wrapped and let you [define the CSS](src/detectWrappedElements.scss) that goes with it.
 
-## Usage
+This allows for responsive UIs without hardcoded CSS (width, min-width, media queries...) using the "natural" width of elements instead.
 
-`npm install flex-wrap-layout`
+- With `detectWrappedElements()`:
 
-Import [layout.scss](src/layout.scss) or [flex-wrap-layout.scss](src/flex-wrap-layout.scss):
+![Minimal example with detectWrappedElements()](examples/Minimal-detectWrappedElements.gif)
 
-```SCSS
-$layout-item-margin-y: $form-group-margin-bottom;
-$layout-item-margin-x: $form-group-margin-bottom;
-@import '~flex-wrap-layout/src/layout';
-```
+- Without:
 
-If you need to detect CSS flex wrap:
+![Minimal example without detectWrappedElements()](examples/Minimal.gif)
 
-```JS
-import { detectRowWrap } from 'flex-wrap-layout';
-```
+## Usage
 
-## Examples
+`npm install flex-wrap-layout`
 
-### detectRowWrap() example
+```JS
+import React, { useRef } from 'react';
+import ReactDOM from 'react-dom';
 
-https://codepen.io/tkrotoff/pen/pWzKqZ
+import { useDetectWrappedElements, wrapChildrenClassName } from 'flex-wrap-layout';
+import 'flex-wrap-layout/src/detectWrappedElements.scss';
 
-### HTML form example
+const boxStyle = {
+  border: '1px solid',
+  height: 60,
+  margin: 5,
+  padding: 5
+};
 
-![Basic demo](examples/demo.gif)
+function MyComponent() {
+  const ref = useRef(null);
+  useDetectWrappedElements(ref);
 
-```HTML
-<form vspace>
-  <div layout="row" hspace vspace>
-    <div layout="column" vspace grow>
-      <div layout="row">
-        <label for="firstname" offset-with-content>First Name</label>
-        <input id="firstname" grow>
-      </div>
-
-      <div layout="row">
-        <label for="lastname" offset-with-content>Last Name</label>
-        <input id="lastname" grow>
-      </div>
+  return (
+    <div ref={ref} className={wrapChildrenClassName}>
+      <div style={boxStyle}>Paris</div>
+      <div style={{ ...boxStyle, flex: 'auto' }}>Los Angeles</div>
+      <div style={boxStyle}>Phnom Penh</div>
     </div>
+  );
+}
 
-    <div layout="column" vspace grow>
-      <div layout="row">
-        <label for="arrival" offset-with-content>Arrival</label>
-        <input type="date" id="arrival" grow>
-      </div>
-
-      <div layout="row">
-        <label for="departure" offset-with-content>Departure</label>
-        <input type="date" id="departure" grow>
-      </div>
-    </div>
-  </div>
-
-  <div layout="row">
-    <div grow></div>
-    <div layout="row" hspace vspace>
-      <button>Save</button>
-      <button>Cancel</button>
-    </div>
-    <div grow></div>
-  </div>
-</form>
+ReactDOM.render(<MyComponent />, document.getElementById('app'));
 ```
 
-## API
+## Examples
 
-### layout="row"
+- [Minimal example](examples/Minimal.tsx)
+- [Boxes example](examples/Boxes.tsx)
+- [Bootstrap 4 example](examples/Bootstrap4.tsx)
 
-Lines up child elements horizontally ([QHBoxLayout](http://doc.qt.io/qt-5/qhboxlayout.html) equivalent).
+## Supported browsers
 
-`<1> <2> <3>`
-
-### layout="column"
-
-Lines up child elements vertically ([QVBoxLayout](http://doc.qt.io/qt-5/qvboxlayout.html) equivalent).
-
-```
-<1>
-<2>
-<3>
-```
-
-### grow
-
-Grows the element if extra space is available, the element won't shrink below its natural width ([QSizePolicy](http://doc.qt.io/qt-5/qsizepolicy.html#details) equivalent).
-
-- Without `grow`:
-
-```
-| <1> <2> <3>         |
-```
-
-- Element 1 with `grow` attribute:
-
-```
-| <    1    > <2> <3> |
-```
-
-Element 1 fills the extra space if any
-
-- Elements 2 and 3 with `grow` attribute:
-
-```
-| <1> <  2  > <  3  > |
-```
-
-Elements 2 and 3 share the extra space if any
-
-### vspace
-
-Vertical space (margin-bottom) between child elements ([QLayout::spacing](http://doc.qt.io/qt-5/qlayout.html#spacing-prop) equivalent).
-
-```
-<1>  instead of  <1>
-                 <2>
-<2>              <3>
-
-<3>
-```
-
-### hspace
-
-Horizontal space (margin-right) between child elements ([QLayout::spacing](http://doc.qt.io/qt-5/qlayout.html#spacing-prop) equivalent).
-
-`<1> <2> <3>` instead of `<1><2><3>`
-
-### Spacer (`<div grow></div>`)
-
-Stretchable blank space ([QSpacerItem](http://doc.qt.io/qt-5/qspaceritem.html#details) equivalent).
-
-```
-| <1> <2>   <->   <3> |
-| <1> <-> <2> <-> <3> |
-```
-
-## Limitations
-
-I would like to [right-align the labels](http://doc.qt.io/qt-5/qformlayout.html#details) of a form:
-
-```
-| <    label> <input> |  instead of  | <label    > <input> |
-| <    label> <input> |              | <label    > <input> |
-```
-
-Unfortunately it is not possible to detect when an element is wrapped in CSS:
-
-```
-| <    label> |  instead of  | <label    > |
-| <input>     |              | <input>     |
-| <    label> |              | <label    > |
-| <input>     |              | <input>     |
-```
-
-This would also solve other problems (all of them?).
-
-To work around this, [`detectRowWrap()`](src/detectRowWrap.ts) is a JavaScript function that detects when an element is wrapped and lets you [define the CSS](src/detectRowWrap-grow.scss) that goes with it.
-
-## Build and run
-
-```Shell
-yarn build:examples:watch
-open build/examples/demo.html
-```
+IE 11 and evergreen browsers

src/index.ts

@@ -1,3 +0,3 @@
-export * from './detectRowWrap';
-export * from './DetectRowWrapController';
-export * from './Borders';
+export * from './detectWrappedElements';
+export * from './useDetectWrappedElements';
+export * from './DevTools';

New alerts

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

Improved metrics

Dev dependency count

26

decreased by-33.33%

Worsened metrics

Total package byte prevSize

40543

decreased by-25.87%

Dependency count

1

increased byInfinity%

Number of package files

26

decreased by-35%

Lines of code

691

decreased by-23.39%

Number of lines in readme file

63

decreased by-64.2%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes