@codastic/react-positioning-portal - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

lib/components/PositioningPortal.d.ts

@@ -25,3 +25,3 @@ import * as React from 'react';
 }
-export declare type PositioningStrategy<Strategy> = (parentRect: ClientRect, portalRect: ClientRect, props: Props<Strategy>) => {
+export type PositioningStrategy<Strategy> = (parentRect: ClientRect, portalRect: ClientRect, props: Props<Strategy>) => {
     top: number;
@@ -37,2 +37,3 @@ left: number;
 }
+export declare const defaultPositionStrategy: PositioningStrategy<Position>;
 interface State<Strategy> {
@@ -39,0 +40,0 @@ top?: number;

lib/components/PositioningPortalWithState.d.ts

 import * as React from 'react';
-import { Props as PositioningPortalProps, Position } from './PositioningPortal';
+import { Props as PositioningPortalProps } from './PositioningPortal';
 export interface RenderProps {
@@ -8,7 +8,7 @@ close: () => void;
 }
-export interface Props<Strategy = Position> extends PositioningPortalProps<Strategy> {
+export interface Props<Strategy> extends Omit<PositioningPortalProps<Strategy>, 'children' | 'isOpen'> {
     children: React.ReactNode | ((params: RenderProps) => React.ReactNode);
 }
-declare type PositioningPortalWithState<Strategy = Position> = React.StatelessComponent<Props<Strategy>>;
-declare const PositioningPortalWithState: PositioningPortalWithState;
+type PositioningPortalWithState<Strategy> = React.FunctionComponent<Props<Strategy>>;
+declare function PositioningPortalWithState<Strategy>(props: Props<Strategy>): JSX.Element;
 export default PositioningPortalWithState;

lib/index.d.ts

 export { default as PositioningPortal, Props as PositioningPortalProps, PortalContentRenderProps } from './components/PositioningPortal';
 export { default as PositioningPortalWithState, Props as PositioningPortalWithStateProps, RenderProps as PositioningPortalWithStateRenderProps } from './components/PositioningPortalWithState';

lib/index.js

@@ -1,17 +0,17 @@
-import { createElement, Fragment, cloneElement, createRef, Component, useState } from 'react';
-import { createPortal, findDOMNode } from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
 
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
 
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
@@ -23,3 +23,3 @@ /* global Reflect, Promise */
         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
     return extendStatics(d, b);
@@ -29,2 +29,4 @@ };
 function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
     extendStatics(d, b);
@@ -58,8 +60,10 @@ function __() { this.constructor = d; }
 
-function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
@@ -80,5 +84,5 @@
     if (!element || element.tagName === DEFAULT_SCROLL_PARENT) {
-        return __spreadArrays(scrollParents, [window]);
+        return __spreadArray(__spreadArray([], scrollParents, true), [window], false);
     }
-    return getScrollParents(element.parentElement, isScrollParent(element) ? __spreadArrays(scrollParents, [element]) : scrollParents);
+    return getScrollParents(element.parentElement, isScrollParent(element) ? __spreadArray(__spreadArray([], scrollParents, true), [element], false) : scrollParents);
 }
@@ -97,3 +101,3 @@
 })(Position || (Position = {}));
-var renderProps = function (element, props) {
+var renderProps$1 = function (element, props) {
     return typeof element === 'function' ? element(props) : element;
@@ -136,7 +140,7 @@ };
         left: left,
-        strategy: strategy
+        strategy: strategy,
     };
 };
 var KEYCODES = {
-    ESCAPE: 27
+    ESCAPE: 27,
 };
@@ -158,5 +162,5 @@ var EVENT_CONTEXT_KEY = 'PositioningPortal-context';
             scrollParents: [],
-            strategy: null
+            strategy: null,
         };
-        _this.portalRef = createRef();
+        _this.portalRef = React.createRef();
         _this.close = function () {
@@ -187,3 +191,3 @@ if (_this.props.onShouldClose) {
             }
-            var parentDom = findDOMNode(_this);
+            var parentDom = ReactDOM.findDOMNode(_this);
             if (parentDom && parentDom.contains(event.target)) {
@@ -223,3 +227,3 @@ return;
                 isOpen: false,
-                scrollParents: []
+                scrollParents: [],
             });
@@ -229,5 +233,5 @@ _this.props.onClose();
         _this.markClickEvent = function (event) {
-            event.nativeEvent[EVENT_CONTEXT_KEY] = __spreadArrays((event.nativeEvent[EVENT_CONTEXT_KEY] || []), [
-                _this
-            ]);
+            event.nativeEvent[EVENT_CONTEXT_KEY] = __spreadArray(__spreadArray([], (event.nativeEvent[EVENT_CONTEXT_KEY] || []), true), [
+                _this,
+            ], false);
         };
@@ -238,3 +242,3 @@ _this.preRenderPortal = function () {
                 // Unfortunately there seems to be no way to achieve this with refs.
-                var parentDom = findDOMNode(_this);
+                var parentDom = ReactDOM.findDOMNode(_this);
                 if (parentDom && parentDom.nodeType === Node.ELEMENT_NODE) {
@@ -257,3 +261,3 @@ var parentRect = parentDom.getBoundingClientRect();
                         portalRect: null,
-                        scrollParents: scrollParents
+                        scrollParents: scrollParents,
                     }, resolve);
@@ -279,3 +283,3 @@ }
                         top: top_1,
-                        portalRect: portalRect
+                        portalRect: portalRect,
                     }, resolve);
@@ -326,13 +330,13 @@ }
             position: 'absolute',
-            width: portalRect ? portalRect.width + "px" : 'auto',
-            left: left + "px",
-            top: top + "px",
-            visibility: isPositioned ? 'visible' : 'hidden'
+            width: portalRect ? "".concat(portalRect.width, "px") : 'auto',
+            left: "".concat(left, "px"),
+            top: "".concat(top, "px"),
+            visibility: isPositioned ? 'visible' : 'hidden',
         };
         var renderPortal = function () {
-            return createPortal(cloneElement(portalElement || createElement("div", null), {
+            return ReactDOM.createPortal(React.cloneElement(portalElement || React.createElement("div", null), {
                 ref: _this.portalRef,
                 style: __assign(__assign({}, portalStyle), ((portalElement && portalElement.props.style) || {})),
-                onClick: _this.markClickEvent
-            }, renderProps(portalContent, {
+                onClick: _this.markClickEvent,
+            }, renderProps$1(portalContent, {
                 close: _this.close,
@@ -345,7 +349,7 @@ transitionStarted: _this.transitionStarted,
                 relatedWidth: relatedWidth,
-                relatedHeight: relatedHeight
+                relatedHeight: relatedHeight,
             })), rootNode || window.document.body);
         };
         var shouldRenderPortal = shouldRender && (isOpen || transitionActive);
-        return (createElement(Fragment, null,
+        return (React.createElement(React.Fragment, null,
             children,
@@ -361,12 +365,12 @@ shouldRenderPortal && renderPortal()));
         closeOnKeyDown: function (event) { return event.keyCode === KEYCODES.ESCAPE; },
-        positionStrategy: defaultPositionStrategy
+        positionStrategy: defaultPositionStrategy,
     };
     return PositioningPortal;
-}(Component));
+}(React.Component));
 
-var renderProps$1 = function (element, props) {
+function renderProps(element, props) {
     return typeof element === 'function' ? element(props) : element;
-};
-var PositioningPortalWithState = function (props) {
-    var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1];
+}
+function PositioningPortalWithState(props) {
+    var _a = React.useState(false), isOpen = _a[0], setIsOpen = _a[1];
     var children = props.children, restProps = __rest(props, ["children"]);
@@ -379,9 +383,9 @@ var open = function () {
     };
-    return (createElement(PositioningPortal, __assign({}, restProps, { isOpen: isOpen, onShouldClose: close }), renderProps$1(children, {
+    return (React.createElement(PositioningPortal, __assign({}, restProps, { isOpen: isOpen, onShouldClose: close }), renderProps(children, {
         open: open,
         close: close,
-        isOpen: isOpen
+        isOpen: isOpen,
     })));
-};
+}
 
 export { PositioningPortal, PositioningPortalWithState };

lib/legacy/index.js/components/PositioningPortal.d.ts

@@ -25,3 +25,3 @@ import * as React from 'react';
 }
-export declare type PositioningStrategy<Strategy> = (parentRect: ClientRect, portalRect: ClientRect, props: Props<Strategy>) => {
+export type PositioningStrategy<Strategy> = (parentRect: ClientRect, portalRect: ClientRect, props: Props<Strategy>) => {
     top: number;
@@ -37,2 +37,3 @@ left: number;
 }
+export declare const defaultPositionStrategy: PositioningStrategy<Position>;
 interface State<Strategy> {
@@ -39,0 +40,0 @@ top?: number;

lib/legacy/index.js/components/PositioningPortalWithState.d.ts

 import * as React from 'react';
-import { Props as PositioningPortalProps, Position } from './PositioningPortal';
+import { Props as PositioningPortalProps } from './PositioningPortal';
 export interface RenderProps {
@@ -8,7 +8,7 @@ close: () => void;
 }
-export interface Props<Strategy = Position> extends PositioningPortalProps<Strategy> {
+export interface Props<Strategy> extends Omit<PositioningPortalProps<Strategy>, 'children' | 'isOpen'> {
     children: React.ReactNode | ((params: RenderProps) => React.ReactNode);
 }
-declare type PositioningPortalWithState<Strategy = Position> = React.StatelessComponent<Props<Strategy>>;
-declare const PositioningPortalWithState: PositioningPortalWithState;
+type PositioningPortalWithState<Strategy> = React.FunctionComponent<Props<Strategy>>;
+declare function PositioningPortalWithState<Strategy>(props: Props<Strategy>): JSX.Element;
 export default PositioningPortalWithState;

lib/legacy/index.js/index.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
 
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
@@ -27,3 +45,3 @@ /* global Reflect, Promise */
         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
     return extendStatics(d, b);
@@ -33,2 +51,4 @@ };
 function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
     extendStatics(d, b);
@@ -62,8 +82,10 @@ function __() { this.constructor = d; }
 
-function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
@@ -84,5 +106,5 @@
     if (!element || element.tagName === DEFAULT_SCROLL_PARENT) {
-        return __spreadArrays(scrollParents, [window]);
+        return __spreadArray(__spreadArray([], scrollParents, true), [window], false);
     }
-    return getScrollParents(element.parentElement, isScrollParent(element) ? __spreadArrays(scrollParents, [element]) : scrollParents);
+    return getScrollParents(element.parentElement, isScrollParent(element) ? __spreadArray(__spreadArray([], scrollParents, true), [element], false) : scrollParents);
 }
@@ -101,3 +123,3 @@
 })(Position || (Position = {}));
-var renderProps = function (element, props) {
+var renderProps$1 = function (element, props) {
     return typeof element === 'function' ? element(props) : element;
@@ -140,7 +162,7 @@ };
         left: left,
-        strategy: strategy
+        strategy: strategy,
     };
 };
 var KEYCODES = {
-    ESCAPE: 27
+    ESCAPE: 27,
 };
@@ -162,5 +184,5 @@ var EVENT_CONTEXT_KEY = 'PositioningPortal-context';
             scrollParents: [],
-            strategy: null
+            strategy: null,
         };
-        _this.portalRef = React.createRef();
+        _this.portalRef = React__namespace.createRef();
         _this.close = function () {
@@ -191,3 +213,3 @@ if (_this.props.onShouldClose) {
             }
-            var parentDom = ReactDOM.findDOMNode(_this);
+            var parentDom = ReactDOM__namespace.findDOMNode(_this);
             if (parentDom && parentDom.contains(event.target)) {
@@ -227,3 +249,3 @@ return;
                 isOpen: false,
-                scrollParents: []
+                scrollParents: [],
             });
@@ -233,5 +255,5 @@ _this.props.onClose();
         _this.markClickEvent = function (event) {
-            event.nativeEvent[EVENT_CONTEXT_KEY] = __spreadArrays((event.nativeEvent[EVENT_CONTEXT_KEY] || []), [
-                _this
-            ]);
+            event.nativeEvent[EVENT_CONTEXT_KEY] = __spreadArray(__spreadArray([], (event.nativeEvent[EVENT_CONTEXT_KEY] || []), true), [
+                _this,
+            ], false);
         };
@@ -242,3 +264,3 @@ _this.preRenderPortal = function () {
                 // Unfortunately there seems to be no way to achieve this with refs.
-                var parentDom = ReactDOM.findDOMNode(_this);
+                var parentDom = ReactDOM__namespace.findDOMNode(_this);
                 if (parentDom && parentDom.nodeType === Node.ELEMENT_NODE) {
@@ -261,3 +283,3 @@ var parentRect = parentDom.getBoundingClientRect();
                         portalRect: null,
-                        scrollParents: scrollParents
+                        scrollParents: scrollParents,
                     }, resolve);
@@ -283,3 +305,3 @@ }
                         top: top_1,
-                        portalRect: portalRect
+                        portalRect: portalRect,
                     }, resolve);
@@ -330,13 +352,13 @@ }
             position: 'absolute',
-            width: portalRect ? portalRect.width + "px" : 'auto',
-            left: left + "px",
-            top: top + "px",
-            visibility: isPositioned ? 'visible' : 'hidden'
+            width: portalRect ? "".concat(portalRect.width, "px") : 'auto',
+            left: "".concat(left, "px"),
+            top: "".concat(top, "px"),
+            visibility: isPositioned ? 'visible' : 'hidden',
         };
         var renderPortal = function () {
-            return ReactDOM.createPortal(React.cloneElement(portalElement || React.createElement("div", null), {
+            return ReactDOM__namespace.createPortal(React__namespace.cloneElement(portalElement || React__namespace.createElement("div", null), {
                 ref: _this.portalRef,
                 style: __assign(__assign({}, portalStyle), ((portalElement && portalElement.props.style) || {})),
-                onClick: _this.markClickEvent
-            }, renderProps(portalContent, {
+                onClick: _this.markClickEvent,
+            }, renderProps$1(portalContent, {
                 close: _this.close,
@@ -349,7 +371,7 @@ transitionStarted: _this.transitionStarted,
                 relatedWidth: relatedWidth,
-                relatedHeight: relatedHeight
+                relatedHeight: relatedHeight,
             })), rootNode || window.document.body);
         };
         var shouldRenderPortal = shouldRender && (isOpen || transitionActive);
-        return (React.createElement(React.Fragment, null,
+        return (React__namespace.createElement(React__namespace.Fragment, null,
             children,
@@ -365,12 +387,12 @@ shouldRenderPortal && renderPortal()));
         closeOnKeyDown: function (event) { return event.keyCode === KEYCODES.ESCAPE; },
-        positionStrategy: defaultPositionStrategy
+        positionStrategy: defaultPositionStrategy,
     };
     return PositioningPortal;
-}(React.Component));
+}(React__namespace.Component));
 
-var renderProps$1 = function (element, props) {
+function renderProps(element, props) {
     return typeof element === 'function' ? element(props) : element;
-};
-var PositioningPortalWithState = function (props) {
-    var _a = React.useState(false), isOpen = _a[0], setIsOpen = _a[1];
+}
+function PositioningPortalWithState(props) {
+    var _a = React__namespace.useState(false), isOpen = _a[0], setIsOpen = _a[1];
     var children = props.children, restProps = __rest(props, ["children"]);
@@ -383,10 +405,10 @@ var open = function () {
     };
-    return (React.createElement(PositioningPortal, __assign({}, restProps, { isOpen: isOpen, onShouldClose: close }), renderProps$1(children, {
+    return (React__namespace.createElement(PositioningPortal, __assign({}, restProps, { isOpen: isOpen, onShouldClose: close }), renderProps(children, {
         open: open,
         close: close,
-        isOpen: isOpen
+        isOpen: isOpen,
     })));
-};
+}
 
 exports.PositioningPortal = PositioningPortal;
 exports.PositioningPortalWithState = PositioningPortalWithState;

lib/services/noop.d.ts

 declare const _default: () => void;
 export default _default;

lib/services/scroll-parents.d.ts

 export default function getScrollParents(element: HTMLElement, scrollParents?: Array<HTMLElement | Window>): Array<HTMLElement | Window>;

lib/storybook/Button.d.ts

 declare const Button: import("styled-components").StyledComponent<"button", any, {}, never>;
 export default Button;

lib/storybook/Flyout.d.ts

@@ -0,0 +0,0 @@ declare const Flyout: import("styled-components").StyledComponent<"div", any, {

lib/storybook/styles.d.ts

@@ -0,0 +0,0 @@ export declare const COLORS: {

package.json

 {
   "name": "@codastic/react-positioning-portal",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "The positioning portal is a low level React component to build all kinds of absolutely positioned flyouts which are anchored to another element in the viewport. This can be used to create dropdowns, tooltips, context menus, etc.",
@@ -9,3 +9,3 @@ "scripts": {
     "build:clean": "rm -rf lib && rm -rf docs",
-    "build:esm": "rollup -c rollup.config.js",
+    "build:esm": "rollup -c rollup.config.cjs",
     "build:storybook": "build-storybook -o docs",
@@ -42,10 +42,9 @@ "test": "run-s test:*",
   "engines": {
-    "node": ">=12.0.0",
-    "npm": ">=6.0.0"
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
   },
   "homepage": "https://github.com/codastic/react-positioning-portal#readme",
-  "dependencies": {},
   "peerDependencies": {
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react": "^16.12.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0"
   },
@@ -56,29 +55,31 @@ "devDependencies": {
     "@codastic/release": "^1.8.0",
-    "@dump247/storybook-state": "^1.6.1",
-    "@storybook/addon-actions": "^5.3.13",
-    "@storybook/addon-storysource": "^5.3.13",
-    "@storybook/react": "^5.3.13",
-    "@types/react-dom": "^16.9.5",
-    "@types/react-transition-group": "^4.2.4",
+    "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addon-storysource": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@types/react-transition-group": "^4.4.5",
     "@types/styled-components": "^5.0.1",
-    "@typescript-eslint/eslint-plugin": "^2.24.0",
-    "@typescript-eslint/parser": "^2.24.0",
-    "babel-loader": "^8.0.6",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-import-resolver-typescript": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.1",
+    "@typescript-eslint/parser": "^5.45.1",
+    "core-js": "^3.26.1",
+    "eslint": "^8.29.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.19.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.19.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-transition-group": "^4.3.0",
-    "rollup": "^2.1.0",
-    "rollup-plugin-typescript2": "^0.26.0",
+    "prettier": "^2.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-transition-group": "^4.4.5",
+    "rollup": "^3.6.0",
+    "rollup-plugin-typescript2": "^0.34.1",
     "styled-components": "^5.0.1",
-    "ts-loader": "^6.2.1",
-    "typescript": "^3.8.3"
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.3"
   }
 }

Fixed alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of package files

47

11.9%

Number of low license alerts

0

-100%

Worsened metrics

Total package byte prevSize

85373

-7.15%

Dev dependency count

31

6.9%

Lines of code

2004

-8.16%

No dependency changes