graphiql - npm Package Compare versions

Comparing version 3.5.0-canary-869419d9.0 to 3.5.0

dist/components/GraphiQL.js

@@ -241,3 +241,5 @@ "use strict";
     }, []);
-    var hasMultipleTabs = editorContext.tabs.length > 1;
+    var addTab = (react_1.default.createElement(react_2.Tooltip, { label: "Add tab" },
+        react_1.default.createElement(react_2.UnStyledButton, { type: "button", className: "graphiql-tab-add", onClick: handleAddTab, "aria-label": "Add tab" },
+            react_1.default.createElement(react_2.PlusIcon, { "aria-hidden": "true" }))));
     var className = props.className ? " ".concat(props.className) : '';
@@ -273,26 +275,21 @@ return (react_1.default.createElement(react_2.Tooltip.Provider, null,
                     react_1.default.createElement("div", { className: "graphiql-session-header" },
-                        !props.disableTabs && (react_1.default.createElement(react_1.default.Fragment, null,
-                            hasMultipleTabs && (react_1.default.createElement(react_2.Tabs, { values: editorContext.tabs, onReorder: handleReorder, "aria-label": "Select active operation" }, editorContext.tabs.map(function (tab, index) { return (react_1.default.createElement(react_2.Tooltip, { key: tab.id, label: tab.title },
-                                react_1.default.createElement(react_2.Tab, { value: tab, isActive: index === editorContext.activeTabIndex },
-                                    react_1.default.createElement(react_2.Tab.Button, { "aria-controls": "graphiql-session", id: "graphiql-session-tab-".concat(index), onClick: function () {
+                        !props.disableTabs && (react_1.default.createElement(react_2.Tabs, { values: editorContext.tabs, onReorder: handleReorder, "aria-label": "Select active operation" }, editorContext.tabs.length > 1 && (react_1.default.createElement(react_1.default.Fragment, null,
+                            editorContext.tabs.map(function (tab, index) { return (react_1.default.createElement(react_2.Tab, { key: tab.id, value: tab, isActive: index === editorContext.activeTabIndex },
+                                react_1.default.createElement(react_2.Tab.Button, { "aria-controls": "graphiql-session", id: "graphiql-session-tab-".concat(index), onClick: function () {
+                                        executionContext.stop();
+                                        editorContext.changeTab(index);
+                                    } }, tab.title),
+                                react_1.default.createElement(react_2.Tab.Close, { onClick: function () {
+                                        if (editorContext.activeTabIndex === index) {
                                             executionContext.stop();
-                                            editorContext.changeTab(index);
-                                        } }, tab.title),
-                                    react_1.default.createElement(react_2.Tab.Close, { onClick: function () {
-                                            if (editorContext.activeTabIndex === index) {
-                                                executionContext.stop();
-                                            }
-                                            editorContext.closeTab(index);
-                                        } })))); }))),
-                            react_1.default.createElement(react_2.Tooltip, { label: "New tab" },
-                                react_1.default.createElement(react_2.UnStyledButton, { type: "button", className: "graphiql-tab-add", onClick: handleAddTab, "aria-label": "New tab" },
-                                    react_1.default.createElement(react_2.PlusIcon, { "aria-hidden": "true" }))))),
-                        logo),
+                                        }
+                                        editorContext.closeTab(index);
+                                    } }))); }),
+                            addTab)))),
+                        react_1.default.createElement("div", { className: "graphiql-session-header-right" },
+                            editorContext.tabs.length === 1 && addTab,
+                            logo)),
                     react_1.default.createElement("div", { role: "tabpanel", id: "graphiql-session", className: "graphiql-session", "aria-labelledby": "graphiql-session-tab-".concat(editorContext.activeTabIndex) },
                         react_1.default.createElement("div", { ref: editorResize.firstRef },
-                            react_1.default.createElement("div", { className: "graphiql-editors", style: hasMultipleTabs
-                                    ? { borderTopLeftRadius: 0, borderTopRightRadius: 0 }
-                                    : {
-                                        marginTop: 'calc(var(--px-8) - var(--session-header-height))',
-                                    } },
+                            react_1.default.createElement("div", { className: "graphiql-editors".concat(editorContext.tabs.length === 1 ? ' full-height' : '') },
                                 react_1.default.createElement("div", { ref: editorToolsResize.firstRef },
@@ -299,0 +296,0 @@ react_1.default.createElement("section", { className: "graphiql-query-editor", "aria-label": "Query Editor" },

esm/components/GraphiQL.js

@@ -214,3 +214,5 @@ var __assign = (this && this.__assign) || function () {
     }, []);
-    var hasMultipleTabs = editorContext.tabs.length > 1;
+    var addTab = (React.createElement(Tooltip, { label: "Add tab" },
+        React.createElement(UnStyledButton, { type: "button", className: "graphiql-tab-add", onClick: handleAddTab, "aria-label": "Add tab" },
+            React.createElement(PlusIcon, { "aria-hidden": "true" }))));
     var className = props.className ? " ".concat(props.className) : '';
@@ -246,26 +248,21 @@ return (React.createElement(Tooltip.Provider, null,
                     React.createElement("div", { className: "graphiql-session-header" },
-                        !props.disableTabs && (React.createElement(React.Fragment, null,
-                            hasMultipleTabs && (React.createElement(Tabs, { values: editorContext.tabs, onReorder: handleReorder, "aria-label": "Select active operation" }, editorContext.tabs.map(function (tab, index) { return (React.createElement(Tooltip, { key: tab.id, label: tab.title },
-                                React.createElement(Tab, { value: tab, isActive: index === editorContext.activeTabIndex },
-                                    React.createElement(Tab.Button, { "aria-controls": "graphiql-session", id: "graphiql-session-tab-".concat(index), onClick: function () {
+                        !props.disableTabs && (React.createElement(Tabs, { values: editorContext.tabs, onReorder: handleReorder, "aria-label": "Select active operation" }, editorContext.tabs.length > 1 && (React.createElement(React.Fragment, null,
+                            editorContext.tabs.map(function (tab, index) { return (React.createElement(Tab, { key: tab.id, value: tab, isActive: index === editorContext.activeTabIndex },
+                                React.createElement(Tab.Button, { "aria-controls": "graphiql-session", id: "graphiql-session-tab-".concat(index), onClick: function () {
+                                        executionContext.stop();
+                                        editorContext.changeTab(index);
+                                    } }, tab.title),
+                                React.createElement(Tab.Close, { onClick: function () {
+                                        if (editorContext.activeTabIndex === index) {
                                             executionContext.stop();
-                                            editorContext.changeTab(index);
-                                        } }, tab.title),
-                                    React.createElement(Tab.Close, { onClick: function () {
-                                            if (editorContext.activeTabIndex === index) {
-                                                executionContext.stop();
-                                            }
-                                            editorContext.closeTab(index);
-                                        } })))); }))),
-                            React.createElement(Tooltip, { label: "New tab" },
-                                React.createElement(UnStyledButton, { type: "button", className: "graphiql-tab-add", onClick: handleAddTab, "aria-label": "New tab" },
-                                    React.createElement(PlusIcon, { "aria-hidden": "true" }))))),
-                        logo),
+                                        }
+                                        editorContext.closeTab(index);
+                                    } }))); }),
+                            addTab)))),
+                        React.createElement("div", { className: "graphiql-session-header-right" },
+                            editorContext.tabs.length === 1 && addTab,
+                            logo)),
                     React.createElement("div", { role: "tabpanel", id: "graphiql-session", className: "graphiql-session", "aria-labelledby": "graphiql-session-tab-".concat(editorContext.activeTabIndex) },
                         React.createElement("div", { ref: editorResize.firstRef },
-                            React.createElement("div", { className: "graphiql-editors", style: hasMultipleTabs
-                                    ? { borderTopLeftRadius: 0, borderTopRightRadius: 0 }
-                                    : {
-                                        marginTop: 'calc(var(--px-8) - var(--session-header-height))',
-                                    } },
+                            React.createElement("div", { className: "graphiql-editors".concat(editorContext.tabs.length === 1 ? ' full-height' : '') },
                                 React.createElement("div", { ref: editorToolsResize.firstRef },
@@ -272,0 +269,0 @@ React.createElement("section", { className: "graphiql-query-editor", "aria-label": "Query Editor" },

package.json

 {
   "name": "graphiql",
-  "version": "3.5.0-canary-869419d9.0",
+  "version": "3.5.0",
   "description": "An graphical interactive in-browser GraphQL IDE.",
@@ -50,6 +50,6 @@ "contributors": [
   "dependencies": {
-    "@graphiql/react": "^0.24.0-canary-869419d9.0"
+    "@graphiql/react": "^0.24.0"
   },
   "peerDependencies": {
-    "graphql": "^15.5.0 || ^16.0.0",
+    "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2",
     "react": "^16.8.0 || ^17 || ^18",
@@ -59,8 +59,5 @@ "react-dom": "^16.8.0 || ^17 || ^18"
   "devDependencies": {
-    "@graphiql/toolkit": "^0.9.2",
-    "@cypress/webpack-preprocessor": "^5.5.0",
+    "@graphiql/toolkit": "^0.10.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
-    "@types/codemirror": "^0.0.90",
-    "@types/node": "^16.18.4",
     "@types/testing-library__jest-dom": "5.14.5",
@@ -72,7 +69,7 @@ "babel-loader": "^9.1.2",
     "cssnano": "^5.1.15",
-    "cypress": "^12.6.0",
+    "cypress": "^13.13.2",
     "express": "^4.19.2",
     "fork-ts-checker-webpack-plugin": "7.3.0",
-    "graphql": "^16.8.1",
-    "graphql-http": "^1.19.0",
+    "graphql": "^17.0.0-alpha.5",
+    "graphql-helix": "^1.13.0",
     "graphql-subscriptions": "^2.0.0",
@@ -86,3 +83,2 @@ "html-webpack-plugin": "^5.5.0",
     "postcss-preset-env": "^8.0.1",
-    "prop-types": "15.7.2",
     "react": "^18.2.0",
@@ -89,0 +85,0 @@ "react-dom": "^18.2.0",

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

14264984

increased by3.67%

Dev dependency count

38

decreased by-9.52%

Lines of code

189626

increased by3%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + [e-mail].4297.42bcd01f7c733e255ff9eab84ec8d7500dfd208a(transitive)

• Updated@graphiql/react@^0.24.0