Revert "use DropdownMenu to delegate keyboard handlers"

This reverts commit 1da593e.

Author: msmx-mnakagawa

src/scripts/Picklist.tsx

@@ -7,15 +7,14 @@ import React, {
   Ref,
   ReactNode,
   useId,
+  useState,
+  useEffect,
+  useCallback,
 } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
-import {
-  DropdownMenu,
-  DropdownMenuItem,
-  DropdownMenuProps,
-} from './DropdownMenu';
+import { DropdownMenuProps } from './DropdownMenu';
 import { isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
@@ -156,8 +155,124 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       opened_,
       defaultOpened ?? false
     );
+    const [focusedValue, setFocusedValue] = useState<
+      PicklistValue | undefined
+    >();
+
     const { getActiveElement } = useContext(ComponentSettingsContext);
 
+    // Get option values from children
+    const getOptionValues = useCallback(() => {
+      const optionValues: PicklistValue[] = [];
+      React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return;
+        }
+
+        const props: unknown = child.props;
+        const isPropsObject = typeof props === 'object' && props !== null;
+
+        if (
+          isPropsObject &&
+          'value' in props &&
+          (typeof props.value === 'string' || typeof props.value === 'number')
+        ) {
+          optionValues.push(props.value);
+        }
+      });
+      return optionValues;
+    }, [children]);
+
+    // Get next option value for keyboard navigation
+    const getNextValue = useCallback(
+      (currentValue?: PicklistValue) => {
+        const optionValues = getOptionValues();
+        if (optionValues.length === 0) return undefined;
+
+        if (!currentValue) return optionValues[0];
+
+        const currentIndex = optionValues.indexOf(currentValue);
+        return optionValues[
+          Math.min(currentIndex + 1, optionValues.length - 1)
+        ]; // not wrap around
+      },
+      [getOptionValues]
+    );
+
+    // Get previous option value for keyboard navigation
+    const getPrevValue = useCallback(
+      (currentValue?: PicklistValue) => {
+        const optionValues = getOptionValues();
+        if (optionValues.length === 0) return undefined;
+
+        if (!currentValue) return optionValues[optionValues.length - 1];
+
+        const currentIndex = optionValues.indexOf(currentValue);
+        return optionValues[Math.max(currentIndex - 1, 0)]; // not wrap around
+      },
+      [getOptionValues]
+    );
+
+    // Scroll focused element into view
+    const scrollFocusedElementIntoView = useEventCallback(
+      (nextFocusedValue: PicklistValue | undefined) => {
+        if (!nextFocusedValue || !dropdownElRef.current) {
+          return;
+        }
+
+        const dropdownContainer = dropdownElRef.current;
+        const targetElement = dropdownContainer.querySelector(
+          `#${CSS.escape(optionIdPrefix)}-${nextFocusedValue}`
+        );
+
+        if (!(targetElement instanceof HTMLElement)) {
+          return;
+        }
+
+        // Calculate element position within container
+        const elementTopPosition = targetElement.offsetTop;
+        const elementBottomPosition =
+          elementTopPosition + targetElement.offsetHeight;
+
+        // Calculate currently visible area
+        const currentScrollPosition = dropdownContainer.scrollTop;
+        const visibleAreaHeight = dropdownContainer.clientHeight;
+        const visibleAreaTop = currentScrollPosition;
+        const visibleAreaBottom = currentScrollPosition + visibleAreaHeight;
+
+        // Check if element is outside the visible area
+        const isAbove = elementTopPosition < visibleAreaTop;
+        const isBelow = elementBottomPosition > visibleAreaBottom;
+
+        // Scroll only if element is not currently visible
+        if (isAbove || isBelow) {
+          targetElement.scrollIntoView({
+            block: 'center',
+          });
+        }
+      }
+    );
+
+    // Set initial focus when dropdown opens
+    useEffect(() => {
+      if (opened && !focusedValue) {
+        // Focus on first selected value or first option
+        const initialFocus =
+          values.length > 0 ? values[0] : getOptionValues()[0];
+        setFocusedValue(initialFocus);
+        scrollFocusedElementIntoView(initialFocus);
+      } else if (!opened) {
+        // Reset focus when dropdown closes
+        setFocusedValue(undefined);
+      }
+    }, [
+      opened,
+      values,
+      getOptionValues,
+      focusedValue,
+      scrollFocusedElementIntoView,
+    ]);
+
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
     const comboboxElRef = useRef<HTMLDivElement | null>(null);
@@ -210,20 +325,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       );
     });
 
-    const focusToTargetItemEl = useEventCallback(() => {
-      const dropdownEl = dropdownElRef.current;
-      if (!dropdownEl) {
-        return;
-      }
-      const firstItemEl: HTMLAnchorElement | null =
-        dropdownEl.querySelector(
-          '.slds-is-selected > .react-slds-menuitem[tabIndex]'
-        ) || dropdownEl.querySelector('.react-slds-menuitem[tabIndex]');
-      if (firstItemEl) {
-        firstItemEl.focus();
-      }
-    });
-
     const onClick = useEventCallback(() => {
       if (!disabled) {
         setOpened((opened) => !opened);
@@ -245,25 +346,81 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       }, 10);
     });
 
-    const onKeydown = useEventCallback((e: React.KeyboardEvent) => {
+    const onKeyDown = useEventCallback((e: React.KeyboardEvent) => {
       if (e.keyCode === 40) {
         // down
         e.preventDefault();
         e.stopPropagation();
         if (!opened) {
           setOpened(true);
-          setTimeout(() => {
-            focusToTargetItemEl();
-          }, 10);
         } else {
-          focusToTargetItemEl();
+          // Navigate to next option
+          const nextValue = getNextValue(focusedValue);
+          setFocusedValue(nextValue);
+          scrollFocusedElementIntoView(nextValue);
+        }
+      } else if (e.keyCode === 38) {
+        // up
+        e.preventDefault();
+        e.stopPropagation();
+        if (!opened) {
+          setOpened(true);
+        } else {
+          // Navigate to previous option
+          const prevValue = getPrevValue(focusedValue);
+          setFocusedValue(prevValue);
+          scrollFocusedElementIntoView(prevValue);
+        }
+      } else if (e.keyCode === 9) {
+        // Tab or Shift+Tab
+        if (opened) {
+          e.preventDefault();
+          e.stopPropagation();
+          const optionValues = getOptionValues();
+          const currentIndex = focusedValue
+            ? optionValues.indexOf(focusedValue)
+            : -1;
+
+          if (e.shiftKey) {
+            // Shift+Tab - Navigate to previous option or close if at first
+            if (currentIndex <= 0) {
+              // At first option or no focus, close the picklist
+              setOpened(false);
+              onComplete?.();
+            } else {
+              const prevValue = getPrevValue(focusedValue);
+              setFocusedValue(prevValue);
+              scrollFocusedElementIntoView(prevValue);
+            }
+          } else {
+            // Tab - Navigate to next option or close if at last
+            if (currentIndex >= optionValues.length - 1) {
+              // At last option, close the picklist
+              setOpened(false);
+              onComplete?.();
+            } else {
+              const nextValue = getNextValue(focusedValue);
+              setFocusedValue(nextValue);
+              scrollFocusedElementIntoView(nextValue);
+            }
+          }
         }
       } else if (e.keyCode === 27) {
         // ESC
         e.preventDefault();
         e.stopPropagation();
         setOpened(false);
         onComplete?.();
+      } else if (e.keyCode === 13 || e.keyCode === 32) {
+        // Enter or Space
+        e.preventDefault();
+        e.stopPropagation();
+        if (opened && focusedValue != null) {
+          // Select focused option
+          onPicklistItemSelect(focusedValue);
+        } else {
+          setOpened((opened) => !opened);
+        }
       }
       onKeyDown_?.(e);
     });
@@ -316,6 +473,11 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         'slds-is-disabled': disabled,
       }
     );
+    const dropdownClassNames = classnames(
+      'slds-dropdown',
+      'slds-dropdown_length-5',
+      menuSize ? `slds-dropdown_${menuSize}` : 'slds-dropdown_fluid'
+    );
 
     const formElemProps = {
       id,
@@ -332,6 +494,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       values,
       multiSelect,
       onSelect: onPicklistItemSelect,
+      focusedValue,
       optionIdPrefix,
     };
 
@@ -352,8 +515,11 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 aria-expanded={opened}
                 aria-haspopup='listbox'
                 aria-disabled={disabled}
+                aria-activedescendant={
+                  focusedValue ? `${optionIdPrefix}-${focusedValue}` : undefined
+                }
                 onClick={onClick}
-                onKeyDown={onKeydown}
+                onKeyDown={onKeyDown}
                 onBlur={onBlur}
                 {...rprops}
               >
@@ -367,22 +533,25 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               </span>
             </div>
             {opened && (
-              <DropdownMenu
-                portalClassName={classnames(className, 'slds-picklist')}
-                elementRef={dropdownRef}
-                size={menuSize}
-                style={menuStyle}
-                onMenuSelect={onPicklistItemSelect}
-                onMenuClose={() => {
-                  setOpened(false);
-                  onComplete?.();
-                }}
-                onBlur={onBlur}
+              <div
+                id={listboxId}
+                className={dropdownClassNames}
+                role='listbox'
+                aria-label='Options'
+                tabIndex={0}
+                aria-busy={false}
+                ref={dropdownRef}
+                style={{ ...menuStyle, left: 0, transform: 'translate(0)' }}
               >
-                <PicklistContext.Provider value={contextValue}>
-                  {children}
-                </PicklistContext.Provider>
-              </DropdownMenu>
+                <ul
+                  className='slds-listbox slds-listbox_vertical'
+                  role='presentation'
+                >
+                  <PicklistContext.Provider value={contextValue}>
+                    {children}
+                  </PicklistContext.Provider>
+                </ul>
+              </div>
             )}
           </div>
         </div>
@@ -412,22 +581,54 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   value,
   disabled,
   children,
-  ...props
 }) => {
-  const { values } = useContext(PicklistContext);
+  const { values, multiSelect, onSelect, focusedValue, optionIdPrefix } =
+    useContext(PicklistContext);
   const selected =
     selected_ ?? (value != null ? values.indexOf(value) >= 0 : false);
+  const isFocused = focusedValue === value;
+
+  const onClick = useEventCallback(() => {
+    if (!disabled && value != null) {
+      onSelect(value);
+    }
+  });
+
+  const itemClassNames = classnames(
+    'slds-media',
+    'slds-listbox__option',
+    'slds-listbox__option_plain',
+    'slds-media_small',
+    {
+      'slds-is-selected': selected,
+      'slds-has-focus': isFocused,
+    }
+  );
 
   return (
-    <DropdownMenuItem
-      icon={selected ? 'check' : 'none'}
-      role='option'
-      selected={selected}
-      disabled={disabled}
-      eventKey={value}
-      {...props}
-    >
-      {label || children}
-    </DropdownMenuItem>
+    <li role='presentation' className='slds-listbox__item'>
+      <div
+        id={value ? `${optionIdPrefix}-${value}` : undefined}
+        className={itemClassNames}
+        role='option'
+        aria-selected={selected}
+        aria-checked={multiSelect ? selected : undefined}
+        aria-disabled={disabled}
+        onClick={onClick}
+      >
+        <span className='slds-media__figure slds-listbox__option-icon'>
+          {selected && (
+            <span className='slds-icon_container slds-icon-utility-check slds-current-color'>
+              <Icon icon='check' className='slds-icon slds-icon_x-small' />
+            </span>
+          )}
+        </span>
+        <span className='slds-media__body'>
+          <span className='slds-truncate' title={String(label || children)}>
+            {label || children}
+          </span>
+        </span>
+      </div>
+    </li>
   );
 };