"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", hr: "hr", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Instructions: Keyboard Events and Accessibility" }), "\n", _jsx(_components.p, { children: "Follow these step-by-step instructions to build your first accessible React component with keyboard navigation. This exercise will reinforce the keyboard event handling and accessibility concepts you learned in the lesson and guide you through creating a searchable dropdown that demonstrates professional accessibility patterns." }), "\n", _jsx(_components.h2, { children: "Concept Reinforcement" }), "\n", _jsx(_components.p, { children: "Before we start coding, let's review the key React concepts you'll be applying in this exercise:" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Keyboard Event Mastery" }), ": You'll use onKeyDown events to detect arrow keys, Enter, and Escape, demonstrating how React provides detailed information about keyboard interactions. This shows how keyboard events serve as the foundation for accessible navigation."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Accessibility Implementation" }), ": You'll apply ARIA attributes like role, aria-expanded, and aria-selected to make your component work with screen readers, demonstrating how React components can be inclusive and accessible to all users."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Focus Management" }), ": You'll programmatically control focus movement and visual highlighting, showing how React applications can guide user attention smoothly through keyboard navigation."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Real-time Filtering" }), ": You'll implement search functionality that filters options as users type, demonstrating how keyboard events can trigger immediate UI updates and provide responsive user experiences."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Professional Navigation Patterns" }), ": You'll implement standard keyboard behaviors (arrow keys for navigation, Enter for selection, Escape for closing) that match user expectations from other applications."] }), "\n", _jsx(_components.h2, { children: "The Challenge" }), "\n", _jsx(_components.p, { children: "Create a professional searchable dropdown component that demonstrates keyboard event handling and accessibility fundamentals:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A searchable dropdown with real-time filtering as users type" }), "\n", _jsx(_components.li, { children: "Full keyboard navigation using arrow keys to move through options" }), "\n", _jsx(_components.li, { children: "Enter key selection to choose highlighted options" }), "\n", _jsx(_components.li, { children: "Escape key functionality to close the dropdown" }), "\n", _jsx(_components.li, { children: "Proper ARIA attributes for screen reader compatibility" }), "\n", _jsx(_components.li, { children: "Focus management that maintains smooth keyboard navigation flow" }), "\n", _jsx(_components.li, { children: "Professional styling with visual feedback for highlighted options" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Success Criteria:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Dropdown opens and closes with proper keyboard and mouse interaction" }), "\n", _jsx(_components.li, { children: "✅ Search input filters options in real-time as users type" }), "\n", _jsx(_components.li, { children: "✅ Arrow keys navigate up and down through filtered options" }), "\n", _jsx(_components.li, { children: "✅ Enter key selects the currently highlighted option" }), "\n", _jsx(_components.li, { children: "✅ Escape key closes the dropdown and returns focus appropriately" }), "\n", _jsx(_components.li, { children: "✅ ARIA attributes provide proper accessibility information" }), "\n", _jsx(_components.li, { children: "✅ Visual highlighting shows which option is currently focused" }), "\n", _jsx(_components.li, { children: "✅ Components are structured in separate files with proper imports/exports" }), "\n", _jsx(_components.li, { children: "✅ All keyboard interactions provide immediate visual feedback" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Independent Learning Opportunity" }), "\n", _jsx(_components.p, { children: "Before looking at the step-by-step guide below, try building this searchable dropdown yourself! Use these React concepts you've learned:" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "React Concepts to Use:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Functional components with JSX structure for dropdown and search elements" }), "\n", _jsx(_components.li, { children: "useState hook for managing search term, dropdown visibility, and highlighted option" }), "\n", _jsx(_components.li, { children: "onKeyDown event handlers for keyboard navigation with event.key detection" }), "\n", _jsx(_components.li, { children: "onChange event handlers for search input with real-time filtering" }), "\n", _jsx(_components.li, { children: "Conditional rendering for dropdown visibility and option highlighting" }), "\n", _jsx(_components.li, { children: "useRef and useEffect for focus management and scroll behavior" }), "\n", _jsx(_components.li, { children: "Component import/export with ES6 modules for clean architecture" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Conceptual Hints:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Think about what data needs to change over time (search term, open/closed state, highlighted option index)" }), "\n", _jsx(_components.li, { children: "Consider what keyboard actions users expect (arrow keys for navigation, Enter for selection, Escape for closing)" }), "\n", _jsx(_components.li, { children: "Remember that ARIA attributes help screen readers understand your component's purpose and state" }), "\n", _jsx(_components.li, { children: "Use event.key to detect specific keys like 'ArrowDown', 'ArrowUp', 'Enter', and 'Escape'" }), "\n", _jsx(_components.li, { children: "React re-renders automatically when state changes, updating the visual highlighting and filtered options" }), "\n", _jsx(_components.li, { children: "Focus management ensures users always know where they are in the interface" }), "\n"] }), "\n", _jsx(_components.p, { children: "Try building it yourself first - it's okay if you get stuck! The step-by-step guide below will help you understand each React concept as you implement it." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Step-by-Step React Implementation Guide" }), "\n", _jsx(_components.p, { children: "If you need help or want to understand each React concept in detail, follow these steps:" }), "\n", _jsx(_components.h3, { children: "Step 1: Create the SearchableDropdown Component File" }), "\n", _jsxs(_components.p, { children: ["Create a new file called ", _jsx(_components.code, { children: "SearchableDropdown.js" }), " and set up the basic React component structure with search input and dropdown elements. This demonstrates React's component-based architecture and accessibility-first design."] }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "React" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "SearchableDropdown" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " fruits ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token string", children: "'Apple'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token string", children: "'Banana'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token string", children: "'Cherry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token string", children: "'Date'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token string", children: "'Elderberry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token string", children: "'Fig'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token string", children: "'Grape'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token string", children: "'Honeydew'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token string", children: "'Kiwi'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token string", children: "'Lemon'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token string", children: "'Mango'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token string", children: "'Orange'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token string", children: "'Papaya'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token string", children: "'Quince'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token string", children: "'Raspberry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "21", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "searchable-dropdown", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Fruit Selector" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dropdown-container", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "26", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "input"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "27", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "28", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "search-input", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "29", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "placeholder" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Search fruits...", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "30", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-label" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Search for fruits", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "ul"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dropdown-list", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "role" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "listbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["fruit", _jsx(_components.span, { className: "token punctuation", children: "," }), " index"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "35", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "36", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "role" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "option", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "37", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dropdown-option", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "47", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "SearchableDropdown" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why we write this React code:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "import React from 'react'" }), " gives us access to React's functionality for creating components"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "function SearchableDropdown()" }), " creates a functional React component using modern patterns"] }), "\n", _jsx(_components.li, { children: "The JSX return statement describes a complete dropdown structure with semantic HTML" }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "aria-label" }), " provides accessibility information for screen readers"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "role=\"listbox\"" }), " and ", _jsx(_components.code, { children: "role=\"option\"" }), " tell assistive technology this is a selectable list"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "export default SearchableDropdown" }), " makes this component available for import in other files"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates React component structure and accessibility-first design. The ARIA attributes are set up to work with React's event handling system."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " to see your basic searchable dropdown render! Notice how the CSS styling creates a professional appearance even before adding React functionality."] }), "\n", _jsx(_components.h3, { children: "Step 2: Add State for Search and Dropdown Management" }), "\n", _jsx(_components.p, { children: "Import the useState hook and add state to manage the search term, dropdown visibility, and highlighted option. This is where React's state management makes your dropdown interactive and accessible." }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useState ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "SearchableDropdown" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " fruits ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token string", children: "'Apple'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token string", children: "'Banana'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token string", children: "'Cherry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token string", children: "'Date'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token string", children: "'Elderberry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token string", children: "'Fig'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token string", children: "'Grape'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token string", children: "'Honeydew'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token string", children: "'Kiwi'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token string", children: "'Lemon'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token string", children: "'Mango'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token string", children: "'Orange'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token string", children: "'Papaya'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token string", children: "'Quince'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token string", children: "'Raspberry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "21", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "," }), " setSearchTerm", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isOpen", _jsx(_components.span, { className: "token punctuation", children: "," }), " setIsOpen", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "highlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "," }), " setHighlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "selectedFruit", _jsx(_components.span, { className: "token punctuation", children: "," }), " setSelectedFruit", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "26", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Filter fruits based on search term" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " filteredFruits ", _jsx(_components.span, { className: "token operator", children: "=" }), " fruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "filter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "fruit" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" fruit", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "includes" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "31", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "searchable-dropdown", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Fruit Selector" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dropdown-container", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "input"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "37", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "38", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "search-input", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "39", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "placeholder" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Search fruits...", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "40", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "value" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "41", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-label" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Search for fruits", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "42", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-expanded" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "isOpen", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "43", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-haspopup" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "listbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "selectedFruit ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "selected-fruit", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [_jsx(_components.span, { className: "token plain-text", children: " Selected: " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "strong"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "selectedFruit", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "isOpen ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "ul"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dropdown-list", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "role" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "listbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["fruit", _jsx(_components.span, { className: "token punctuation", children: "," }), " index"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "54", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "55", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "role" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "option", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "56", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "dropdown-option " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "\n"] })] })] })] }) }), _jsx(_components.span, { className: "code-line line-number", line: "57", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" highlightedIndex ", _jsx(_components.span, { className: "token operator", children: "===" }), " index\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "58", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'highlighted'" }), "\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "59", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), "\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "60", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [_jsxs(_components.span, { className: "token template-string", children: [_jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "61", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-selected" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "highlightedIndex ", _jsx(_components.span, { className: "token operator", children: "===" }), " index", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "62", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "65", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "66", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "67", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "68", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "69", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "70", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "71", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "72", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "SearchableDropdown" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why we write this React code:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "{ useState }" }), " imports the useState hook from React for state management"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useState('')" }), " creates state for search term, dropdown visibility, highlighting, and selection"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "filteredFruits" }), " creates a filtered array based on the search term using JavaScript's filter method"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "value={searchTerm}" }), " creates a controlled component where React state controls the input value"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "aria-expanded={isOpen}" }), " tells screen readers whether the dropdown is open or closed"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "{isOpen && (...)}" }), " uses conditional rendering to show/hide the dropdown list"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "className={...}" }), " conditionally applies highlighting styles based on state"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates React state management for complex interactions and conditional rendering. The controlled component pattern ensures React manages all data, not the browser."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " to see your dropdown with state management! The search input is now controlled by React state, and the dropdown shows/hides based on the isOpen state."] }), "\n", _jsx(_components.h3, { children: "Step 3: Add Search Input Handling and Focus Management" }), "\n", _jsx(_components.p, { children: "Add onChange and onFocus event handlers to make the search input functional and manage dropdown visibility. This demonstrates how React handles user input and manages component state." }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useState ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "SearchableDropdown" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " fruits ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token string", children: "'Apple'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token string", children: "'Banana'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token string", children: "'Cherry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token string", children: "'Date'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token string", children: "'Elderberry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token string", children: "'Fig'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token string", children: "'Grape'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token string", children: "'Honeydew'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token string", children: "'Kiwi'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token string", children: "'Lemon'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token string", children: "'Mango'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token string", children: "'Orange'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token string", children: "'Papaya'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token string", children: "'Quince'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token string", children: "'Raspberry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "21", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "," }), " setSearchTerm", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isOpen", _jsx(_components.span, { className: "token punctuation", children: "," }), " setIsOpen", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "highlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "," }), " setHighlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "selectedFruit", _jsx(_components.span, { className: "token punctuation", children: "," }), " setSelectedFruit", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "26", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Filter fruits based on search term" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " filteredFruits ", _jsx(_components.span, { className: "token operator", children: "=" }), " fruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "filter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "fruit" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" fruit", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "includes" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "31", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleInputChange" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "event" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " value ", _jsx(_components.span, { className: "token operator", children: "=" }), " event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token function", children: "setSearchTerm" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "value", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "38", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleInputFocus" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "42", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleSelection" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "fruit" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token function", children: "setSelectedFruit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token function", children: "setSearchTerm" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "49", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "searchable-dropdown", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Fruit Selector" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dropdown-container", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "54", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "input"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "55", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "56", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "search-input", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "57", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "placeholder" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Search fruits...", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "58", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "value" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "59", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onChange" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleInputChange", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "60", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onFocus" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleInputFocus", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "61", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-label" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Search for fruits", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "62", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-expanded" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "isOpen", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "63", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-haspopup" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "listbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "64", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "65", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "selectedFruit ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "66", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "selected-fruit", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "67", children: [_jsx(_components.span, { className: "token plain-text", children: " Selected: " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "strong"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "selectedFruit", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "68", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "69", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "70", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "isOpen ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "71", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "ul"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dropdown-list", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "role" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "listbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "72", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["fruit", _jsx(_components.span, { className: "token punctuation", children: "," }), " index"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "74", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "75", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "role" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "option", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "76", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "dropdown-option " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "\n"] })] })] })] }) }), _jsx(_components.span, { className: "code-line line-number", line: "77", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" highlightedIndex ", _jsx(_components.span, { className: "token operator", children: "===" }), " index\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "78", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'highlighted'" }), "\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "79", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), "\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "80", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [_jsxs(_components.span, { className: "token template-string", children: [_jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "81", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-selected" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "highlightedIndex ", _jsx(_components.span, { className: "token operator", children: "===" }), " index", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "82", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onClick" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "handleSelection" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "83", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "84", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "85", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "86", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "87", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "88", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "89", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "90", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "91", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "92", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "93", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "94", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "SearchableDropdown" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why we write this React code:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "handleInputChange" }), " extracts the input value using event.target.value and updates search state"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "setIsOpen(true)" }), " opens the dropdown when users start typing"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "setHighlightedIndex(-1)" }), " resets highlighting when search changes"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "handleInputFocus" }), " opens the dropdown when users focus the input field"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "handleSelection" }), " updates the selected fruit and closes the dropdown"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "onChange={handleInputChange}" }), " connects the input to the change handler"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "onClick={() => handleSelection(fruit)}" }), " allows mouse selection of options"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates React event handling for form inputs and user interactions. The event handlers update state, which triggers re-renders to update the UI."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " and try typing in the search field! You can now search for fruits and see the list filter in real-time. You can also click on options to select them."] }), "\n", _jsx(_components.h3, { children: "Step 4: Add Keyboard Navigation with onKeyDown" }), "\n", _jsx(_components.p, { children: "Add keyboard event handling to enable arrow key navigation, Enter selection, and Escape closing. This demonstrates React's keyboard event system and accessibility patterns." }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useState ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "SearchableDropdown" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " fruits ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token string", children: "'Apple'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token string", children: "'Banana'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token string", children: "'Cherry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token string", children: "'Date'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token string", children: "'Elderberry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token string", children: "'Fig'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token string", children: "'Grape'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token string", children: "'Honeydew'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token string", children: "'Kiwi'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token string", children: "'Lemon'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token string", children: "'Mango'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token string", children: "'Orange'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token string", children: "'Papaya'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token string", children: "'Quince'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token string", children: "'Raspberry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "21", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "," }), " setSearchTerm", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isOpen", _jsx(_components.span, { className: "token punctuation", children: "," }), " setIsOpen", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "highlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "," }), " setHighlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "selectedFruit", _jsx(_components.span, { className: "token punctuation", children: "," }), " setSelectedFruit", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "26", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Filter fruits based on search term" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " filteredFruits ", _jsx(_components.span, { className: "token operator", children: "=" }), " fruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "filter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "fruit" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" fruit", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "includes" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "30", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "31", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleInputChange" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "event" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " value ", _jsx(_components.span, { className: "token operator", children: "=" }), " event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token function", children: "setSearchTerm" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "value", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "35", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "38", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleInputFocus" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "42", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleSelection" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "fruit" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token function", children: "setSelectedFruit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "45", children: [" ", _jsx(_components.span, { className: "token function", children: "setSearchTerm" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "49", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleKeyDown" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "event" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "isOpen", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "52", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "switch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "key" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "54", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'ArrowDown'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [" event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "preventDefault" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "prevIndex" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " nextIndex ", _jsx(_components.span, { className: "token operator", children: "=" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "58", children: [" prevIndex ", _jsx(_components.span, { className: "token operator", children: "<" }), " filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "59", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " prevIndex ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "61", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " nextIndex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "62", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "64", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "65", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'ArrowUp'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "66", children: [" event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "preventDefault" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "67", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "prevIndex" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "68", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " nextIndex ", _jsx(_components.span, { className: "token operator", children: "=" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "69", children: [" prevIndex ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "70", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " prevIndex ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "71", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "72", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " nextIndex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "74", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "75", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "76", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'Enter'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "77", children: [" event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "preventDefault" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "78", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "highlightedIndex ", _jsx(_components.span, { className: "token operator", children: ">=" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "[" }), "highlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "79", children: [" ", _jsx(_components.span, { className: "token function", children: "handleSelection" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "[" }), "highlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "80", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "81", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "82", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "83", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'Escape'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "84", children: [" event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "preventDefault" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "85", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "86", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "87", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "88", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "89", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "default" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "90", children: [" ", _jsx(_components.span, { className: "token comment", children: "// For regular typing, ensure dropdown is open" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "91", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "key" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "92", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "93", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "94", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "95", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "96", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "97", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "98", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "99", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "searchable-dropdown", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "100", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Fruit Selector" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "101", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dropdown-container", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "102", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "input"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "103", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "104", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "search-input", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "105", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "placeholder" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Search fruits...", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "106", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "value" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "107", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onChange" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleInputChange", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "108", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onFocus" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleInputFocus", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "109", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onKeyDown" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleKeyDown", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "110", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-label" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Search for fruits", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "111", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-expanded" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "isOpen", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "112", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-haspopup" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "listbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "113", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "114", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "selectedFruit ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "115", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "selected-fruit", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "116", children: [_jsx(_components.span, { className: "token plain-text", children: " Selected: " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "strong"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "selectedFruit", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "117", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "118", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "119", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "isOpen ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "120", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "ul"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dropdown-list", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "role" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "listbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "121", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "122", children: [" filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["fruit", _jsx(_components.span, { className: "token punctuation", children: "," }), " index"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "123", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "124", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "125", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "role" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "option", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "126", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "dropdown-option " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "\n"] })] })] })] }) }), _jsx(_components.span, { className: "code-line line-number", line: "127", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" highlightedIndex ", _jsx(_components.span, { className: "token operator", children: "===" }), " index\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "128", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'highlighted'" }), "\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "129", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), "\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "130", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [_jsxs(_components.span, { className: "token template-string", children: [_jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "131", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-selected" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "highlightedIndex ", _jsx(_components.span, { className: "token operator", children: "===" }), " index", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "132", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onClick" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "handleSelection" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "133", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "134", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "135", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "136", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "137", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "138", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "no-results", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "No fruits found" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "139", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "140", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "141", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "142", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "143", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "144", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "145", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "146", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "147", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "SearchableDropdown" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why we write this React code:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "handleKeyDown" }), " creates a comprehensive keyboard event handler using event.key"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "switch (event.key)" }), " handles different keys with specific behaviors"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "event.preventDefault()" }), " prevents default browser behavior for arrow keys and Enter"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "setHighlightedIndex" }), " updates which option is visually highlighted"] }), "\n", _jsx(_components.li, { children: "Circular navigation wraps from last to first option and vice versa" }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "onKeyDown={handleKeyDown}" }), " connects the input to the keyboard handler"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "filteredFruits.length > 0" }), " shows \"No results\" when search returns no matches"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates React's keyboard event handling system and how event.key provides consistent key detection across browsers. State updates trigger re-renders to show visual feedback."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " and try the keyboard navigation! Focus the input field and use arrow keys to navigate, Enter to select, and Escape to close the dropdown."] }), "\n", _jsx(_components.h3, { children: "Step 5: Add Advanced Focus Management and Accessibility" }), "\n", _jsx(_components.p, { children: "Enhance the component with useRef and useEffect for better focus management and scroll behavior. This demonstrates professional React patterns for accessibility." }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useState", _jsx(_components.span, { className: "token punctuation", children: "," }), " useRef", _jsx(_components.span, { className: "token punctuation", children: "," }), " useEffect ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "SearchableDropdown" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " fruits ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token string", children: "'Apple'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token string", children: "'Banana'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token string", children: "'Cherry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token string", children: "'Date'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token string", children: "'Elderberry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token string", children: "'Fig'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token string", children: "'Grape'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token string", children: "'Honeydew'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token string", children: "'Kiwi'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token string", children: "'Lemon'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token string", children: "'Mango'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token string", children: "'Orange'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token string", children: "'Papaya'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token string", children: "'Quince'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token string", children: "'Raspberry'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "21", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "," }), " setSearchTerm", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "23", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "isOpen", _jsx(_components.span, { className: "token punctuation", children: "," }), " setIsOpen", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "24", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "highlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "," }), " setHighlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "25", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "selectedFruit", _jsx(_components.span, { className: "token punctuation", children: "," }), " setSelectedFruit", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "26", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "27", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " inputRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useRef" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "28", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " listRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useRef" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword null nil", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "29", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " optionRefs ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useRef" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "30", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "31", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Filter fruits based on search term" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "32", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " filteredFruits ", _jsx(_components.span, { className: "token operator", children: "=" }), " fruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "filter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "fruit" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "33", children: [" fruit", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "includes" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "toLowerCase" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "34", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "35", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "36", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Scroll highlighted option into view" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "37", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "38", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "highlightedIndex ", _jsx(_components.span, { className: "token operator", children: ">=" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " optionRefs", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), "highlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "39", children: [" optionRefs", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), "highlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "scrollIntoView" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "40", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "block" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'nearest'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "41", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "behavior" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'smooth'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "42", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "43", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "44", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "highlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "45", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "46", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Close dropdown when clicking outside" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "47", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "48", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleClickOutside" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "event" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "49", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "50", children: [" listRef", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "51", children: [" ", _jsx(_components.span, { className: "token operator", children: "!" }), "listRef", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "contains" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "52", children: [" inputRef", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "53", children: [" ", _jsx(_components.span, { className: "token operator", children: "!" }), "inputRef", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "contains" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "54", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "55", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "56", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "57", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "58", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "59", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "60", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'mousedown'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " handleClickOutside", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "61", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "62", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "removeEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'mousedown'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " handleClickOutside", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "63", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "64", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "65", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleInputChange" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "event" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "66", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " value ", _jsx(_components.span, { className: "token operator", children: "=" }), " event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "target" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "value" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "67", children: [" ", _jsx(_components.span, { className: "token function", children: "setSearchTerm" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "value", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "68", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "69", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "70", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "71", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "72", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleInputFocus" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "73", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "74", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "75", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "76", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleSelection" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "fruit" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "77", children: [" ", _jsx(_components.span, { className: "token function", children: "setSelectedFruit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "78", children: [" ", _jsx(_components.span, { className: "token function", children: "setSearchTerm" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "79", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "80", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "81", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Return focus to input after selection" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "82", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "inputRef", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "83", children: [" inputRef", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "focus" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "84", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "85", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "86", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "87", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleKeyDown" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token parameter", children: "event" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "88", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "isOpen", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "89", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "90", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "switch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "key" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "91", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'ArrowDown'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "92", children: [" event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "preventDefault" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "93", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "prevIndex" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "94", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " nextIndex ", _jsx(_components.span, { className: "token operator", children: "=" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "95", children: [" prevIndex ", _jsx(_components.span, { className: "token operator", children: "<" }), " filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "96", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " prevIndex ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "97", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "98", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " nextIndex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "99", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "100", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "101", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "102", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'ArrowUp'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "103", children: [" event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "preventDefault" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "104", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "prevIndex" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "105", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " nextIndex ", _jsx(_components.span, { className: "token operator", children: "=" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "106", children: [" prevIndex ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "107", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " prevIndex ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "108", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "109", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " nextIndex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "110", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "111", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "112", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "113", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'Enter'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "114", children: [" event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "preventDefault" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "115", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "highlightedIndex ", _jsx(_components.span, { className: "token operator", children: ">=" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "[" }), "highlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "116", children: [" ", _jsx(_components.span, { className: "token function", children: "handleSelection" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "[" }), "highlightedIndex", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "117", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "118", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "119", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "120", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'Escape'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "121", children: [" event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "preventDefault" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "122", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "123", children: [" ", _jsx(_components.span, { className: "token function", children: "setHighlightedIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "124", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "125", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "126", children: [" ", _jsx(_components.span, { className: "token keyword module", children: "default" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "127", children: [" ", _jsx(_components.span, { className: "token comment", children: "// For regular typing, ensure dropdown is open" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "128", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "key" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "129", children: [" ", _jsx(_components.span, { className: "token function", children: "setIsOpen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "130", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "131", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "break" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "132", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "133", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "134", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "135", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "136", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "searchable-dropdown", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "137", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Fruit Selector" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "138", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dropdown-container", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "139", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "input"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "140", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "ref" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "inputRef", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "141", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "142", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "search-input", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "143", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "placeholder" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Search fruits...", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "144", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "value" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "searchTerm", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "145", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onChange" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleInputChange", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "146", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onFocus" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleInputFocus", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "147", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onKeyDown" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleKeyDown", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "148", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-label" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Search for fruits", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "149", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-expanded" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "isOpen", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "150", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-haspopup" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "listbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "151", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-activedescendant" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] })] }) }), _jsx(_components.span, { className: "code-line line-number", line: "152", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" highlightedIndex ", _jsx(_components.span, { className: "token operator", children: ">=" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "153", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "option-" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "highlightedIndex", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "154", children: _jsx(_components.span, { className: "token tag", children: _jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword nil", children: "undefined" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "155", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "156", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "157", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "selectedFruit ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "158", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "selected-fruit", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "159", children: [_jsx(_components.span, { className: "token plain-text", children: " Selected: " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "strong"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "selectedFruit", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "160", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "161", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "162", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "isOpen ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "163", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "ul"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "164", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "ref" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "listRef", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "165", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "dropdown-list", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "166", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "role" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "listbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "167", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-label" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "Fruit options", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "168", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "169", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), " ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "170", children: [" filteredFruits", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["fruit", _jsx(_components.span, { className: "token punctuation", children: "," }), " index"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "171", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "172", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "173", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "option-" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "index", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "174", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "ref" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token parameter", children: "el" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "optionRefs", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "current" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), "index", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " el", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "175", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "role" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "option", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "176", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "dropdown-option " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "\n"] })] })] })] }) }), _jsx(_components.span, { className: "code-line line-number", line: "177", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" highlightedIndex ", _jsx(_components.span, { className: "token operator", children: "===" }), " index\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "178", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'highlighted'" }), "\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "179", children: _jsx(_components.span, { className: "token tag", children: _jsx(_components.span, { className: "token script language-javascript", children: _jsx(_components.span, { className: "token template-string", children: _jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), "\n"] }) }) }) }) }), _jsx(_components.span, { className: "code-line line-number", line: "180", children: _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token script language-javascript", children: [_jsxs(_components.span, { className: "token template-string", children: [_jsxs(_components.span, { className: "token interpolation", children: [" ", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "181", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "aria-selected" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "highlightedIndex ", _jsx(_components.span, { className: "token operator", children: "===" }), " index", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "182", children: _jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "onClick" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "handleSelection" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "183", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "184", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "fruit", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "185", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "186", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "187", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "188", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "no-results", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "role" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "option", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "189", children: _jsx(_components.span, { className: "token plain-text", children: " No fruits found\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "190", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "191", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "192", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "193", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "194", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "195", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "196", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "197", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "198", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "199", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "SearchableDropdown" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why we write this React code:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useRef" }), " creates references to DOM elements for focus management and scroll control"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect" }), " with scroll logic ensures highlighted options are visible in the dropdown"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useEffect" }), " with click outside detection closes dropdown when users click elsewhere"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "aria-activedescendant" }), " tells screen readers which option is currently highlighted"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "id={option-${index}}" }), " provides unique IDs for ARIA relationships"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "ref={el => optionRefs.current[index] = el}" }), " stores references to each option element"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "scrollIntoView" }), " smoothly scrolls highlighted options into view"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates advanced React patterns including useRef for DOM manipulation, useEffect for side effects, and comprehensive ARIA implementation for accessibility."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " and test the enhanced functionality! The dropdown now has smooth scrolling, click-outside closing, and improved screen reader support."] }), "\n", _jsx(_components.h3, { children: "Step 6: Update the App Component" }), "\n", _jsxs(_components.p, { children: ["Now update your ", _jsx(_components.code, { children: "App.js" }), " file to import and use your new SearchableDropdown component. This demonstrates React's component composition and import/export system."] }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "React" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "SearchableDropdown" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./SearchableDropdown'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token string", children: "'./styles.css'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "App" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "App", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "SearchableDropdown" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "12", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "App" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Why we write this React code:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "import SearchableDropdown from './SearchableDropdown'" }), " imports your custom component"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "import './styles.css'" }), " imports the CSS file for styling"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "" }), " uses your component as a JSX element"] }), "\n", _jsx(_components.li, { children: "The App component acts as the root component that renders other components" }), "\n", _jsx(_components.li, { children: "This demonstrates React's component composition pattern" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "React Concept Applied" }), ": This demonstrates React's component composition - how you build complex applications by combining simpler, focused components. The App component serves as a container for your searchable dropdown."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Click \"Run\"" }), " to see your complete React searchable dropdown application! The SearchableDropdown component is now rendered inside the App component with full keyboard navigation and accessibility features."] }), "\n", _jsx(_components.h2, { children: "Congratulations!" }), "\n", _jsx(_components.p, { children: "You've successfully built your first accessible React component with comprehensive keyboard navigation! You've applied fundamental React concepts that form the foundation of inclusive web applications:" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "React Concepts Mastered:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Keyboard Event Handling" }), ": Used onKeyDown with event.key to detect arrow keys, Enter, and Escape"] }), "\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Accessibility Implementation" }), ": Applied ARIA attributes for screen reader compatibility"] }), "\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Focus Management" }), ": Controlled focus movement and visual highlighting programmatically"] }), "\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Real-time Filtering" }), ": Implemented search functionality with immediate UI updates"] }), "\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Professional Navigation" }), ": Created standard keyboard behaviors that match user expectations"] }), "\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Advanced React Patterns" }), ": Used useRef and useEffect for DOM manipulation and side effects"] }), "\n", _jsxs(_components.li, { children: ["✅ ", _jsx(_components.strong, { children: "Component Architecture" }), ": Organized code in separate files with proper imports and exports"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Real-World Applications:" }) }), "\n", _jsx(_components.p, { children: "This searchable dropdown demonstrates patterns you'll use in every React application:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Autocomplete Search Boxes" }), ": Product search in e-commerce sites"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Command Palettes" }), ": Keyboard shortcuts in productivity applications"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "User Selection Interfaces" }), ": Choosing options in forms and settings"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Data Filtering" }), ": Searching through large datasets"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Accessible Navigation" }), ": Making applications usable by all users"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "What You've Built:" }) }), "\n", _jsx(_components.p, { children: "Your interactive searchable dropdown showcases React's accessibility capabilities:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Keyboard Navigation" }), ": Full arrow key navigation with circular wrapping"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Search Functionality" }), ": Real-time filtering as users type"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Accessibility Features" }), ": ARIA attributes and screen reader support"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Focus Management" }), ": Smooth focus transitions and visual feedback"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Professional Behavior" }), ": Standard keyboard shortcuts and interactions"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Professional Development Patterns:" }) }), "\n", _jsx(_components.p, { children: "You've learned industry-standard React practices:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Event-Driven Programming" }), ": Responding to user interactions with keyboard events"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Accessibility-First Design" }), ": Building components that work for all users"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "State Management" }), ": Managing complex component state with multiple variables"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance Optimization" }), ": Efficient event handling and DOM manipulation"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Component Organization" }), ": Clean separation between logic and presentation"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "The Foundation You've Built:" }) }), "\n", _jsx(_components.p, { children: "Every React concept you'll learn builds on these keyboard event and accessibility fundamentals:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Advanced Navigation" }), ": Complex keyboard shortcuts and multi-step interactions"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Form Handling" }), ": Accessible form validation and submission patterns"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Data Management" }), ": Keyboard navigation through tables and lists"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "User Interface Controls" }), ": Modals, tooltips, and interactive components"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance Optimization" }), ": Efficient event handling in large applications"] }), "\n"] }), "\n", _jsx(_components.p, { children: "You're now ready to build more sophisticated React components with complex keyboard interactions, advanced accessibility features, and professional navigation patterns. Every accessible interface you'll ever build in React uses the same fundamental concepts you've just mastered!" }), "\n", _jsx(_components.p, { children: "The searchable dropdown you've created might seem straightforward, but it contains the DNA of every professional accessibility system. When you implemented keyboard navigation and ARIA attributes, you used the same React techniques that power the accessibility features in applications used by millions of people worldwide." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Professional Skills Developed:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Inclusive Design" }), ": Understanding how to build applications that work for all users"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Keyboard Navigation" }), ": Implementing standard navigation patterns users expect"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Accessibility Standards" }), ": Applying ARIA attributes and focus management correctly"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Event Handling" }), ": Managing complex keyboard interactions with React's event system"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "User Experience" }), ": Creating smooth, responsive interfaces with immediate feedback"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Welcome to the world of accessible React development! You're now equipped with the fundamental skills to build inclusive applications that provide excellent experiences for all users, regardless of how they interact with your interface." }), "\n", _jsx(_components.p, { children: "The keyboard event handling and accessibility concepts you've mastered are the foundation of every professional React application. From simple dropdowns to complex data management interfaces, these patterns scale to handle any accessibility requirement you can imagine." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Professional Applications:" }) }), "\n", _jsx(_components.p, { children: "The patterns you've learned are used in:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "GitHub's Command Palette" }), ": Keyboard navigation and search functionality"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Slack's Channel Picker" }), ": Accessible dropdown with real-time filtering"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Google's Search Suggestions" }), ": Keyboard navigation through search results"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "VS Code's File Explorer" }), ": Accessible tree navigation with keyboard shortcuts"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Shopify's Product Search" }), ": Accessible e-commerce search interfaces"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Every expert React developer understands that accessibility is not optional - it's a fundamental requirement for professional web development. Master these keyboard event handling and accessibility concepts, and you'll have the foundation to build React applications that truly serve all users with excellence and professionalism." }), "\n", _jsx(_components.p, { children: "Your journey into building inclusive, accessible React applications continues here, and these skills will serve you throughout your entire React development career." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };