From b48339ad3d4e72bb3517d55db993faab7496fde4 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Tue, 29 Oct 2024 10:10:15 +0100
Subject: [PATCH] Allow title to be provided to Select.Option

---
 src/components/input/Select.tsx                    |  4 ++++
 .../components/patterns/prototype/SelectPage.tsx   | 14 ++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/src/components/input/Select.tsx b/src/components/input/Select.tsx
index 9aaa5686..2f54afb7 100644
--- a/src/components/input/Select.tsx
+++ b/src/components/input/Select.tsx
@@ -49,6 +49,8 @@ export type SelectOptionProps<T> = {
 
   /** Ref associated with the option's container element */
   elementRef?: Ref<HTMLElement | undefined>;
+  /** Value to be passed to the option's `title` attribute */
+  title?: string;
 };
 
 function optionChildren(
@@ -70,6 +72,7 @@ function SelectOption<T>({
   disabled = false,
   classes,
   elementRef,
+  title,
 }: SelectOptionProps<T>) {
   const checkboxRef = useRef<HTMLElement | null>(null);
   const checkboxContainerRef = useRef<HTMLLabelElement | null>(null);
@@ -187,6 +190,7 @@ function SelectOption<T>({
       // This is intended to be focused with arrow keys
       tabIndex={-1}
       ref={downcastRef(optionRef)}
+      title={title}
     >
       <div
         className={classnames(
diff --git a/src/pattern-library/components/patterns/prototype/SelectPage.tsx b/src/pattern-library/components/patterns/prototype/SelectPage.tsx
index d035d94f..a2391c08 100644
--- a/src/pattern-library/components/patterns/prototype/SelectPage.tsx
+++ b/src/pattern-library/components/patterns/prototype/SelectPage.tsx
@@ -560,6 +560,20 @@ export default function SelectPage() {
               </Library.InfoItem>
             </Library.Info>
           </Library.Example>
+          <Library.Example title="title">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                If provided, it is set as the option{"'"}s <code>title</code>{' '}
+                attribute.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>string | undefined</code>
+              </Library.InfoItem>
+              <Library.InfoItem label="default">
+                <code>undefined</code>
+              </Library.InfoItem>
+            </Library.Info>
+          </Library.Example>
         </Library.Pattern>
       </Library.Section>