Improve SelectNext props API

Author: acelaya

src/components/input/SelectNext.tsx

@@ -110,26 +110,37 @@ function useShouldDropUp(
 export type SelectProps<T> = PresentationalProps & {
   value: T;
   onChange: (newValue: T) => void;
-  label: ComponentChildren;
+  buttonContent?: ComponentChildren;
   disabled?: boolean;
+
+  /**
+   * `id` attribute for the toggle button. This is useful to associate a label
+   * with the control.
+   */
+  buttonId?: string;
+
+  /** @deprecated Use buttonContent instead */
+  label?: ComponentChildren;
 };
 
 function SelectMain<T>({
+  buttonContent,
   label,
   value,
   onChange,
   children,
   disabled,
-  classes,
   elementRef,
+  classes,
+  buttonId,
 }: SelectProps<T>) {
   const [listboxOpen, setListboxOpen] = useState(false);
   const closeListbox = useCallback(() => setListboxOpen(false), []);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const listboxRef = useRef<HTMLDivElement | null>(null);
   const listboxId = useId();
   const buttonRef = useSyncedRef(elementRef);
-  const buttonId = useId();
+  const defaultButtonId = useId();
   const shouldListboxDropUp = useShouldDropUp(
     buttonRef,
     listboxRef,
@@ -168,7 +179,7 @@ function SelectMain<T>({
   return (
     <div className="relative" ref={wrapperRef}>
       <Button
-        id={buttonId}
+        id={buttonId ?? defaultButtonId}
         variant="custom"
         classes={classnames(
           'w-full flex border rounded',
@@ -183,12 +194,13 @@ function SelectMain<T>({
         onClick={() => setListboxOpen(prev => !prev)}
         onKeyDown={e => {
           if (e.key === 'ArrowDown' && !listboxOpen) {
+            e.preventDefault();
             setListboxOpen(true);
           }
         }}
         data-testid="select-toggle-button"
       >
-        {label}
+        {buttonContent ?? label}
         <div className="grow" />
         <div className="text-grey-6">
           {listboxOpen ? <MenuCollapseIcon /> : <MenuExpandIcon />}
@@ -212,7 +224,7 @@ function SelectMain<T>({
           role="listbox"
           ref={listboxRef}
           id={listboxId}
-          aria-labelledby={buttonId}
+          aria-labelledby={buttonId ?? defaultButtonId}
           aria-orientation="vertical"
           data-testid="select-listbox"
         >

src/components/input/test/SelectNext-test.js

@@ -19,7 +19,7 @@ describe('SelectNext', () => {
     document.body.append(container);
 
     const wrapper = mount(
-      <SelectNext value={undefined} onChange={sinon.stub()} label="" {...props}>
+      <SelectNext value={undefined} onChange={sinon.stub()} {...props}>
         {items.map(item => (
           <SelectNext.Option
             value={item}
@@ -225,12 +225,12 @@ describe('SelectNext', () => {
     checkAccessibility([
       {
         name: 'Closed Select listbox',
-        content: () => createComponent({ label: 'Select' }),
+        content: () => createComponent({ buttonContent: 'Select' }),
       },
       {
         name: 'Open Select listbox',
         content: () => {
-          const wrapper = createComponent({ label: 'Select' });
+          const wrapper = createComponent({ buttonContent: 'Select' });
           toggleListbox(wrapper);
 
           return wrapper;

src/pattern-library/components/patterns/prototype/SelectNextPage.tsx

@@ -3,7 +3,7 @@ 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 SelectNext from '../../../../components/input/SelectNext';
 import Library from '../../Library';
 
 const defaultItems = [
@@ -26,10 +26,10 @@ function SelectExample({
   const [value, setValue] = useState<(typeof items)[number]>();
 
   return (
-    <Select
+    <SelectNext
       value={value}
       onChange={setValue}
-      label={
+      buttonContent={
         value ? (
           <>
             {value.name}
@@ -48,7 +48,7 @@ function SelectExample({
       disabled={disabled}
     >
       {items.map(item => (
-        <Select.Option value={item} key={item.id}>
+        <SelectNext.Option value={item} key={item.id}>
           {() =>
             textOnly ? (
               <>{item.name}</>
@@ -62,9 +62,9 @@ function SelectExample({
               </>
             )
           }
-        </Select.Option>
+        </SelectNext.Option>
       ))}
-    </Select>
+    </SelectNext>
   );
 }
 
@@ -93,10 +93,10 @@ function InputGroupSelectExample() {
         disabled={selectedIndex <= 0}
       />
       <div className="w-full">
-        <Select
+        <SelectNext
           value={selected}
           onChange={setSelected}
-          label={
+          buttonContent={
             selected ? (
               <>
                 {selected.name}
@@ -110,7 +110,7 @@ function InputGroupSelectExample() {
           }
         >
           {defaultItems.map(item => (
-            <Select.Option value={item} key={item.id}>
+            <SelectNext.Option value={item} key={item.id}>
               {() => (
                 <>
                   {item.name}
@@ -122,9 +122,9 @@ function InputGroupSelectExample() {
                   </div>
                 </>
               )}
-            </Select.Option>
+            </SelectNext.Option>
           ))}
-        </Select>
+        </SelectNext>
       </div>
       <IconButton
         icon={ArrowRightIcon}
@@ -230,7 +230,7 @@ export default function SelectNextPage() {
           <Library.Link href="/using-components#presentational-components-api">
             presentational component props
           </Library.Link>
-          <Library.Example title="label">
+          <Library.Example title="buttonContent">
             <Library.Info>
               <Library.InfoItem label="description">
                 The content to be displayed in the toggle button.
@@ -273,6 +273,19 @@ export default function SelectNextPage() {
               </Library.InfoItem>
             </Library.Info>
           </Library.Example>
+          <Library.Example title="buttonId">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                The toggle button{"'"}s <code>id</code>.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>string</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">
@@ -288,7 +301,7 @@ export default function SelectNextPage() {
     <SelectNext
       value={value}
       onChange={setSelected}
-      label={
+      buttonContent={
         value ? (
           <>
             {value.name}