Add useRef and event handlers for AccordionItem

src/components/ui/Accordion/Accordion.stories.js

@@ -9,7 +9,6 @@ export default {
         <div >
             <div className='flex space-x-2 w-full flex-1'>
                 <Accordion {...args} />
-
             </div>
         </div>
     </SandboxEditor>,

src/components/ui/Accordion/shards/AccordionItem.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useContext, useId, useEffect} from 'react';
+import React, {useState, useContext, useId, useEffect, useRef} from 'react';
 
 import {AccordionContext} from '../contexts/AccordionContext';
 import {AccordionItemContext} from '../contexts/AccordionItemContext';
@@ -10,6 +10,7 @@ export type AccordionItemProps = {
 }
 
 const AccordionItem: React.FC<AccordionItemProps> = ({children, value, className='', ...props}) => {
+    const accordionItemRef = useRef(null);
     const [itemValue, setItemValue] = useState(value);
     const {rootClass, activeItem, focusItem} = useContext(AccordionContext);
 
@@ -31,20 +32,32 @@ const AccordionItem: React.FC<AccordionItemProps> = ({children, value, className
         shouldAddFocusDataAttribute = true;
     }
 
+    const handleBlurEvent = () => {
+        // if clicked outside of the accordion, set activeItem to null
+        const elem = accordionItemRef.current;
+        // remove `data-rad-ui-focus-element` attribute as we are not focusing on this item anymore
+        elem.removeAttribute('data-rad-ui-focus-element');
+    };
+
+    const handleClickEvent = () => {
+        // if clicked outside of the accordion, set activeItem to null
+        const elem = accordionItemRef.current;
+        // remove `data-rad-ui-focus-element` attribute as we are not focusing on this item anymore
+        elem.setAttribute('data-rad-ui-focus-element', '');
+    };
+
 
     return (
-        <AccordionItemContext.Provider value={{itemValue, setItemValue}}>
+        <AccordionItemContext.Provider value={{itemValue, setItemValue, handleBlurEvent, handleClickEvent}}>
             <div
+                ref={accordionItemRef}
                 className={`${rootClass}-item ${className}`} {...props}
                 id={`accordion-data-item-${id}`}
                 role="region"
                 aria-labelledby={`accordion-trigger-${id}`}
                 aria-hidden={!isOpen}
                 data-state={isOpen ? 'open' : 'closed'}
                 data-rad-ui-batch-element
-                // need to add `data-rad-ui-focus-element` when itemValue === activeItem
-                // we set it here
-
                 {...shouldAddFocusDataAttribute ? {'data-rad-ui-focus-element': ''} : {}}
 
 

src/components/ui/Accordion/shards/AccordionRoot.tsx

@@ -2,7 +2,7 @@ import React, {useState, useRef, useEffect} from 'react';
 
 import {customClassSwitcher} from '~/core';
 import {AccordionContext} from '../contexts/AccordionContext';
-import {getAllBatchElements, getActiveBatchItem, getNextBatchItem, getPrevBatchItem} from '~/core/batches';
+import {getAllBatchElements, getNextBatchItem, getPrevBatchItem} from '~/core/batches';
 
 const COMPONENT_NAME = 'Accordion';
 
@@ -13,14 +13,13 @@ export type AccordionRootProps = {
 
 const AccordionRoot= ({children, customRootClass}: AccordionRootProps) => {
     const accordionRef = useRef(null);
-
-    const [activeItem, setActiveItem] = useState(null);
-    const [focusItem, setFocusItem] = useState(null);
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
+    const [activeItem, setActiveItem] = useState(null); // keeps track of the active item, stores the
+    const [focusItem, setFocusItem] = useState(null); // stores the id of the item that should be focused
+
 
     const focusNextItem = () => {
-        // get button
         const batches = getAllBatchElements(accordionRef.current);
         const nextItem = getNextBatchItem(batches);
         setFocusItem(nextItem);
@@ -30,6 +29,7 @@ const AccordionRoot= ({children, customRootClass}: AccordionRootProps) => {
             button?.focus();
         }
     };
+
     const focusPrevItem = () => {
         const batches = getAllBatchElements(accordionRef.current);
         const prevItem = getPrevBatchItem(batches);

src/components/ui/Accordion/shards/AccordionTrigger.tsx

@@ -1,7 +1,6 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext} from 'react';
 import {AccordionContext} from '../contexts/AccordionContext';
 import {AccordionItemContext} from '../contexts/AccordionItemContext';
-import {getAllBatchElements, getActiveBatchItem, getNextBatchItem, getPrevBatchItem} from '~/core/batches';
 
 
 type AccordionTriggerProps = {
@@ -13,25 +12,22 @@ type AccordionTriggerProps = {
 };
 
 const AccordionTrigger: React.FC<AccordionTriggerProps> = ({children, index, activeIndex, className=''}) => {
-    const {setActiveItem, rootClass, focusNextItem, focusPrevItem, activeItem, setFocusItem, accordionRef} = useContext(AccordionContext);
+    const {setActiveItem, rootClass, focusNextItem, focusPrevItem, activeItem} = useContext(AccordionContext);
 
-    const {itemValue} = useContext(AccordionItemContext);
+    const {itemValue, handleBlurEvent, handleClickEvent} = useContext(AccordionItemContext);
 
 
     const onClickHandler = () => {
         setActiveItem(itemValue);
-
-        const batches = getAllBatchElements(accordionRef.current);
-        console.log(batches);
-        const activeItem = getActiveBatchItem(batches);
-        console.log(activeItem);
+        handleClickEvent();
     };
 
 
     return (
 
         <button
             className={`${rootClass}-trigger ${className}`}
+            onBlur={handleBlurEvent}
             onKeyDown={(e) => {
                 if (e.key === 'ArrowDown') {
                     focusNextItem();