@hookform/devtools - npm Package Compare versions

Comparing version 4.1.1-beta.2 to 4.1.1

dist/devTool.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { Control, FieldValues } from 'react-hook-form';
@@ -3,0 +2,0 @@ import type { PLACEMENT } from './position';

dist/devToolUI.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { Control } from 'react-hook-form';
@@ -3,0 +2,0 @@ import { PLACEMENT } from './position';

dist/formStateTable.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 declare type Props = {
@@ -3,0 +2,0 @@ formState: any;

dist/header.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { Control } from 'react-hook-form';
@@ -3,0 +2,0 @@ declare type Props = {

dist/index.cjs.development.js

@@ -24,5 +24,3 @@ 'use strict';
                     enumerable: true,
-                    get: function () {
-                        return e[k];
-                    }
+                    get: function () { return e[k]; }
                 });
@@ -32,3 +30,3 @@ }
     }
-    n['default'] = e;
+    n["default"] = e;
     return Object.freeze(n);
@@ -89,10 +87,9 @@ }
 };
-var Button = styled__default['default'].button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  appearance: none;\n  margin: 0;\n  border: 0;\n  color: white;\n  padding: 5px !important;\n  border-radius: 0 !important;\n  background: ", ";\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  appearance: none;\n  margin: 0;\n  border: 0;\n  color: white;\n  padding: 5px !important;\n  border-radius: 0 !important;\n  background: ",
-    ";\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
-    return props.hideBackground ? "" : colors.blue + " !important";
+var Button = styled__default["default"].button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  appearance: none;\n  margin: 0;\n  border: 0;\n  color: white;\n  padding: 5px !important;\n  border-radius: 0 !important;\n  background: ", ";\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  appearance: none;\n  margin: 0;\n  border: 0;\n  color: white;\n  padding: 5px !important;\n  border-radius: 0 !important;\n  background: ", ";\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
+    return props.hideBackground ? "" : "".concat(colors.blue, " !important");
 }, colors.lightBlue);
 Button.defaultProps = { type: 'button' };
-var CircleButton = styled__default['default'](Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: bold;\n  margin: 0 4px 0 auto;\n  background: none !important;\n  display: flex;\n  width: 25px;\n  height: 25px;\n  justify-content: center;\n  line-height: 14px !important;\n  border-radius: 50% !important;\n  padding: 0 !important;\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n\n  &:active {\n    background: black;\n  }\n"], ["\n  font-size: 14px;\n  font-weight: bold;\n  margin: 0 4px 0 auto;\n  background: none !important;\n  display: flex;\n  width: 25px;\n  height: 25px;\n  justify-content: center;\n  line-height: 14px !important;\n  border-radius: 50% !important;\n  padding: 0 !important;\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n\n  &:active {\n    background: black;\n  }\n"])), colors.lightBlue);
-var Input = styled__default['default'].input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::placeholder {\n    color: #b3b3b3;\n  }\n\n  &:focus::placeholder {\n    color: white;\n  }\n"], ["\n  &::placeholder {\n    color: #b3b3b3;\n  }\n\n  &:focus::placeholder {\n    color: white;\n  }\n"])));
-var Table = styled__default['default'].table(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transition: 0.3s all;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  transition: 0.3s all;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colors.primary);
+var CircleButton = styled__default["default"](Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: bold;\n  margin: 0 4px 0 auto;\n  background: none !important;\n  display: flex;\n  width: 25px;\n  height: 25px;\n  justify-content: center;\n  line-height: 14px !important;\n  border-radius: 50% !important;\n  padding: 0 !important;\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n\n  &:active {\n    background: black;\n  }\n"], ["\n  font-size: 14px;\n  font-weight: bold;\n  margin: 0 4px 0 auto;\n  background: none !important;\n  display: flex;\n  width: 25px;\n  height: 25px;\n  justify-content: center;\n  line-height: 14px !important;\n  border-radius: 50% !important;\n  padding: 0 !important;\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n\n  &:active {\n    background: black;\n  }\n"])), colors.lightBlue);
+var Input = styled__default["default"].input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::placeholder {\n    color: #b3b3b3;\n  }\n\n  &:focus::placeholder {\n    color: white;\n  }\n"], ["\n  &::placeholder {\n    color: #b3b3b3;\n  }\n\n  &:focus::placeholder {\n    color: white;\n  }\n"])));
+var Table = styled__default["default"].table(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transition: 0.3s all;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  transition: 0.3s all;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colors.primary);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
@@ -129,4 +126,4 @@
     var isValueWrappedInPre = false;
-    if (!isUndefined__default['default'](value)) {
-        if (isObject__default['default'](value)) {
+    if (!isUndefined__default["default"](value)) {
+        if (isObject__default["default"](value)) {
             try {
@@ -149,3 +146,3 @@ value = (React__namespace.createElement("pre", { style: { margin: 0 } },
             transition: '.3s all',
-            borderLeft: "2px solid " + (hasError ? colors.secondary : colors.buttonBlue),
+            borderLeft: "2px solid ".concat(hasError ? colors.secondary : colors.buttonBlue),
             background: 'none',
@@ -157,3 +154,3 @@ } },
                     React__namespace.createElement(Button, { onClick: function () { return setCollapse(!collapse); }, title: "Toggle field table", style: {
-                            border: "1px solid " + colors.lightBlue,
+                            border: "1px solid ".concat(colors.lightBlue),
                             borderRadius: 2,
@@ -172,3 +169,3 @@ padding: '3px 5px',
                             }
-                        }, title: "Scroll into view", style: __assign({ border: "1px solid " + colors.lightBlue, borderRadius: 2, padding: '3px 5px', display: 'inline-block', fontSize: 9, lineHeight: '13px', textAlign: 'center', width: 'calc(100% - 30px)' }, (isNative
+                        }, title: "Scroll into view", style: __assign({ border: "1px solid ".concat(colors.lightBlue), borderRadius: 2, padding: '3px 5px', display: 'inline-block', fontSize: 9, lineHeight: '13px', textAlign: 'center', width: 'calc(100% - 30px)' }, (isNative
                             ? {}
@@ -193,5 +190,5 @@ : { cursor: 'not-allowed', background: colors.lightBlue })) }, isNative ? 'Native' : 'Custom')),
                     : JSON.stringify(errorMessage)))),
-            !isUndefined__default['default'](value) && (React__namespace.createElement("tr", null,
+            !isUndefined__default["default"](value) && (React__namespace.createElement("tr", null,
                 React__namespace.createElement("td", { align: "right", style: __assign({ paddingRight: 5, fontWeight: 500, verticalAlign: 'top' }, paraGraphDefaultStyle) }, "Value:"),
-                React__namespace.createElement("td", { "data-testid": name + "-field-value", style: __assign({ display: 'block', maxWidth: 100 }, paraGraphDefaultStyle) },
+                React__namespace.createElement("td", { "data-testid": "".concat(name, "-field-value"), style: __assign({ display: 'block', maxWidth: 100 }, paraGraphDefaultStyle) },
                     !isValueWrappedInPre && (React__namespace.createElement("p", { title: value, style: __assign(__assign({}, paraGraphDefaultStyle), { margin: 0, padding: 0 }) }, value)),
@@ -216,3 +213,3 @@ isValueWrappedInPre && (React__namespace.createElement("div", { style: __assign(__assign({}, paraGraphDefaultStyle), { margin: 0, padding: 0 }) }, value))))),
                 var style = _a.style;
-                return (React__namespace.createElement("table", { style: __assign({ padding: '5px 10px', display: 'block', background: 'black', borderTop: "1px solid " + colors.lightPink, pointerEvents: 'none' }, style) },
+                return (React__namespace.createElement("table", { style: __assign({ padding: '5px 10px', display: 'block', background: 'black', borderTop: "1px solid ".concat(colors.lightPink), pointerEvents: 'none' }, style) },
                     React__namespace.createElement("tbody", null,
@@ -307,3 +304,3 @@ React__namespace.createElement("tr", null,
                 return (React__namespace.createElement("section", { key: (value === null || value === void 0 ? void 0 : value._f.name) + childIndex, style: {
-                        borderBottom: "1px dashed " + colors.secondary,
+                        borderBottom: "1px dashed ".concat(colors.secondary),
                         margin: 0,
@@ -346,3 +343,3 @@ } },
             React__namespace.createElement(Button, { style: {
-                    borderRight: "1px solid " + colors.primary,
+                    borderRight: "1px solid ".concat(colors.primary),
                     textTransform: 'none',
@@ -353,3 +350,3 @@ fontSize: 11,
             React__namespace.createElement(Button, { style: {
-                    borderRight: "1px solid " + colors.primary,
+                    borderRight: "1px solid ".concat(colors.primary),
                     textTransform: 'none',
@@ -356,0 +353,0 @@ fontSize: 11,

dist/index.esm.js

@@ -57,5 +57,4 @@ import * as React from 'react';
 };
-var Button = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  appearance: none;\n  margin: 0;\n  border: 0;\n  color: white;\n  padding: 5px !important;\n  border-radius: 0 !important;\n  background: ", ";\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  appearance: none;\n  margin: 0;\n  border: 0;\n  color: white;\n  padding: 5px !important;\n  border-radius: 0 !important;\n  background: ",
-    ";\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
-    return props.hideBackground ? "" : colors.blue + " !important";
+var Button = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  appearance: none;\n  margin: 0;\n  border: 0;\n  color: white;\n  padding: 5px !important;\n  border-radius: 0 !important;\n  background: ", ";\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  appearance: none;\n  margin: 0;\n  border: 0;\n  color: white;\n  padding: 5px !important;\n  border-radius: 0 !important;\n  background: ", ";\n  transition: 0.2s all;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
+    return props.hideBackground ? "" : "".concat(colors.blue, " !important");
 }, colors.lightBlue);
@@ -116,3 +115,3 @@ Button.defaultProps = { type: 'button' };
             transition: '.3s all',
-            borderLeft: "2px solid " + (hasError ? colors.secondary : colors.buttonBlue),
+            borderLeft: "2px solid ".concat(hasError ? colors.secondary : colors.buttonBlue),
             background: 'none',
@@ -124,3 +123,3 @@ } },
                     React.createElement(Button, { onClick: function () { return setCollapse(!collapse); }, title: "Toggle field table", style: {
-                            border: "1px solid " + colors.lightBlue,
+                            border: "1px solid ".concat(colors.lightBlue),
                             borderRadius: 2,
@@ -139,3 +138,3 @@ padding: '3px 5px',
                             }
-                        }, title: "Scroll into view", style: __assign({ border: "1px solid " + colors.lightBlue, borderRadius: 2, padding: '3px 5px', display: 'inline-block', fontSize: 9, lineHeight: '13px', textAlign: 'center', width: 'calc(100% - 30px)' }, (isNative
+                        }, title: "Scroll into view", style: __assign({ border: "1px solid ".concat(colors.lightBlue), borderRadius: 2, padding: '3px 5px', display: 'inline-block', fontSize: 9, lineHeight: '13px', textAlign: 'center', width: 'calc(100% - 30px)' }, (isNative
                             ? {}
@@ -162,3 +161,3 @@ : { cursor: 'not-allowed', background: colors.lightBlue })) }, isNative ? 'Native' : 'Custom')),
                 React.createElement("td", { align: "right", style: __assign({ paddingRight: 5, fontWeight: 500, verticalAlign: 'top' }, paraGraphDefaultStyle) }, "Value:"),
-                React.createElement("td", { "data-testid": name + "-field-value", style: __assign({ display: 'block', maxWidth: 100 }, paraGraphDefaultStyle) },
+                React.createElement("td", { "data-testid": "".concat(name, "-field-value"), style: __assign({ display: 'block', maxWidth: 100 }, paraGraphDefaultStyle) },
                     !isValueWrappedInPre && (React.createElement("p", { title: value, style: __assign(__assign({}, paraGraphDefaultStyle), { margin: 0, padding: 0 }) }, value)),
@@ -183,3 +182,3 @@ isValueWrappedInPre && (React.createElement("div", { style: __assign(__assign({}, paraGraphDefaultStyle), { margin: 0, padding: 0 }) }, value))))),
                 var style = _a.style;
-                return (React.createElement("table", { style: __assign({ padding: '5px 10px', display: 'block', background: 'black', borderTop: "1px solid " + colors.lightPink, pointerEvents: 'none' }, style) },
+                return (React.createElement("table", { style: __assign({ padding: '5px 10px', display: 'block', background: 'black', borderTop: "1px solid ".concat(colors.lightPink), pointerEvents: 'none' }, style) },
                     React.createElement("tbody", null,
@@ -274,3 +273,3 @@ React.createElement("tr", null,
                 return (React.createElement("section", { key: (value === null || value === void 0 ? void 0 : value._f.name) + childIndex, style: {
-                        borderBottom: "1px dashed " + colors.secondary,
+                        borderBottom: "1px dashed ".concat(colors.secondary),
                         margin: 0,
@@ -313,3 +312,3 @@ } },
             React.createElement(Button, { style: {
-                    borderRight: "1px solid " + colors.primary,
+                    borderRight: "1px solid ".concat(colors.primary),
                     textTransform: 'none',
@@ -320,3 +319,3 @@ fontSize: 11,
             React.createElement(Button, { style: {
-                    borderRight: "1px solid " + colors.primary,
+                    borderRight: "1px solid ".concat(colors.primary),
                     textTransform: 'none',
@@ -323,0 +322,0 @@ fontSize: 11,

dist/logo.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 declare const Logo: ({ style, actions, }: {
@@ -3,0 +2,0 @@ style?: Record<string, any> | undefined;

dist/panel.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { Control } from 'react-hook-form';
@@ -3,0 +2,0 @@ declare const Panel: ({ control, control: { _fields } }: {

dist/panelShadow.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { PLACEMENT } from './position';
@@ -3,0 +2,0 @@ declare type Props = {

dist/panelTable.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 declare type Props = {
@@ -3,0 +2,0 @@ isNative: boolean;

dist/styled.d.ts

@@ -7,3 +7,3 @@ /// <reference types="react" />
 declare const Button: import("@emotion/styled").StyledComponent<{
-    theme?: any;
+    theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -13,11 +13,20 @@ } & {
 }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-declare const CircleButton: import("@emotion/styled").StyledComponent<any, {}, {}>;
+declare const CircleButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    hideBackground?: boolean | undefined;
+} & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 declare const Input: import("@emotion/styled").StyledComponent<{
-    theme?: any;
+    theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
 declare const Table: import("@emotion/styled").StyledComponent<{
-    theme?: any;
+    theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
 export { Button, CircleButton, Input, Table };

package.json

 {
   "name": "@hookform/devtools",
-  "version": "4.1.1-beta.2",
+  "version": "4.1.1",
   "description": "React Hook Form dev tool to help debugging forms",
@@ -95,3 +95,2 @@ "main": "dist/index.js",
     "lint-staged": "^10.5.4",
-    "loglevel": "^1.7.1",
     "prettier": "^2.2.1",
@@ -98,0 +97,0 @@ "react": "^17.0.2",

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

506104

increased by50.09%

Dev dependency count

38

decreased by-2.56%

Lines of code

3309

increased by62.68%

Number of low quality alerts

0

decreased by-100%

No dependency changes