graphiql - npm Package Compare versions

Comparing version 3.4.0-canary-5291229d.0 to 3.4.0-canary-5b09c3aa.0

dist/components/GraphiQL.d.ts

@@ -25,3 +25,2 @@ import React, { PropsWithChildren, ReactNode } from 'react';
     forcedTheme?: (typeof THEMES)[number];
-    className?: string;
 };
@@ -28,0 +27,0 @@ declare const THEMES: readonly ["light", "dark", "system"];

dist/components/GraphiQL.js

@@ -241,8 +241,5 @@ "use strict";
     }, []);
-    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) : '';
+    var hasMultipleTabs = editorContext.tabs.length > 1;
     return (react_1.default.createElement(react_2.Tooltip.Provider, null,
-        react_1.default.createElement("div", { "data-testid": "graphiql-container", className: "graphiql-container".concat(className) },
+        react_1.default.createElement("div", { "data-testid": "graphiql-container", className: "graphiql-container" },
             react_1.default.createElement("div", { className: "graphiql-sidebar" },
@@ -275,4 +272,4 @@ react_1.default.createElement("div", { className: "graphiql-sidebar-section" }, pluginContext === null || pluginContext === void 0 ? void 0 : pluginContext.plugins.map(function (plugin, index) {
                     react_1.default.createElement("div", { className: "graphiql-session-header" },
-                        !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 },
+                        !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.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 () {
@@ -287,10 +284,14 @@ executionContext.stop();
                                         editorContext.closeTab(index);
-                                    } }))); }),
-                            addTab)))),
-                        react_1.default.createElement("div", { className: "graphiql-session-header-right" },
-                            editorContext.tabs.length === 1 && addTab,
-                            logo)),
+                                    } }))); }))),
+                            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" }))))),
+                        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".concat(editorContext.tabs.length === 1 ? ' full-height' : '') },
+                            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", { ref: editorToolsResize.firstRef },
@@ -297,0 +298,0 @@ react_1.default.createElement("section", { className: "graphiql-query-editor", "aria-label": "Query Editor" },

esm/components/GraphiQL.d.ts

@@ -25,3 +25,2 @@ import React, { PropsWithChildren, ReactNode } from 'react';
     forcedTheme?: (typeof THEMES)[number];
-    className?: string;
 };
@@ -28,0 +27,0 @@ declare const THEMES: readonly ["light", "dark", "system"];

esm/components/GraphiQL.js

@@ -214,8 +214,5 @@ var __assign = (this && this.__assign) || function () {
     }, []);
-    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) : '';
+    var hasMultipleTabs = editorContext.tabs.length > 1;
     return (React.createElement(Tooltip.Provider, null,
-        React.createElement("div", { "data-testid": "graphiql-container", className: "graphiql-container".concat(className) },
+        React.createElement("div", { "data-testid": "graphiql-container", className: "graphiql-container" },
             React.createElement("div", { className: "graphiql-sidebar" },
@@ -248,4 +245,4 @@ React.createElement("div", { className: "graphiql-sidebar-section" }, pluginContext === null || pluginContext === void 0 ? void 0 : pluginContext.plugins.map(function (plugin, index) {
                     React.createElement("div", { className: "graphiql-session-header" },
-                        !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 },
+                        !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(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 () {
@@ -260,10 +257,14 @@ executionContext.stop();
                                         editorContext.closeTab(index);
-                                    } }))); }),
-                            addTab)))),
-                        React.createElement("div", { className: "graphiql-session-header-right" },
-                            editorContext.tabs.length === 1 && addTab,
-                            logo)),
+                                    } }))); }))),
+                            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" }))))),
+                        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".concat(editorContext.tabs.length === 1 ? ' full-height' : '') },
+                            React.createElement("div", { className: "graphiql-editors", style: hasMultipleTabs
+                                    ? { borderTopLeftRadius: 0, borderTopRightRadius: 0 }
+                                    : {
+                                        marginTop: 'calc(var(--px-8) - var(--session-header-height))',
+                                    } },
                                 React.createElement("div", { ref: editorToolsResize.firstRef },
@@ -270,0 +271,0 @@ React.createElement("section", { className: "graphiql-query-editor", "aria-label": "Query Editor" },

package.json

 {
   "name": "graphiql",
-  "version": "3.4.0-canary-5291229d.0",
+  "version": "3.4.0-canary-5b09c3aa.0",
   "description": "An graphical interactive in-browser GraphQL IDE.",
@@ -50,3 +50,3 @@ "contributors": [
   "dependencies": {
-    "@graphiql/react": "^0.22.4",
+    "@graphiql/react": "^0.23.0-canary-5b09c3aa.0",
     "@graphiql/toolkit": "^0.9.1",
@@ -53,0 +53,0 @@ "graphql-language-service": "^5.2.1",

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

Worsened metrics

Total package byte prevSize

13503519

decreased by-0.36%

Lines of code

170019

decreased by-0.58%

Dependency changes

• + Added@graphiql/react@0.23.1(transitive)

• - Removed@graphiql/react@0.22.4(transitive)

• Updated@graphiql/react@^0.23.0-canary-5b09c3aa.0