@helloimjolopez-pathway/pathway-components 0.10.0 → 0.10.2

package/components/badge/badge.jsx

@@ -16,14 +16,14 @@
  *   Outline & Fill stroke   v1 Subtle, Figma Strong (Neutral Bold, accents plain).
  *   Neutral Naked text      v1 Neutral/Bold, Figma Neutral/Base.
  *   Stroke placement        Inside the badge, which keeps its size in every style
- *                           (Small 20, Medium and Large 22). An inset box-shadow
+ *                           (Small 20, Medium 22, Large 24). An inset box-shadow
  *                           draws it without changing the box.
  * Figma's default leading icon is the placeholder `error`; in code the icon is
  * passed explicitly, so existing call sites render exactly as before.
  *
  * DISMISSIBLE and INTERACTIVE, every size, with or without icons:
  *   outer frame    invisible, min width and height Accessibility/Touch Target/AA
- *                  (44). The pill keeps its size (20 / 22 / 22) inside it.
+ *                  (44). The badge keeps its size (20 / 22 / 24) inside it.
  *   Focus Ring     wraps Container.Main, padding FocusRing/Offset, ring outside
  *                  when Focused.
  *   Container.Main the badge: fill, stroke inside, CornerRadius/Large;
@@ -101,8 +101,8 @@ const ACTION = (s) => {
 
 export const BADGE_SIZE_SPEC = {
   Small:  { fontSize: "font-size-xs",  lineHeight: "line-height-xs-single",  icon: 11, ico: 12, contentMax: 200, height: 20 },
-  Medium: { fontSize: "font-size-xs",  lineHeight: "line-height-xs-single",  icon: 12, ico: 14, contentMax: 196 },
-  Large:  { fontSize: "font-size-s",   lineHeight: "line-height-xs-single",  icon: 14, ico: 16, contentMax: 192 },
+  Medium: { fontSize: "font-size-xs",  lineHeight: "line-height-xs-single",  icon: 12, ico: 14, contentMax: 196, height: 22 },
+  Large:  { fontSize: "font-size-s",   lineHeight: "line-height-xs-single",  icon: 14, ico: 16, contentMax: 192, height: 24 },
 };
 
 /** Layout constants. Static keeps v1's asymmetric padding; the other types use T.pill / T.text. */
@@ -147,7 +147,7 @@ const strokeShadow = (stroke) => (stroke ? `inset 0 0 0 ${L.border} ${stroke}` :
 const focusRing = (focused) => (focused
   ? { outline: `${T.ringWidth} solid ${T.ring}`, outlineOffset: T.ringOffset }
   : { outline: "none" });
-/* Small has a fixed height (20) with its 12 text centred, so it needs no top and bottom padding. */
+/* Every size has a fixed height (Small 20, Medium 22, Large 24) with its text centred, so none needs top and bottom padding. */
 const fixedHeight = (spec) => (spec.height ? { height: spec.height, paddingTop: 0, paddingBottom: 0 } : {});
 const transition = `background ${T.duration} ${T.easing}, color ${T.duration} ${T.easing}, box-shadow ${T.duration} ${T.easing}`;
 

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>