chore: Adds separate onFilesChange handler

Author: Katie George

pages/button-group/test.page.tsx

@@ -247,12 +247,15 @@ export default function ButtonGroupPage() {
       case 'experimental-features':
         return syncAction(() => setUseExperimentalFeatures(!!detail.pressed));
       case 'file-input':
-        return syncAction(() => setFiles(detail.files ? detail.files : []));
       default:
         return syncAction();
     }
   };
 
+  const onFilesChange: ButtonGroupProps['onFilesChange'] = ({ detail }) => {
+    return setFiles(detail.files ? detail.files : []);
+  };
+
   const onDismiss = (event: { detail: { fileIndex: number } }) => {
     const newItems = [...files];
     newItems.splice(event.detail.fileIndex, 1);
@@ -273,6 +276,7 @@ export default function ButtonGroupPage() {
             variant="icon"
             items={items}
             onItemClick={onItemClick}
+            onFilesChange={onFilesChange}
             dropdownExpandToViewport={dropdownExpandToViewport}
           />
         </Box>

pages/prompt-input/simple.page.tsx

@@ -171,7 +171,7 @@ export default function PromptInputPage() {
                       <Box padding={{ left: 'xxs', top: 'xs' }}>
                         <ButtonGroup
                           ariaLabel="Chat actions"
-                          onItemClick={({ detail }) =>
+                          onFilesChange={({ detail }) =>
                             detail.id.includes('files') && setFiles(detail.files ? detail.files : [])
                           }
                           items={[

src/button-group/file-input-item.tsx

@@ -16,11 +16,11 @@ const FileInputItem = forwardRef(
     {
       item,
       showTooltip,
-      onItemClick,
+      onFilesChange,
     }: {
       item: ButtonGroupProps.FileInput;
       showTooltip: boolean;
-      onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;
+      onFilesChange?: CancelableEventHandler<ButtonGroupProps.FileChangeDetails>;
     },
     ref: React.Ref<FileInputProps.Ref>
   ) => {
@@ -37,7 +37,7 @@ const FileInputItem = forwardRef(
           multiple={item.multiple}
           value={files}
           onChange={event => {
-            fireCancelableEvent(onItemClick, { id: item.id, files: event.detail.value });
+            fireCancelableEvent(onFilesChange, { id: item.id, files: event.detail.value });
             setFiles(event.detail.value);
           }}
           ref={ref}

src/button-group/interfaces.ts

@@ -92,6 +92,10 @@ export interface ButtonGroupProps extends BaseComponentProps {
    * Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.
    */
   onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;
+  /**
+   * Called when the user uploads files. The event detail object contains the id and files from the file input item.
+   */
+  onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FileChangeDetails>;
 }
 
 export interface InternalButtonGroupProps extends ButtonGroupProps, InternalBaseComponentProps {}
@@ -162,7 +166,11 @@ export namespace ButtonGroupProps {
     id: string;
     pressed?: boolean;
     checked?: boolean;
-    files?: File[];
+  }
+
+  export interface FileChangeDetails {
+    id: string;
+    files: File[];
   }
 
   export interface Ref {

src/button-group/internal.tsx

@@ -28,6 +28,7 @@ const InternalButtonGroup = forwardRef(
     {
       items = [],
       onItemClick,
+      onFilesChange,
       ariaLabel,
       dropdownExpandToViewport,
       __internalRootRef = null,
@@ -157,6 +158,7 @@ const InternalButtonGroup = forwardRef(
                 tooltip={tooltip}
                 setTooltip={setTooltip}
                 onItemClick={onItemClick}
+                onFilesChange={onFilesChange}
                 ref={element => (itemsRef.current[item.id] = element)}
               />
             );

src/button-group/item-element.tsx

@@ -19,11 +19,12 @@ interface ItemElementProps {
   tooltip: null | { item: string; feedback: boolean };
   setTooltip: (tooltip: null | { item: string; feedback: boolean }) => void;
   onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails> | undefined;
+  onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FileChangeDetails> | undefined;
 }
 
 const ItemElement = forwardRef(
   (
-    { item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick }: ItemElementProps,
+    { item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick, onFilesChange }: ItemElementProps,
     ref: React.Ref<ButtonProps.Ref>
   ) => {
     const containerRef = useRef<HTMLDivElement>(null);
@@ -91,6 +92,10 @@ const ItemElement = forwardRef(
       fireCancelableEvent(onItemClick, event.detail, event);
     };
 
+    const onFilesChangeHandler = (event: CustomEvent<ButtonGroupProps.FileChangeDetails>) => {
+      fireCancelableEvent(onFilesChange, event.detail, event);
+    };
+
     return (
       <div
         key={item.id}
@@ -130,7 +135,7 @@ const ItemElement = forwardRef(
           <FileInputItem
             ref={buttonRef}
             item={item}
-            onItemClick={onClickHandler}
+            onFilesChange={onFilesChangeHandler}
             showTooltip={tooltip?.item === item.id}
           />
         )}