implement ToolbarListbox in new design

.changeset/five-pillows-fail.md

@@ -5,6 +5,6 @@
 Add new components:
 - UI components (`Button`, `ButtonGroup`, `Dialog`, `Menu`, `Spinner`, `Tab`, `Tabs`, `UnStyledButton` and lots of icon components)
 - Editor components (`QueryEditor`, `VariableEditor`, `HeaderEditor` and `ResponseEditor`)
-- Toolbar components (`ExecuteButton`, `ToolbarButton` and `ToolbarMenu`)
+- Toolbar components (`ExecuteButton`, `ToolbarButton`, `ToolbarMenu` and `ToolbarSelect`)
 - Docs components (`Argument`, `DefaultValue`, `DeprecationReason`, `Directive`, `DocExplorer`, `ExplorerSection`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
 - `History` component

.changeset/red-zoos-divide.md

@@ -7,3 +7,5 @@ BREAKING: The following exports of the `graphiql` package have been removed:
   - The `schema` prop has been removed, the component now uses the schema provided by the `ExplorerContext`
 - `ToolbarMenu`: Now exported from `@graphiql/react` as `ToolbarMenu`
 - `ToolbarMenuItem`: Now exported from `@graphiql/react` as `ToolbarMenu.Item`
+- `ToolbarSelect`: Now exported from `@graphiql/react` as `ToolbarListbox`
+- `ToolbarSelectOption`: Now exported from `@graphiql/react` as `ToolbarListbox.Option`

custom-words.txt

@@ -118,6 +118,7 @@ languageservice
 linenumber
 linenumbers
 linkify
+listbox
 listvalues
 matchingbracket
 modulemap

packages/graphiql-react/package.json

@@ -40,6 +40,7 @@
     "@graphiql/toolkit": "^1.0.0-next.1",
     "@reach/combobox": "^0.17.0",
     "@reach/dialog": "^0.17.0",
+    "@reach/listbox": "^0.17.0",
     "@reach/menu-button": "^0.17.0",
     "@reach/visually-hidden": "^0.17.0",
     "codemirror": "^5.65.3",

packages/graphiql-react/src/index.ts

@@ -45,7 +45,6 @@ export {
   HistoryContextProvider,
   useHistoryContext,
 } from './history';
-export * from './icons';
 export {
   SchemaContext,
   SchemaContextProvider,
@@ -57,10 +56,12 @@ export {
   useStorageContext,
 } from './storage';
 export { useTheme } from './theme';
-export * from './toolbar';
-export * from './ui';
 export { useDragResize } from './utility/resize';
 
+export * from './icons';
+export * from './ui';
+export * from './toolbar';
+
 export type {
   EditorContextType,
   ResponseTooltipType,

packages/graphiql-react/src/toolbar/execute.css

@@ -2,7 +2,7 @@
   position: relative;
 }
 
-.graphiql-execute-button {
+button.graphiql-execute-button {
   background-color: var(--color-pink);
   border: none;
   border-radius: var(--border-radius-8);

packages/graphiql-react/src/toolbar/index.ts

@@ -1,3 +1,4 @@
 export * from './button';
 export * from './execute';
+export * from './listbox';
 export * from './menu';

packages/graphiql-react/src/toolbar/listbox.css

@@ -0,0 +1,5 @@
+.graphiql-toolbar-listbox {
+  display: block;
+  height: var(--toolbar-width);
+  width: var(--toolbar-width);
+}

packages/graphiql-react/src/toolbar/listbox.tsx

@@ -0,0 +1,28 @@
+import { ComponentProps, forwardRef, ReactNode } from 'react';
+import { Listbox } from '../ui';
+import { createComponentGroup } from '../utility/component-group';
+import { compose } from '../utility/compose';
+
+import './listbox.css';
+
+type ToolbarListboxProps = {
+  button: ReactNode;
+};
+
+const ToolbarListboxRoot = forwardRef<
+  HTMLDivElement,
+  ToolbarListboxProps & ComponentProps<typeof Listbox.Input>
+>(({ button, children, ...props }, ref) => (
+  <Listbox.Input
+    {...props}
+    ref={ref}
+    className={compose('graphiql-toolbar-listbox', props.className)}>
+    <Listbox.Button>{button}</Listbox.Button>
+    <Listbox.Popover>{children}</Listbox.Popover>
+  </Listbox.Input>
+));
+ToolbarListboxRoot.displayName = 'ToolbarListbox';
+
+export const ToolbarListbox = createComponentGroup(ToolbarListboxRoot, {
+  Option: Listbox.Option,
+});

packages/graphiql-react/src/ui/button.css

@@ -1,3 +1,4 @@
+.graphiql-un-styled,
 button.graphiql-un-styled {
   all: unset;
   border-radius: var(--border-radius-4);
@@ -12,6 +13,7 @@ button.graphiql-un-styled {
   }
 }
 
+.graphiql-button,
 button.graphiql-button {
   background-color: var(--color-neutral-7);
   border: none;

packages/graphiql-react/src/ui/menu.css → packages/graphiql-react/src/ui/dropdown.css

@@ -1,5 +1,7 @@
+@import url('@reach/listbox/styles.css');
 @import url('@reach/menu-button/styles.css');
 
+[data-reach-listbox-popover],
 [data-reach-menu-list] {
   background-color: var(--color-neutral-0);
   box-shadow: var(--box-shadow);
@@ -10,6 +12,7 @@
   padding: var(--px-4);
 }
 
+[data-reach-listbox-option],
 [data-reach-menu-item] {
   border-radius: var(--border-radius-4);
   font-size: inherit;
@@ -20,6 +23,7 @@
   white-space: nowrap;
 
   &[data-selected],
+  &[data-current-nav],
   &:hover {
     background-color: var(--color-neutral-7);
     color: inherit;
@@ -29,3 +33,9 @@
     margin-top: 0;
   }
 }
+
+[data-reach-listbox-button] {
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}

packages/graphiql-react/src/ui/dropdown.tsx

@@ -0,0 +1,55 @@
+import {
+  Listbox as ListboxRoot,
+  ListboxButton as ReachListboxButton,
+  ListboxInput,
+  ListboxOption,
+  ListboxPopover,
+} from '@reach/listbox';
+import {
+  Menu as MenuRoot,
+  MenuButton as ReachMenuButton,
+  MenuItem,
+  MenuList,
+} from '@reach/menu-button';
+import { ComponentProps, forwardRef } from 'react';
+import { createComponentGroup } from '../utility/component-group';
+import { compose } from '../utility/compose';
+
+import './dropdown.css';
+
+const MenuButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps<typeof ReachMenuButton>
+>((props, ref) => (
+  <ReachMenuButton
+    {...props}
+    ref={ref}
+    className={compose('graphiql-un-styled', props.className)}
+  />
+));
+MenuButton.displayName = 'MenuButton';
+
+export const Menu = createComponentGroup(MenuRoot, {
+  Button: MenuButton,
+  Item: MenuItem,
+  List: MenuList,
+});
+
+const ListboxButton = forwardRef<
+  HTMLDivElement,
+  ComponentProps<typeof ReachListboxButton>
+>((props, ref) => (
+  <ReachListboxButton
+    {...props}
+    ref={ref}
+    className={compose('graphiql-un-styled', props.className)}
+  />
+));
+ListboxButton.displayName = 'ListboxButton';
+
+export const Listbox = createComponentGroup(ListboxRoot, {
+  Button: ListboxButton,
+  Input: ListboxInput,
+  Option: ListboxOption,
+  Popover: ListboxPopover,
+});

packages/graphiql-react/src/ui/index.ts

@@ -1,7 +1,7 @@
 export * from './button';
 export * from './button-group';
 export * from './dialog';
-export * from './menu';
+export * from './dropdown';
 export * from './markdown';
 export * from './spinner';
 export * from './tabs';