@helloimjolopez-pathway/pathway-components 0.10.1 → 0.11.0

package/components/bottom-sheet/bottom-sheet.jsx

@@ -37,7 +37,7 @@
  * as a PopoverMenu; that choice belongs to the host (TopNav, SideNav, a row's
  * More menu), which renders a BottomSheet or a Dropdown. It does not draw the
  * rows either: the Body is a slot, and a menu in it is the real
- * `DropdownItem` / `DropdownDivider` from dropdown.jsx, never a copy.
+ * `PopoverMenuItem` / `PopoverMenuSeparator` from popover-menu.jsx, never a copy.
  *
  * WHY THERE IS NO DRAWER LIBRARY. The Figma description names Vaul Drawer on
  * Radix Dialog. The component package ships with React as its only peer
@@ -50,7 +50,7 @@
 import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ActionIcon } from "../icon/action-icon.jsx";
-import { DropdownClose } from "../dropdown/dropdown.jsx";
+import { PopoverMenuList, PopoverMenuClose } from "../popover-menu/popover-menu.jsx";
 import { useReducedMotion } from "../_shared/use-reduced-motion.jsx";
 
 const C = (n) => `var(--semantic-color-${n})`;
@@ -135,7 +135,7 @@ function useInjectedStyles() {
 }
 
 const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const MENU_ITEMS = '[role="menuitem"]:not([disabled]), [role="menuitemradio"]:not([disabled]), [role="menuitemcheckbox"]:not([disabled])';
+const MENU_ITEMS = ':is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]):not([aria-disabled="true"])';
 
 /** BottomSheet.Handle: the drag affordance. Hidden from assistive technology:
  *  Close, Esc and the overlay are the accessible ways to close. */
@@ -201,8 +201,11 @@ export function BottomSheetOverlay({ onClick, animation, opacity }) {
  *                                  menu item chosen.
  * @param {string}    title         Header Title. Also the dialog's name.
  * @param {node}      children      The Body slot.
- * @param {boolean}   menu          The Body is a menu: role=menu, arrow keys,
- *                                  Home and End. Use with DropdownItem rows.
+ * @param {boolean}   menu          The Body is a menu: a PopoverMenuList named
+ *                                  by the title (role=menu, arrow keys, Home,
+ *                                  End, typeahead). Use with PopoverMenuItem rows.
+ * @param {object}    menuProps     Passed to that PopoverMenuList: selectionMode,
+ *                                  selectedKeys, onSelectionChange, onAction.
  * @param {boolean}   showHandle    Figma `Show Handle`. Default true.
  * @param {node}      footer        BottomSheet.Footer's Actions. Figma
  *                                  `Show Footer` is true when this is given.
@@ -229,6 +232,7 @@ export function BottomSheet({
   title,
   children,
   menu = false,
+  menuProps,
   showHandle = true,
   footer,
   showBack = false,
@@ -333,16 +337,7 @@ export function BottomSheet({
       else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
       return;
     }
-    if (!menu || !body.current || !body.current.contains(document.activeElement)) return;
-    const list = [...body.current.querySelectorAll(MENU_ITEMS)];
-    if (!list.length) return;
-    const here = list.indexOf(document.activeElement);
-    let next = null;
-    if (e.key === "ArrowDown") next = (here + 1) % list.length;
-    else if (e.key === "ArrowUp") next = (here - 1 + list.length) % list.length;
-    else if (e.key === "Home") next = 0;
-    else if (e.key === "End") next = list.length - 1;
-    if (next !== null) { e.preventDefault(); list[next].focus(); }
+    // Arrows, Home, End and typeahead in a menu Body belong to PopoverMenuList.
   };
 
   /* Swipe down to close. It starts anywhere on the sheet, but inside the Body
@@ -410,7 +405,6 @@ export function BottomSheet({
             closeLabel={closeLabel} backLabel={backLabel} />
         </div>
         <div ref={body} className="pw-bottom-sheet__body" data-part="body"
-          role={menu ? "menu" : undefined} aria-labelledby={menu ? titleId : undefined}
           style={{
             display: "flex", flexDirection: "column", gap: L.bodyGap, minHeight: 0, flex: "0 1 auto",
             overflowY: "auto", overflowX: "hidden", overscrollBehavior: "contain",
@@ -418,8 +412,10 @@ export function BottomSheet({
               ? `0 ${L.bodyPad} ${L.bodyPad}`
               : `0 ${L.bodyPad} calc(${L.bodyPad} + env(safe-area-inset-bottom, 0px))`,
           }}>
-          {/* Choosing a DropdownItem closes the sheet, as it closes a Dropdown. */}
-          <DropdownClose.Provider value={requestClose}>{children}</DropdownClose.Provider>
+          {/* Choosing a PopoverMenuItem closes the sheet, as it closes a PopoverMenu. */}
+          <PopoverMenuClose.Provider value={requestClose}>
+            {menu ? <PopoverMenuList bare label={title} {...menuProps}>{children}</PopoverMenuList> : children}
+          </PopoverMenuClose.Provider>
         </div>
         {footer && <BottomSheetFooter>{footer}</BottomSheetFooter>}
       </div>