@the-portland-company/shell 0.95.0 → 0.96.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { P as PageHeaderProps, B as BreadcrumbBarProps, N as NavItem } from './index-AIzWNzl-.cjs';
-export { A as AI_CREDITS_STATE_TITLES, a as AiCreditsState, b as AiCreditsStateKind, C as Card, c as CommsNotification, d as CommsNotificationKind, F as FormColumn, H as HeaderTabBar, e as HeaderTabBarItem, K as KNOWN_TAB_GLYPHS, f as NotificationsAdapter, g as NotificationsFeed, T as TabGlyphComponent, h as aiCreditsWalletUrl, i as createCommsNotificationsAdapter, j as emptyNotificationsFeed, n as normalizeNotificationsFeed, r as resolveTabGlyph } from './index-AIzWNzl-.cjs';
+import { P as PageHeaderProps, B as BreadcrumbBarProps, N as NavItem } from './index-3YFy4JHI.cjs';
+export { A as AI_CREDITS_STATE_TITLES, a as AiCreditsState, b as AiCreditsStateKind, C as Card, c as CommsNotification, d as CommsNotificationKind, F as FormColumn, H as HeaderTabBar, e as HeaderTabBarItem, K as KNOWN_TAB_GLYPHS, f as NotificationsAdapter, g as NotificationsFeed, R as RowMenu, h as RowMenuItem, i as RowMenuPlacement, T as TabGlyphComponent, j as aiCreditsWalletUrl, k as createCommsNotificationsAdapter, l as emptyNotificationsFeed, n as normalizeNotificationsFeed, r as resolveTabGlyph, m as rowMenuPosition } from './index-3YFy4JHI.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, CSSProperties } from 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { P as PageHeaderProps, B as BreadcrumbBarProps, N as NavItem } from './index-Byjq0Whp.js';
-export { A as AI_CREDITS_STATE_TITLES, a as AiCreditsState, b as AiCreditsStateKind, C as Card, c as CommsNotification, d as CommsNotificationKind, F as FormColumn, H as HeaderTabBar, e as HeaderTabBarItem, K as KNOWN_TAB_GLYPHS, f as NotificationsAdapter, g as NotificationsFeed, T as TabGlyphComponent, h as aiCreditsWalletUrl, i as createCommsNotificationsAdapter, j as emptyNotificationsFeed, n as normalizeNotificationsFeed, r as resolveTabGlyph } from './index-Byjq0Whp.js';
+import { P as PageHeaderProps, B as BreadcrumbBarProps, N as NavItem } from './index-CqHKy3vG.js';
+export { A as AI_CREDITS_STATE_TITLES, a as AiCreditsState, b as AiCreditsStateKind, C as Card, c as CommsNotification, d as CommsNotificationKind, F as FormColumn, H as HeaderTabBar, e as HeaderTabBarItem, K as KNOWN_TAB_GLYPHS, f as NotificationsAdapter, g as NotificationsFeed, R as RowMenu, h as RowMenuItem, i as RowMenuPlacement, T as TabGlyphComponent, j as aiCreditsWalletUrl, k as createCommsNotificationsAdapter, l as emptyNotificationsFeed, n as normalizeNotificationsFeed, r as resolveTabGlyph, m as rowMenuPosition } from './index-CqHKy3vG.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, CSSProperties } from 'react';

package/dist/index.js

@@ -1,5 +1,5 @@
-import { PageHeaderView, warnDeprecated, BreadcrumbBarView } from './chunk-JQ53VZO5.js';
-export { AI_CREDITS_STATE_TITLES, AiCreditsState, Card, FormColumn, HeaderTabBar, KNOWN_TAB_GLYPHS, SpeculationRulesScript, aiCreditsWalletUrl, buildNavSpeculationRules, buildSpeculationRules, collectSiblingAppUrls, createCommsNotificationsAdapter, emptyNotificationsFeed, normalizeNotificationsFeed, resolveTabGlyph } from './chunk-JQ53VZO5.js';
+import { PageHeaderView, warnDeprecated, BreadcrumbBarView } from './chunk-5OTXPYZU.js';
+export { AI_CREDITS_STATE_TITLES, AiCreditsState, Card, FormColumn, HeaderTabBar, KNOWN_TAB_GLYPHS, RowMenu, RowMenuItem, SpeculationRulesScript, aiCreditsWalletUrl, buildNavSpeculationRules, buildSpeculationRules, collectSiblingAppUrls, createCommsNotificationsAdapter, emptyNotificationsFeed, normalizeNotificationsFeed, resolveTabGlyph, rowMenuPosition } from './chunk-5OTXPYZU.js';
 import { readResolvedTheme } from './chunk-BHRVZPZ7.js';
 export { BRAND_APPLE_ICON_LINK_ID, BRAND_FAVICON_LINK_ID, BrandFavicon, applyBrandFavicon, watchBrandFavicon } from './chunk-BMR5WAWH.js';
 import { extendTheme, ChakraProvider, useColorMode } from '@chakra-ui/react';

package/dist/native.cjs

@@ -2726,6 +2726,258 @@ function AiCreditsState({
     )
   ] });
 }
+var GAP = 4;
+var EDGE = 8;
+var closeOpenRowMenu = null;
+var TRIGGER_STYLE = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 28,
+  height: 28,
+  borderRadius: 6,
+  border: "none",
+  background: "transparent",
+  color: "var(--color-text-muted, #6b7280)",
+  cursor: "pointer",
+  lineHeight: 1
+};
+var PANEL_STYLE = {
+  minWidth: 160,
+  padding: 4,
+  border: "1px solid var(--color-border, #e5e7eb)",
+  borderRadius: 8,
+  background: "var(--color-surface, #fff)",
+  boxShadow: "0 10px 24px rgba(15, 23, 42, 0.12)",
+  display: "flex",
+  flexDirection: "column",
+  textAlign: "left"
+};
+var ITEM_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  padding: "6px 10px",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  font: "inherit",
+  fontSize: 14,
+  color: "var(--color-text, #2F3136)",
+  textAlign: "left",
+  cursor: "pointer"
+};
+function rowMenuPosition(trigger, panel, viewport) {
+  const below = viewport.height - trigger.bottom - GAP - EDGE;
+  const above = trigger.top - GAP - EDGE;
+  const placement = panel.height > below && above > below ? "above" : "below";
+  const rawTop = placement === "above" ? trigger.top - GAP - panel.height : trigger.bottom + GAP;
+  const top = Math.max(EDGE, Math.min(rawTop, viewport.height - panel.height - EDGE));
+  const left = Math.max(EDGE, Math.min(trigger.right - panel.width, viewport.width - panel.width - EDGE));
+  return { top, left, placement };
+}
+function menuItems(panel) {
+  if (!panel) return [];
+  return Array.from(panel.querySelectorAll('[role="menuitem"]')).filter(
+    (el) => !el.disabled && el.getAttribute("aria-disabled") !== "true"
+  );
+}
+function RowMenu({
+  label = "More actions",
+  title,
+  icon,
+  children,
+  triggerClassName,
+  triggerStyle,
+  panelClassName,
+  panelStyle,
+  onOpenChange
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [pos, setPos] = react.useState(null);
+  const triggerRef = react.useRef(null);
+  const panelRef = react.useRef(null);
+  const focusFirstRef = react.useRef(false);
+  const onOpenChangeRef = react.useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const close = react.useCallback((restoreFocus = false) => {
+    setOpen(false);
+    if (restoreFocus) triggerRef.current?.focus();
+  }, []);
+  const place = react.useCallback(() => {
+    const t = triggerRef.current;
+    const p = panelRef.current;
+    if (!t || !p) return;
+    const r = t.getBoundingClientRect();
+    setPos(rowMenuPosition(
+      { top: r.top, bottom: r.bottom, right: r.right },
+      { width: p.offsetWidth, height: p.offsetHeight },
+      { width: window.innerWidth, height: window.innerHeight }
+    ));
+  }, []);
+  react.useEffect(() => {
+    onOpenChangeRef.current?.(open);
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const mine = () => setOpen(false);
+    if (closeOpenRowMenu && closeOpenRowMenu !== mine) closeOpenRowMenu();
+    closeOpenRowMenu = mine;
+    return () => {
+      if (closeOpenRowMenu === mine) closeOpenRowMenu = null;
+    };
+  }, [open]);
+  react.useLayoutEffect(() => {
+    if (!open) return;
+    place();
+    const p = panelRef.current;
+    if (!p || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => place());
+    ro.observe(p);
+    return () => ro.disconnect();
+  }, [open, place]);
+  react.useEffect(() => {
+    if (!open || !pos || !focusFirstRef.current) return;
+    focusFirstRef.current = false;
+    menuItems(panelRef.current)[0]?.focus();
+  }, [open, pos]);
+  react.useEffect(() => {
+    if (!open) return;
+    const inside = (n) => n instanceof Node && (!!triggerRef.current?.contains(n) || !!panelRef.current?.contains(n));
+    const onPointerDown = (e) => {
+      if (!inside(e.target)) close();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close(true);
+      }
+    };
+    const onScroll = (e) => {
+      if (!inside(e.target)) close();
+    };
+    const onResize = () => close();
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKey, true);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKey, true);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open, close]);
+  function onTriggerKeyDown(e) {
+    if (e.key === "ArrowDown" || (e.key === "Enter" || e.key === " ") && !open) {
+      e.preventDefault();
+      focusFirstRef.current = true;
+      if (open) menuItems(panelRef.current)[0]?.focus();
+      else setOpen(true);
+    }
+  }
+  function onPanelKeyDown(e) {
+    e.stopPropagation();
+    if (e.key === "Tab") {
+      close();
+      return;
+    }
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
+    const items = menuItems(panelRef.current);
+    if (items.length === 0) return;
+    e.preventDefault();
+    const at = items.indexOf(document.activeElement);
+    const next = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : e.key === "ArrowDown" ? (at + 1) % items.length : (at - 1 + items.length) % items.length;
+    items[next]?.focus();
+  }
+  function onPanelClick(e) {
+    e.stopPropagation();
+    const item = e.target.closest?.('[role="menuitem"]');
+    if (!item || !panelRef.current?.contains(item)) return;
+    if (item.disabled || item.getAttribute("aria-disabled") === "true") return;
+    setTimeout(() => close(), 0);
+  }
+  const panel = open && typeof document !== "undefined" ? reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: panelRef,
+        role: "menu",
+        "aria-label": label,
+        "data-row-menu": "",
+        "data-placement": pos?.placement,
+        className: panelClassName,
+        onClick: onPanelClick,
+        onKeyDown: onPanelKeyDown,
+        style: {
+          ...panelClassName ? null : PANEL_STYLE,
+          ...panelStyle,
+          position: "fixed",
+          zIndex: 1e3,
+          top: pos?.top ?? 0,
+          left: pos?.left ?? 0,
+          right: "auto",
+          bottom: "auto",
+          margin: 0,
+          visibility: pos ? "visible" : "hidden"
+        },
+        children
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: triggerClassName,
+        style: { ...triggerClassName ? null : TRIGGER_STYLE, ...triggerStyle },
+        "aria-label": label,
+        title,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "data-open": open ? "" : void 0,
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((v) => !v);
+        },
+        onKeyDown: onTriggerKeyDown,
+        children: icon ?? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u22EF" })
+      }
+    ),
+    panel
+  ] });
+}
+function RowMenuItem({
+  onSelect,
+  disabled,
+  danger,
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className,
+      disabled,
+      onClick: onSelect,
+      style: {
+        ...className ? null : ITEM_STYLE,
+        ...className || !danger ? null : { color: "var(--color-red, #e63946)" },
+        ...className || !disabled ? null : { opacity: 0.5, cursor: "default" },
+        ...style
+      },
+      children
+    }
+  );
+}
 var standardNavIcons = {
   home: lu.LuHouse,
   users: lu.LuUsers,
@@ -4711,6 +4963,8 @@ exports.NavThemeControl = NavThemeControl;
 exports.NavTopBar = NavTopBar;
 exports.NotificationsAction = NotificationsAction;
 exports.PageHeader = PageHeader;
+exports.RowMenu = RowMenu;
+exports.RowMenuItem = RowMenuItem;
 exports.SPECS_ORIGIN = SPECS_ORIGIN;
 exports.SpecOverlayAction = SpecOverlayAction;
 exports.SupportAction = SupportAction;
@@ -4732,6 +4986,7 @@ exports.isNavItemActive = isNavItemActive;
 exports.modeIdFromLabel = modeIdFromLabel;
 exports.resolveOrgLogoUrl = resolveOrgLogoUrl;
 exports.resolveTabGlyph = resolveTabGlyph;
+exports.rowMenuPosition = rowMenuPosition;
 exports.shortEnvLabel = shortEnvLabel;
 exports.shortUserName = shortUserName;
 exports.standardPolitogyNav = standardPolitogyNav;