From c51250fd46cc84f3d043c90a9af6d0a7915af9d6 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Thu, 21 Sep 2023 14:34:42 +0200
Subject: [PATCH] Create SelectNext component replacing Select

---
 src/components/input/Select.tsx               |   1 +
 src/components/input/SelectContext.ts         |  10 +
 src/components/input/SelectNext.tsx           | 195 ++++++++++
 src/components/input/index.ts                 |   2 +
 src/components/input/test/SelectNext-test.js  | 220 +++++++++++
 src/index.ts                                  |   2 +
 .../components/patterns/input/SelectPage.tsx  |  16 +-
 .../patterns/prototype/SelectNextPage.tsx     | 344 ++++++++++++++++++
 src/pattern-library/routes.ts                 |   7 +
 9 files changed, 793 insertions(+), 4 deletions(-)
 create mode 100644 src/components/input/SelectContext.ts
 create mode 100644 src/components/input/SelectNext.tsx
 create mode 100644 src/components/input/test/SelectNext-test.js
 create mode 100644 src/pattern-library/components/patterns/prototype/SelectNextPage.tsx

diff --git a/src/components/input/Select.tsx b/src/components/input/Select.tsx
index 2344ec1d6..db32bab64 100644
--- a/src/components/input/Select.tsx
+++ b/src/components/input/Select.tsx
@@ -23,6 +23,7 @@ const arrowImage = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000
 
 /**
  * Style a native `<select>` element.
+ * @deprecated Use SelectNext instead
  */
 export default function Select({
   children,
diff --git a/src/components/input/SelectContext.ts b/src/components/input/SelectContext.ts
new file mode 100644
index 000000000..5d5cafc9f
--- /dev/null
+++ b/src/components/input/SelectContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'preact';
+
+export type SelectContextType<T = unknown> = {
+  selectValue: (newValue: T) => void;
+  value: T;
+};
+
+const SelectContext = createContext<SelectContextType | null>(null);
+
+export default SelectContext;
diff --git a/src/components/input/SelectNext.tsx b/src/components/input/SelectNext.tsx
new file mode 100644
index 000000000..952af4ed8
--- /dev/null
+++ b/src/components/input/SelectNext.tsx
@@ -0,0 +1,195 @@
+import classnames from 'classnames';
+import type { ComponentChildren } from 'preact';
+import {
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'preact/hooks';
+
+import { useArrowKeyNavigation } from '../../hooks/use-arrow-key-navigation';
+import { useClickAway } from '../../hooks/use-click-away';
+import { useKeyPress } from '../../hooks/use-key-press';
+import { useSyncedRef } from '../../hooks/use-synced-ref';
+import type { PresentationalProps } from '../../types';
+import { MenuCollapseIcon, MenuExpandIcon } from '../icons';
+import Button from './Button';
+import SelectContext from './SelectContext';
+
+export type SelectOptionStatus = {
+  selected: boolean;
+  disabled: boolean;
+};
+
+export type SelectOptionProps<T> = {
+  value: T;
+  disabled?: boolean;
+  children: (status: SelectOptionStatus) => ComponentChildren;
+  classes?: string | string[];
+};
+
+function SelectOption<T>({
+  value,
+  children,
+  disabled = false,
+  classes,
+}: SelectOptionProps<T>) {
+  const selectContext = useContext(SelectContext);
+  if (!selectContext) {
+    throw new Error('Select.Option can only be used as Select child');
+  }
+
+  const { selectValue, value: currentValue } = selectContext;
+  const selected = !disabled && currentValue === value;
+
+  return (
+    <Button
+      variant="custom"
+      classes={classnames(
+        'w-full ring-inset rounded-none !p-0',
+        'border-t first:border-t-0 bg-transparent',
+        { 'hover:bg-grey-1': !disabled },
+        classes,
+      )}
+      onClick={() => selectValue(value)}
+      role="option"
+      disabled={disabled}
+      aria-selected={selected}
+      // This is intended to be focused with arrow keys
+      tabIndex={-1}
+    >
+      <div
+        className={classnames('flex w-full p-1.5 border-l-4', {
+          'border-l-transparent': !selected,
+          'border-l-brand font-medium': selected,
+        })}
+      >
+        {children({ selected, disabled })}
+      </div>
+    </Button>
+  );
+}
+
+export type SelectProps<T> = PresentationalProps & {
+  value: T;
+  onChange: (newValue: T) => void;
+  label: ComponentChildren;
+  disabled?: boolean;
+};
+
+function SelectMain<T>({
+  label,
+  value,
+  onChange,
+  children,
+  disabled,
+  classes,
+  elementRef,
+}: SelectProps<T>) {
+  const [isListboxOpen, setIsListboxOpen] = useState(false);
+  const [shouldListboxDropUp, setShouldListboxDropUp] = useState(false);
+  const closeListbox = useCallback(() => setIsListboxOpen(false), []);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const listboxRef = useRef<HTMLDivElement | null>(null);
+  const listboxId = useId();
+  const buttonRef = useSyncedRef(elementRef);
+  const buttonId = useId();
+
+  const selectValue = useCallback(
+    (newValue: unknown) => {
+      onChange(newValue as T);
+      closeListbox();
+    },
+    [closeListbox, onChange],
+  );
+
+  // When clicking away or pressing `Esc`, close the listbox
+  useClickAway(wrapperRef, closeListbox);
+  useKeyPress(['Escape'], closeListbox);
+
+  // Vertical arrow key for options in the listbox
+  useArrowKeyNavigation(wrapperRef, { horizontal: false });
+
+  useLayoutEffect(() => {
+    if (!isListboxOpen) {
+      // Focus button after closing listbox
+      buttonRef.current!.focus();
+      // Reset shouldDropUp so that it does not affect calculations next time
+      // it opens
+      setShouldListboxDropUp(false);
+    } else {
+      const viewportHeight = window.innerHeight;
+      const { top: buttonDistanceToTop, bottom: buttonBottom } =
+        buttonRef.current!.getBoundingClientRect();
+      const buttonDistanceToBottom = viewportHeight - buttonBottom;
+      const { bottom: listboxBottom } =
+        listboxRef.current!.getBoundingClientRect();
+      const listboxDistanceToBottom = viewportHeight - listboxBottom;
+
+      // The listbox should drop up only if there's not enough space below it for
+      // the listbox max height, and there's also more space above
+      setShouldListboxDropUp(
+        listboxDistanceToBottom < 0 &&
+          buttonDistanceToTop > buttonDistanceToBottom,
+      );
+    }
+  }, [buttonRef, isListboxOpen]);
+
+  return (
+    <div className="relative" ref={wrapperRef}>
+      <Button
+        id={buttonId}
+        variant="custom"
+        classes={classnames(
+          'w-full flex border',
+          'bg-grey-0 disabled:bg-grey-1 disabled:text-grey-6',
+          classes,
+        )}
+        expanded={isListboxOpen}
+        pressed={isListboxOpen}
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-controls={listboxId}
+        elementRef={buttonRef}
+        onClick={() => setIsListboxOpen(prev => !prev)}
+        onKeyDown={e => {
+          if (e.key === 'ArrowDown' && !isListboxOpen) {
+            setIsListboxOpen(true);
+          }
+        }}
+        data-testid="select-toggle-button"
+      >
+        {label}
+        <div className="grow" />
+        {isListboxOpen ? <MenuCollapseIcon /> : <MenuExpandIcon />}
+      </Button>
+      <SelectContext.Provider value={{ selectValue, value }}>
+        <div
+          className={classnames(
+            'absolute z-5 w-full max-h-80 overflow-y-auto',
+            'rounded border bg-white shadow hover:shadow-md focus-within:shadow-md',
+            {
+              'top-full mt-1': !shouldListboxDropUp,
+              'bottom-full mb-1': shouldListboxDropUp,
+              hidden: !isListboxOpen,
+            },
+          )}
+          role="listbox"
+          ref={listboxRef}
+          id={listboxId}
+          aria-labelledby={buttonId}
+          aria-orientation="vertical"
+          data-testid="select-listbox"
+        >
+          {children}
+        </div>
+      </SelectContext.Provider>
+    </div>
+  );
+}
+
+const SelectNext = Object.assign(SelectMain, { Option: SelectOption });
+
+export default SelectNext;
diff --git a/src/components/input/index.ts b/src/components/input/index.ts
index d87804106..26fa9e571 100644
--- a/src/components/input/index.ts
+++ b/src/components/input/index.ts
@@ -7,6 +7,7 @@ export { default as Input } from './Input';
 export { default as InputGroup } from './InputGroup';
 export { default as OptionButton } from './OptionButton';
 export { default as Select } from './Select';
+export { default as SelectNext } from './SelectNext';
 export { default as Textarea } from './Textarea';
 
 export type { ButtonProps } from './Button';
@@ -18,4 +19,5 @@ export type { InputProps } from './Input';
 export type { InputGroupProps } from './InputGroup';
 export type { OptionButtonProps } from './OptionButton';
 export type { SelectProps } from './Select';
+export type { SelectProps as SelectNextProps } from './SelectNext';
 export type { TextareaProps } from './Textarea';
diff --git a/src/components/input/test/SelectNext-test.js b/src/components/input/test/SelectNext-test.js
new file mode 100644
index 000000000..943cf5785
--- /dev/null
+++ b/src/components/input/test/SelectNext-test.js
@@ -0,0 +1,220 @@
+import { mount } from 'enzyme';
+
+import { checkAccessibility } from '../../../../test/util/accessibility.js';
+import SelectNext from '../SelectNext';
+
+describe('SelectNext', () => {
+  let wrappers;
+  const items = [
+    { id: '1', name: 'All students' },
+    { id: '2', name: 'Albert Banana' },
+    { id: '3', name: 'Bernard California' },
+    { id: '4', name: 'Cecelia Davenport' },
+    { id: '5', name: 'Doris Evanescence' },
+  ];
+
+  const createComponent = (props = {}, paddingTop = 0) => {
+    const container = document.createElement('div');
+    container.style.paddingTop = `${paddingTop}px`;
+    document.body.append(container);
+
+    const wrapper = mount(
+      <SelectNext value={undefined} onChange={sinon.stub()} label="" {...props}>
+        {items.map(item => (
+          <SelectNext.Option
+            value={item}
+            disabled={item.id === '4'}
+            key={item.id}
+          >
+            {({ selected, disabled }) => (
+              <span data-testid={`option-${item.id}`}>
+                {item.name}
+                {selected && <span data-testid="selected-option" />}
+                {disabled && <span data-testid="disabled-option" />}
+              </span>
+            )}
+          </SelectNext.Option>
+        ))}
+      </SelectNext>,
+      { attachTo: container },
+    );
+
+    wrappers.push(wrapper);
+
+    return wrapper;
+  };
+
+  beforeEach(() => {
+    wrappers = [];
+  });
+
+  afterEach(() => {
+    wrappers.forEach(wrapper => wrapper.unmount());
+  });
+
+  const getToggleButton = wrapper =>
+    wrapper.find('button[data-testid="select-toggle-button"]');
+
+  const toggleListbox = wrapper => getToggleButton(wrapper).simulate('click');
+
+  const getListbox = wrapper => wrapper.find('[data-testid="select-listbox"]');
+
+  const isListboxClosed = wrapper =>
+    getListbox(wrapper).prop('className').includes('hidden');
+
+  const listboxDidDropUp = wrapper =>
+    getListbox(wrapper).prop('className').includes('bottom-full');
+
+  it('changes selected value when an option is clicked', () => {
+    const onChange = sinon.stub();
+    const wrapper = createComponent({ onChange });
+
+    wrapper.find('[data-testid="option-3"]').simulate('click');
+    assert.calledWith(onChange.lastCall, items[2]);
+
+    wrapper.find('[data-testid="option-5"]').simulate('click');
+    assert.calledWith(onChange.lastCall, items[4]);
+
+    wrapper.find('[data-testid="option-1"]').simulate('click');
+    assert.calledWith(onChange.lastCall, items[0]);
+  });
+
+  it('marks the right item as selected', () => {
+    const wrapper = createComponent({ value: items[2] });
+    const isOptionSelected = id =>
+      wrapper
+        .find(`[data-testid="option-${id}"]`)
+        .exists('[data-testid="selected-option"]');
+
+    assert.isFalse(isOptionSelected(1));
+    assert.isFalse(isOptionSelected(2));
+    assert.isTrue(isOptionSelected(3));
+    assert.isFalse(isOptionSelected(4));
+    assert.isFalse(isOptionSelected(5));
+  });
+
+  it('marks the right item as disabled', () => {
+    const wrapper = createComponent();
+    const isOptionDisabled = id =>
+      wrapper
+        .find(`[data-testid="option-${id}"]`)
+        .exists('[data-testid="disabled-option"]');
+
+    assert.isFalse(isOptionDisabled(1));
+    assert.isFalse(isOptionDisabled(2));
+    assert.isFalse(isOptionDisabled(3));
+    assert.isTrue(isOptionDisabled(4));
+    assert.isFalse(isOptionDisabled(5));
+  });
+
+  it('toggles listbox when button is clicked', () => {
+    const wrapper = createComponent();
+
+    assert.isTrue(isListboxClosed(wrapper));
+    toggleListbox(wrapper);
+    assert.isFalse(isListboxClosed(wrapper));
+  });
+
+  it('closes listbox when Escape is pressed', () => {
+    const wrapper = createComponent();
+
+    toggleListbox(wrapper);
+    assert.isFalse(isListboxClosed(wrapper));
+
+    document.body.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape' }),
+    );
+    wrapper.update();
+
+    // Listbox is closed after `Escape` is pressed
+    assert.isTrue(isListboxClosed(wrapper));
+  });
+
+  it('closes listbox when clicking away', () => {
+    const wrapper = createComponent();
+
+    toggleListbox(wrapper);
+    assert.isFalse(isListboxClosed(wrapper));
+
+    const externalButton = document.createElement('button');
+    document.body.append(externalButton);
+
+    externalButton.click();
+    wrapper.update();
+
+    try {
+      // Listbox is closed after other element is clicked
+      assert.isTrue(isListboxClosed(wrapper));
+    } finally {
+      externalButton.remove();
+    }
+  });
+
+  it('restores focus to toggle button after closing listbox', () => {
+    const wrapper = createComponent();
+    toggleListbox(wrapper);
+
+    // Focus body before closing listbox
+    document.body.focus();
+    toggleListbox(wrapper);
+    wrapper.update();
+
+    assert.equal(document.activeElement, getToggleButton(wrapper).getDOMNode());
+  });
+
+  it('displays listbox when ArrowDown is pressed on toggle', () => {
+    const wrapper = createComponent();
+
+    assert.isTrue(isListboxClosed(wrapper));
+
+    getToggleButton(wrapper)
+      .getDOMNode()
+      .dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+    wrapper.update();
+
+    assert.isFalse(isListboxClosed(wrapper));
+  });
+
+  [
+    { windowHeight: 10000, containerPaddingTop: 0, shouldDropUp: false },
+    { windowHeight: 200, containerPaddingTop: 1000, shouldDropUp: true },
+  ].forEach(({ windowHeight, containerPaddingTop, shouldDropUp }) => {
+    it('makes listbox drop up or down based on available space below', () => {
+      window.innerHeight = windowHeight;
+
+      const wrapper = createComponent({}, containerPaddingTop);
+      toggleListbox(wrapper);
+
+      assert.equal(listboxDidDropUp(wrapper), shouldDropUp);
+    });
+  });
+
+  context('when Option is rendered outside of SelectNext', () => {
+    it('throws an error', () => {
+      assert.throws(
+        () =>
+          mount(<SelectNext.Option value="1">{() => '1'}</SelectNext.Option>),
+        'Select.Option can only be used as Select child',
+      );
+    });
+  });
+
+  it(
+    'should pass a11y checks',
+    checkAccessibility([
+      {
+        name: 'Closed Select listbox',
+        content: () => createComponent({ label: 'Select' }),
+      },
+      {
+        name: 'Open Select listbox',
+        content: () => {
+          const wrapper = createComponent({ label: 'Select' });
+          toggleListbox(wrapper);
+
+          return wrapper;
+        },
+      },
+    ]),
+  );
+});
diff --git a/src/index.ts b/src/index.ts
index ca3eccdf2..5046096fe 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -43,6 +43,7 @@ export {
   InputGroup,
   OptionButton,
   Select,
+  SelectNext,
   Textarea,
 } from './components/input';
 export {
@@ -108,6 +109,7 @@ export type {
   InputGroupProps,
   OptionButtonProps,
   SelectProps,
+  SelectNextProps,
   TextareaProps,
 } from './components/input';
 
diff --git a/src/pattern-library/components/patterns/input/SelectPage.tsx b/src/pattern-library/components/patterns/input/SelectPage.tsx
index 7b44e3edb..19d21cbba 100644
--- a/src/pattern-library/components/patterns/input/SelectPage.tsx
+++ b/src/pattern-library/components/patterns/input/SelectPage.tsx
@@ -26,10 +26,18 @@ export default function SelectPage() {
     <Library.Page
       title="Select"
       intro={
-        <p>
-          <code>Select</code> is a presentational component that styles native{' '}
-          <code>{'<select>'}</code> elements.
-        </p>
+        <>
+          <p>
+            <code>Select</code> is a presentational component that styles native{' '}
+            <code>{'<select>'}</code> elements.
+          </p>
+          <p>
+            <code>Select</code> is <Library.StatusChip status="deprecated" />,
+            use{' '}
+            <Library.Link href="/input-select-next">SelectNext</Library.Link>{' '}
+            instead.
+          </p>
+        </>
       }
     >
       <Library.Section>
diff --git a/src/pattern-library/components/patterns/prototype/SelectNextPage.tsx b/src/pattern-library/components/patterns/prototype/SelectNextPage.tsx
new file mode 100644
index 000000000..cfd39b157
--- /dev/null
+++ b/src/pattern-library/components/patterns/prototype/SelectNextPage.tsx
@@ -0,0 +1,344 @@
+import classnames from 'classnames';
+import { useCallback, useMemo, useState } from 'preact/hooks';
+
+import { ArrowLeftIcon, ArrowRightIcon } from '../../../../components/icons';
+import { IconButton, InputGroup } from '../../../../components/input';
+import Select from '../../../../components/input/SelectNext';
+import Library from '../../Library';
+
+const items = [
+  { id: '1', name: 'All students' },
+  { id: '2', name: 'Albert Banana' },
+  { id: '3', name: 'Bernard California' },
+  { id: '4', name: 'Cecelia Davenport' },
+  { id: '5', name: 'Doris Evanescence' },
+];
+
+function Select_({
+  disabled,
+  textOnly,
+  theItems = items,
+}: {
+  disabled?: boolean;
+  textOnly?: boolean;
+  theItems?: typeof items;
+}) {
+  const [value, setValue] = useState<(typeof theItems)[number]>();
+
+  return (
+    <Select
+      value={value}
+      onChange={setValue}
+      label={
+        value ? (
+          <>
+            {value.name}
+            {!textOnly && (
+              <div className="rounded px-2 bg-grey-7 text-white">
+                {value.id}
+              </div>
+            )}
+          </>
+        ) : disabled ? (
+          <>This is disabled</>
+        ) : (
+          <>Select one...</>
+        )
+      }
+      disabled={disabled}
+    >
+      {theItems.map(item => (
+        <Select.Option value={item} key={item.id}>
+          {() =>
+            textOnly ? (
+              <>{item.name}</>
+            ) : (
+              <>
+                {item.name}
+                <div className="grow" />
+                <div className="rounded px-2 bg-grey-7 text-white">
+                  {item.id}
+                </div>
+              </>
+            )
+          }
+        </Select.Option>
+      ))}
+    </Select>
+  );
+}
+
+function InputGroupSelect_() {
+  const [selected, setSelected] = useState<(typeof items)[number]>();
+  const selectedIndex = useMemo(
+    () => (!selected ? -1 : items.findIndex(item => item === selected)),
+    [selected],
+  );
+  const next = useCallback(() => {
+    const newIndex = selectedIndex + 1;
+    setSelected(
+      (items[newIndex]?.id === '4' ? items[newIndex + 1] : items[newIndex]) ??
+        selected,
+    );
+  }, [selected, selectedIndex]);
+  const previous = useCallback(() => {
+    const newIndex = selectedIndex - 1;
+    setSelected(
+      (items[newIndex]?.id === '4' ? items[newIndex - 1] : items[newIndex]) ??
+        selected,
+    );
+  }, [selected, selectedIndex]);
+
+  return (
+    <InputGroup>
+      <IconButton
+        icon={ArrowLeftIcon}
+        title="Previous student"
+        variant="dark"
+        onClick={previous}
+        disabled={selectedIndex <= 0}
+      />
+      <div className="w-full">
+        <Select
+          value={selected}
+          onChange={setSelected}
+          label={
+            selected ? (
+              <>
+                {selected.name}
+                <div className="rounded px-2 bg-grey-7 text-white">
+                  {selected.id}
+                </div>
+              </>
+            ) : (
+              <>Select one...</>
+            )
+          }
+        >
+          {items.map(item => (
+            <Select.Option
+              value={item}
+              key={item.id}
+              disabled={item.id === '4'}
+            >
+              {({ disabled }) => (
+                <>
+                  <span
+                    className={
+                      disabled ? 'line-through text-grey-6' : undefined
+                    }
+                  >
+                    {item.name}
+                  </span>
+                  <div className="grow" />
+                  <div
+                    className={classnames('rounded px-2 text-white', {
+                      'bg-grey-7': !disabled,
+                      'bg-grey-4': disabled,
+                    })}
+                  >
+                    {item.id}
+                  </div>
+                </>
+              )}
+            </Select.Option>
+          ))}
+        </Select>
+      </div>
+      <IconButton
+        icon={ArrowRightIcon}
+        title="Next student"
+        variant="dark"
+        onClick={next}
+        disabled={selectedIndex >= items.length - 1}
+      />
+    </InputGroup>
+  );
+}
+
+export default function SelectNextPage() {
+  return (
+    <Library.Page
+      title="SelectNext"
+      intro={
+        <p>
+          <code>SelectNext</code> is a presentational component which behaves
+          like the native <code>{'<select>'}</code> element.
+        </p>
+      }
+    >
+      <Library.Section>
+        <Library.Pattern>
+          <Library.Usage componentName="SelectNext" />
+
+          <Library.Example>
+            <Library.Demo title="Basic Select">
+              <div className="w-[350px] mx-auto">
+                <Select_ textOnly />
+              </div>
+            </Library.Demo>
+          </Library.Example>
+        </Library.Pattern>
+
+        <Library.Pattern title="Working with SelectNext">
+          <p>
+            <code>SelectNext</code> toggles a listbox where <code>Options</code>
+            {"'"} UI can be customized and values can be objects.
+          </p>
+
+          <Library.Example title="Composing and styling Selects">
+            <Library.Demo title="Select with custom Options">
+              <div className="w-96">
+                <Select_ />
+              </div>
+            </Library.Demo>
+
+            <Library.Demo title="Select in InputGroup">
+              <div className="w-96">
+                <InputGroupSelect_ />
+              </div>
+            </Library.Demo>
+          </Library.Example>
+
+          <Library.Example title="Select with many options">
+            <Library.Demo title="Select with many options">
+              <div className="w-[350px] mx-auto">
+                <Select_
+                  theItems={[
+                    ...items.map(({ id, name }) => ({
+                      id: `1${id}`,
+                      name: `1 ${name}`,
+                    })),
+                    ...items.map(({ id, name }) => ({
+                      id: `2${id}`,
+                      name: `2 ${name}`,
+                    })),
+                    ...items.map(({ id, name }) => ({
+                      id: `3${id}`,
+                      name: `3 ${name}`,
+                    })),
+                    ...items.map(({ id, name }) => ({
+                      id: `4${id}`,
+                      name: `4 ${name}`,
+                    })),
+                    ...items.map(({ id, name }) => ({
+                      id: `5${id}`,
+                      name: `5 ${name}`,
+                    })),
+                    ...items.map(({ id, name }) => ({
+                      id: `6${id}`,
+                      name: `6 ${name}`,
+                    })),
+                  ]}
+                />
+              </div>
+            </Library.Demo>
+          </Library.Example>
+
+          <Library.Example title="Disabled Select">
+            <Library.Demo title="Disabled Select">
+              <div className="w-[350px] mx-auto">
+                <Select_ disabled />
+              </div>
+            </Library.Demo>
+          </Library.Example>
+        </Library.Pattern>
+
+        <Library.Pattern title="Component API">
+          <code>SelectNext</code> accepts all standard{' '}
+          <Library.Link href="/using-components#presentational-components-api">
+            presentational component props
+          </Library.Link>
+          <Library.Example title="label">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                The content to be displayed in the toggle button.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>ComponentChildren</code>
+              </Library.InfoItem>
+            </Library.Info>
+          </Library.Example>
+          <Library.Example title="value">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                Represents currently selected Option.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>T</code>
+              </Library.InfoItem>
+            </Library.Info>
+          </Library.Example>
+          <Library.Example title="onChange">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                A callback invoked every time selected value changes.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>(newValue: T) =&gt; void</code>
+              </Library.InfoItem>
+            </Library.Info>
+          </Library.Example>
+          <Library.Example title="disabled">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                Whether the Select is disabled or not.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>boolean</code>
+              </Library.InfoItem>
+              <Library.InfoItem label="default">
+                <code>undefined</code>
+              </Library.InfoItem>
+            </Library.Info>
+          </Library.Example>
+        </Library.Pattern>
+
+        <Library.Pattern title="How to use it">
+          <p>
+            <code>SelectNext</code> is meant to be used as a controlled
+            component.
+          </p>
+
+          <Library.Code
+            content={`function App() {
+  const [value, setSelected] = useState<{ id: string; name: string }>();
+  return (
+    <SelectNext
+      value={value}
+      onChange={setSelected}
+      label={
+        value ? (
+          <>
+            {value.name}
+            <div className="rounded px-2 bg-grey-7 text-white">
+              {value.id}
+            </div>
+          </>
+        ) : (
+          <>Select one...</>
+        )
+      }
+    >
+      {items.map(item => (
+        <SelectNext.Option value={item} key={item.id}>
+          {() => (
+            <>
+              {item.name}
+              <div className="grow" />
+              <div className="rounded px-2 bg-grey-7 text-white">
+                {item.id}
+              </div>
+            </>
+          )}
+        </SelectNext.Option>
+      ))}
+    </SelectNext>
+  );
+}`}
+          />
+        </Library.Pattern>
+      </Library.Section>
+    </Library.Page>
+  );
+}
diff --git a/src/pattern-library/routes.ts b/src/pattern-library/routes.ts
index 5854f20b1..3de50d065 100644
--- a/src/pattern-library/routes.ts
+++ b/src/pattern-library/routes.ts
@@ -32,6 +32,7 @@ import PointerButtonPage from './components/patterns/navigation/PointerButtonPag
 import TabPage from './components/patterns/navigation/TabPage';
 import LMSContentButtonPage from './components/patterns/prototype/LMSContentButtonPage';
 import LMSContentSelectionPage from './components/patterns/prototype/LMSContentSelectionPage';
+import SelectNextPage from './components/patterns/prototype/SelectNextPage';
 import SharedAnnotationsPage from './components/patterns/prototype/SharedAnnotationsPage';
 import TabbedDialogPage from './components/patterns/prototype/TabbedDialogPage';
 import SliderPage from './components/patterns/transition/SliderPage';
@@ -195,6 +196,12 @@ const routes: PlaygroundRoute[] = [
     component: OptionButtonPage,
     route: '/input-option-button',
   },
+  {
+    title: 'SelectNext',
+    group: 'input',
+    component: SelectNextPage,
+    route: '/input-select-next',
+  },
   {
     title: 'Select',
     group: 'input',