use DropdownMenu to delegate keyboard handlers

Author: msmx-mnakagawa

src/scripts/Picklist.tsx

@@ -7,14 +7,15 @@ import React, {
   Ref,
   ReactNode,
   useId,
-  useState,
-  useEffect,
-  useCallback,
 } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
-import { DropdownMenuProps } from './DropdownMenu';
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuProps,
+} from './DropdownMenu';
 import { isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
@@ -155,124 +156,8 @@ 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);
@@ -325,6 +210,20 @@ 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);
@@ -346,81 +245,25 @@ 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 {
-          // 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);
-            }
-          }
+          focusToTargetItemEl();
         }
       } 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);
     });
@@ -473,11 +316,6 @@ 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,
@@ -494,7 +332,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       values,
       multiSelect,
       onSelect: onPicklistItemSelect,
-      focusedValue,
       optionIdPrefix,
     };
 
@@ -516,11 +353,8 @@ 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}
               >
@@ -534,25 +368,22 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               </span>
             </div>
             {opened && (
-              <div
-                id={listboxId}
-                className={dropdownClassNames}
-                role='listbox'
-                aria-label='Options'
-                tabIndex={0}
-                aria-busy={false}
-                ref={dropdownRef}
-                style={{ ...menuStyle, left: 0, transform: 'translate(0)' }}
+              <DropdownMenu
+                portalClassName={classnames(className, 'slds-picklist')}
+                elementRef={dropdownRef}
+                size={menuSize}
+                style={menuStyle}
+                onMenuSelect={onPicklistItemSelect}
+                onMenuClose={() => {
+                  setOpened(false);
+                  onComplete?.();
+                }}
+                onBlur={onBlur}
               >
-                <ul
-                  className='slds-listbox slds-listbox_vertical'
-                  role='presentation'
-                >
-                  <PicklistContext.Provider value={contextValue}>
-                    {children}
-                  </PicklistContext.Provider>
-                </ul>
-              </div>
+                <PicklistContext.Provider value={contextValue}>
+                  {children}
+                </PicklistContext.Provider>
+              </DropdownMenu>
             )}
           </div>
         </div>
@@ -582,54 +413,22 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   value,
   disabled,
   children,
+  ...props
 }) => {
-  const { values, multiSelect, onSelect, focusedValue, optionIdPrefix } =
-    useContext(PicklistContext);
+  const { values } = 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 (
-    <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>
+    <DropdownMenuItem
+      icon={selected ? 'check' : 'none'}
+      role='option'
+      selected={selected}
+      disabled={disabled}
+      eventKey={value}
+      {...props}
+    >
+      {label || children}
+    </DropdownMenuItem>
   );
 };