@helloimjolopez-pathway/pathway-components 0.12.0 → 0.13.0

package/components/popover-menu/popover-menu.jsx

@@ -60,6 +60,7 @@ import { Spinner } from "../spinner/spinner.jsx";
 import { Badge } from "../badge/badge.jsx";
 import { Avatar, initialsFrom } from "../avatar/avatar.jsx";
 import { Button } from "../button/button.jsx";
+import { Tooltip } from "../tooltip/tooltip.jsx";
 
 // ─── TOKEN HELPERS ────────────────────────────────────────────────────────────
 // SC = semantic-color (themes/*.css), SL = semantic-layout-units (layout.css),
@@ -191,6 +192,12 @@ export const TYPE = {
   header:  { fontSize: ST("font-size-xs"), lineHeight: ST("line-height-xs-single"), fontWeight: ST("weight-semibold"), letterSpacing: ST("letter-spacing-wide") },
 };
 
+/* The BottomSheet's tokens and measurements (bottom-sheet.jsx T and L), named
+   here rather than imported because BottomSheet imports this module. */
+const SHEET_T = { surface: SC("fill-surface-elevated"), overlay: SC("scrim-subtle"), handle: SC("fill-static-neutral-strong") };
+const SHEET_L = { radius: SL("cornerradius-xlarge"), pillRadius: SL("cornerradius-full"),
+  maxWidth: 640, topClearance: 56, handleZone: 20, pillWidth: 32, pillHeight: 4 };
+
 const ITEM = ".pw-menu-item";
 const live = (s) => `${ITEM}:not([data-disabled]):is(${s})`;
 const HOVER = "[data-hovered],[data-focused],[data-open],[data-force=Hover],[data-force=Focus]";
@@ -206,6 +213,9 @@ const CSS = `
   background:${T.panel};border:${L.panelBorder} solid ${T.panelBorder};border-radius:${L.panelRadius};box-shadow:${L.shadow};
   font-family:${ST("family-brand")},sans-serif}
 .pw-menu-panel[data-searchable]{height:${L.searchHeight}px}
+/* React Aria stacks the panel at 100000 inline; a truncated label's Tooltip
+   (portalled to the body at 1000) has to sit above it. */
+body:has(.pw-menu-panel) .pw-tooltip{z-index:100001}
 .pw-menu-panel[data-entering]{animation:pw-menu-in ${M("duration-4")} ${M("easing-decelerate")} both}
 .pw-menu-panel[data-placement=top][data-entering]{animation-name:pw-menu-in-up}
 .pw-menu-panel[data-exiting]{animation:pw-menu-out ${M("duration-2")} ${M("easing-standard")} both}
@@ -304,7 +314,26 @@ ${ITEM}:is([data-selected],[data-current]) .pw-menu-item__stripe{background:${T.
   border:0;border-radius:${L.itemRadius};background:${T.avatarFill};color:${T.avatarText};font-size:${ST("font-size-xxs")};font-weight:${ST("weight-semibold")}}
 .pw-menu-trigger :is(.pw-menu-trigger__icon,.pw-menu-trigger__button,.pw-menu-trigger__avatar):focus-visible{outline:${L.focusWidth} solid ${T.focusRing}}
 
+/* smallScreen="sheet" (G4, pending the overlay family decision): below 768 the
+   panel opens as a bottom sheet from the BottomSheet tokens, the way the
+   approved demo draws it. The scrim is a spread shadow, so a press outside
+   still reaches the page and closes the menu. */
+@media (max-width: 767px){
+  .pw-menu-panel[data-small-screen=sheet]{position:fixed !important;top:auto !important;bottom:0 !important;left:0 !important;right:0 !important;
+    width:auto;max-width:${SHEET_L.maxWidth}px;margin:0 auto;max-height:calc(var(--visual-viewport-height,100vh) - ${SHEET_L.topClearance}px);
+    padding-top:${SHEET_L.handleZone}px;padding-bottom:env(safe-area-inset-bottom,0);
+    background:${SHEET_T.surface};border-bottom:0;border-radius:${SHEET_L.radius} ${SHEET_L.radius} 0 0;box-shadow:0 0 0 100vmax ${SHEET_T.overlay}}
+  .pw-menu-panel[data-small-screen=sheet]::before{content:"";position:absolute;top:${(SHEET_L.handleZone - SHEET_L.pillHeight) / 2}px;left:50%;
+    width:${SHEET_L.pillWidth}px;height:${SHEET_L.pillHeight}px;margin-left:-${SHEET_L.pillWidth / 2}px;border-radius:${SHEET_L.pillRadius};background:${SHEET_T.handle}}
+  .pw-menu-panel[data-small-screen=sheet][data-entering],.pw-menu-panel[data-small-screen=sheet][data-placement=top][data-entering]{animation:pw-menu-sheet-in ${M("duration-5")} ${M("easing-emphasized")} both}
+  .pw-menu-panel[data-small-screen=sheet][data-exiting]{animation:pw-menu-sheet-out ${M("duration-4")} ${M("easing-accelerate")} both}
+  @keyframes pw-menu-sheet-in{from{transform:translateY(100%)}to{transform:none}}
+  @keyframes pw-menu-sheet-out{from{transform:none}to{transform:translateY(100%)}}
+}
+
 @media (prefers-reduced-motion: reduce){
+  .pw-menu-panel[data-small-screen=sheet][data-entering],.pw-menu-panel[data-small-screen=sheet][data-placement=top][data-entering]{animation:pw-menu-fade ${M("duration-2")} ${M("easing-standard")} both}
+  .pw-menu-panel[data-small-screen=sheet][data-exiting]{animation:pw-menu-out ${M("duration-2")} ${M("easing-standard")} both}
   .pw-menu-panel[data-entering],.pw-menu-panel[data-placement=top][data-entering]{animation:pw-menu-fade ${M("duration-2")} ${M("easing-standard")} both}
   .pw-menu-panel[data-exiting]{animation:pw-menu-out ${M("duration-2")} ${M("easing-standard")} both}
   @keyframes pw-menu-fade{from{opacity:0}to{opacity:1}}
@@ -325,8 +354,9 @@ function useStyles() {
 
 /* Picks are seen before the panel goes: the row shows its new state for
    Duration/3, then the panel fades (approved demo). */
-const pickDelay = () => (typeof document !== "undefined"
-  && parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--motion-duration-3"))) || 200;
+const motionMs = (name, fallback) => (typeof document !== "undefined"
+  && parseFloat(getComputedStyle(document.documentElement).getPropertyValue(name))) || fallback;
+const pickDelay = () => motionMs("--motion-duration-3", 200);
 
 // ─── CONTEXTS ─────────────────────────────────────────────────────────────────
 
@@ -379,6 +409,32 @@ function Trailing({ trailing, hasSubmenu }) {
   return null;
 }
 
+/* A label cut off by the panel width shows the full text in the real Tooltip:
+   on hover after Duration/4, on keyboard focus at once (approved demo). The
+   item's accessible name already carries the full label, so the tooltip is
+   visual only and leaves the item's ARIA alone. */
+function ItemLabel({ label, s }) {
+  const ref = useRef(null);
+  const [cut, setCut] = useState(false);
+  const [hoverOpen, setHoverOpen] = useState(false);
+  const engaged = !!(s.isHovered || s.isFocusVisible);
+  useEffect(() => {
+    const el = ref.current;
+    setCut(!!el && el.scrollWidth > el.clientWidth + 1);
+  }, [engaged, label]);
+  useEffect(() => {
+    if (!s.isHovered) { setHoverOpen(false); return undefined; }
+    const t = setTimeout(() => setHoverOpen(true), motionMs("--motion-duration-4", 300));
+    return () => clearTimeout(t);
+  }, [s.isHovered]);
+  const open = cut && typeof label === "string" && (!!s.isFocusVisible || hoverOpen);
+  return (
+    <Tooltip content={typeof label === "string" ? label : undefined} open={open} manageAria={false} align="start">
+      <span ref={ref} className="pw-menu-item__label">{label}</span>
+    </Tooltip>
+  );
+}
+
 /* The one item anatomy: [stripe] [indicator + visual] [label, description or
    reason] [trailing]. The indicator is the real Checkbox or Radio, visual
    only: the item is the control and owns the role, the state and the target. */
@@ -413,10 +469,10 @@ function ItemContent({ p, s }) {
       <span className="pw-menu-item__text" data-inline={inline || undefined}>
         {p.badges && p.badges.length ? (
           <span className="pw-menu-item__label-row">
-            <span className="pw-menu-item__label">{p.label}</span>
+            <ItemLabel label={p.label} s={s} />
             {p.badges.map((b) => <Badge key={b.label} label={b.label} status={b.status || "Neutral"} size="Medium" badgeStyle="Outline & Fill" />)}
           </span>
-        ) : <span className="pw-menu-item__label">{p.label}</span>}
+        ) : <ItemLabel label={p.label} s={s} />}
         {inline ? <span className="pw-menu-item__desc">{p.inlineText}</span>
           : p.description ? <span className="pw-menu-item__desc">{p.description}</span> : null}
         {p.reason && (
@@ -634,6 +690,7 @@ export function PopoverMenuList({
  * @param {"none"|"single"|"multiple"} selectionMode, selectedKeys, onSelectionChange, onAction
  * @param {ReactNode} header, footer, emptyState  See PopoverMenuList
  * @param {boolean} searchable   The panel opens at the fixed 360 height and keeps it while the list filters
+ * @param {"float"|"sheet"} smallScreen  Below 768: float from the trigger (default), or open as a bottom sheet. Pending decision G4
  */
 export function PopoverMenu({
   type = "icon",
@@ -657,6 +714,7 @@ export function PopoverMenu({
   footer,
   emptyState,
   searchable = false,
+  smallScreen = "float",
   maxHeight,
   className = "",
   style,
@@ -736,7 +794,8 @@ export function PopoverMenu({
         [RootMenuTriggerStateContext, state],
         [PopoverContext, { trigger: "MenuTrigger", triggerRef: wrap, placement: `bottom ${align}` }],
       ]}>
-        <Popover className="pw-menu-panel" offset={L.offset} data-searchable={searchable || undefined}>
+        <Popover className="pw-menu-panel" offset={L.offset} data-searchable={searchable || undefined}
+          data-small-screen={smallScreen === "sheet" ? "sheet" : undefined}>
           {list}
         </Popover>
       </Provider>