@dloizides/ui-nav 1.12.0 → 1.13.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 1.13.1
+
+- **Fix (mobile drawer: a sub-item / leaf tap dismissed the drawer WITHOUT navigating).**
+  On a phone-width viewport, tapping a leaf inside the open `MobileDrawer` closed the drawer
+  but the route never changed — verified live on finreg via Playwright (real Chromium, real
+  pointer events); every jsdom unit test stayed green because it wired `onClose` to an inert
+  `jest.fn()` that never unmounts anything.
+  - **Root cause.** `MobileDrawer` closes on a nav press via a NATIVE
+    `panel.addEventListener('click', …)`. react-native-web fires a leaf's `onPress` from its
+    `onClick`, dispatched through REACT's synthetic event system whose root listener sits on the
+    app-root container — an ANCESTOR of the panel. So on a real click the native panel listener
+    runs FIRST (during the DOM bubble), and closing synchronously there ran `setDrawerOpen(false)`,
+    unmounting the panel and tearing the leaf out of the tree BEFORE React could dispatch its
+    `onPress`. The navigation call never ran.
+  - **Fix.** The drawer's close is now DEFERRED to the next macrotask (`setTimeout(…, 0)`), so
+    React finishes dispatching the tapped leaf's `onPress` (the navigation) for the current click;
+    the panel then unmounts on the following tick, after the route has already changed. Scrim tap
+    and group-header toggle are unchanged.
+  - **No API change.** All 7 portals get the fix on their next bump.
+
 ## 1.11.0
 
 - **Feature (an expandable nav group now auto-opens when the current route is inside it).**

package/dist/index.d.mts

@@ -972,6 +972,35 @@ interface CommandPaletteProps {
 /** The overlay palette. Renders null when closed. */
 declare const CommandPalette: ({ open, items, onClose, labels, testID }: CommandPaletteProps) => React.ReactElement | null;
 
+/**
+ * CommandPaletteTrigger — the VISIBLE, discoverable affordance that opens the
+ * {@link CommandPalette}. A ⌘K shortcut alone is invisible; a docs-style search
+ * pill (muted placeholder on the left, a keyboard-shortcut badge on the right)
+ * tells operators the palette exists and is one click away. Place it in a shell
+ * header / sidebar; wire `onPress` to the same open handler as the ⌘K hotkey.
+ *
+ * Self-contained on purpose: the shared icon set has no magnifier, so this uses
+ * text + a shortcut badge (the recognizable "Search … ⌘K" pattern) rather than a
+ * render-slot icon — one less thing every consumer must supply. Colours come from
+ * the `@dloizides/ui-feedback` UiProvider theme; the label/shortcut are
+ * pre-localized strings (package discipline: no FM/router imports).
+ */
+
+interface CommandPaletteTriggerProps {
+    /** Placeholder-style label, e.g. "Search". */
+    label: string;
+    /** a11y hint describing what activating it does. */
+    hint: string;
+    /** The shortcut badge text, e.g. "⌘K" (already chosen per-platform by the caller). */
+    shortcut: string;
+    /** Open the palette (same handler as the ⌘K hotkey). */
+    onPress: () => void;
+    /** testID for the trigger. */
+    testID: string;
+}
+/** The visible "Search … ⌘K" pill that opens the command palette. */
+declare const CommandPaletteTrigger: ({ label, hint, shortcut, onPress, testID, }: CommandPaletteTriggerProps) => React.ReactElement;
+
 /**
  * Call `onOpen` when the operator presses ⌘K (macOS) or Ctrl-K (Windows/Linux),
  * anywhere in the document. `enabled=false` unbinds (e.g. when the shell has no
@@ -1232,4 +1261,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.d.ts

@@ -972,6 +972,35 @@ interface CommandPaletteProps {
 /** The overlay palette. Renders null when closed. */
 declare const CommandPalette: ({ open, items, onClose, labels, testID }: CommandPaletteProps) => React.ReactElement | null;
 
+/**
+ * CommandPaletteTrigger — the VISIBLE, discoverable affordance that opens the
+ * {@link CommandPalette}. A ⌘K shortcut alone is invisible; a docs-style search
+ * pill (muted placeholder on the left, a keyboard-shortcut badge on the right)
+ * tells operators the palette exists and is one click away. Place it in a shell
+ * header / sidebar; wire `onPress` to the same open handler as the ⌘K hotkey.
+ *
+ * Self-contained on purpose: the shared icon set has no magnifier, so this uses
+ * text + a shortcut badge (the recognizable "Search … ⌘K" pattern) rather than a
+ * render-slot icon — one less thing every consumer must supply. Colours come from
+ * the `@dloizides/ui-feedback` UiProvider theme; the label/shortcut are
+ * pre-localized strings (package discipline: no FM/router imports).
+ */
+
+interface CommandPaletteTriggerProps {
+    /** Placeholder-style label, e.g. "Search". */
+    label: string;
+    /** a11y hint describing what activating it does. */
+    hint: string;
+    /** The shortcut badge text, e.g. "⌘K" (already chosen per-platform by the caller). */
+    shortcut: string;
+    /** Open the palette (same handler as the ⌘K hotkey). */
+    onPress: () => void;
+    /** testID for the trigger. */
+    testID: string;
+}
+/** The visible "Search … ⌘K" pill that opens the command palette. */
+declare const CommandPaletteTrigger: ({ label, hint, shortcut, onPress, testID, }: CommandPaletteTriggerProps) => React.ReactElement;
+
 /**
  * Call `onOpen` when the operator presses ⌘K (macOS) or Ctrl-K (Windows/Linux),
  * anywhere in the document. `enabled=false` unbinds (e.g. when the shell has no
@@ -1232,4 +1261,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.js

@@ -1054,6 +1054,10 @@ var SCRIM_Z_INDEX = 1;
 var PANEL_Z_INDEX = 2;
 var NAV_ACTIVATABLE_SELECTOR = 'a, [role="button"], [role="link"]';
 var NAV_TOGGLE_SELECTOR = "[aria-expanded]";
+function deferClose(close) {
+  if (typeof setTimeout === "function") setTimeout(close, 0);
+  else close();
+}
 var DEFAULT_DRAWER_LABELS = {
   openLabel: "Menu",
   openHint: "Open the navigation menu",
@@ -1119,7 +1123,7 @@ var MobileDrawer = ({
       if (target === null) return;
       const activatable = target.closest(NAV_ACTIVATABLE_SELECTOR);
       const isToggle = activatable !== null && activatable.closest(NAV_TOGGLE_SELECTOR) !== null;
-      if (activatable !== null && !isToggle) onClose();
+      if (activatable !== null && !isToggle) deferClose(onClose);
     };
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
@@ -1671,6 +1675,55 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     )
   ] });
 };
+var MIN_TARGET = 36;
+var styles5 = reactNative.StyleSheet.create({
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    columnGap: 8,
+    paddingHorizontal: 12,
+    minHeight: MIN_TARGET,
+    borderWidth: 1,
+    borderRadius: 8
+  },
+  label: { fontSize: 14 },
+  badge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, borderWidth: 1 },
+  badgeText: { fontSize: 11, fontWeight: "700" }
+});
+var CommandPaletteTrigger = ({
+  label,
+  hint,
+  shortcut,
+  onPress,
+  testID
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  const primary = theme.palette.primary["500"];
+  const [focused, setFocused] = React2__default.default.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      accessibilityRole: "button",
+      style: [
+        styles5.trigger,
+        { backgroundColor: colors.surface, borderColor: colors.border },
+        focusRingStyle(focused, primary)
+      ],
+      testID,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onPress,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.label, { color: colors.textSecondary }], children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles5.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.badgeText, { color: colors.textSecondary }], children: shortcut }) })
+      ]
+    }
+  );
+};
 var LAUNCH_KEY = "k";
 function useCommandPaletteHotkey(onOpen, enabled = true) {
   React2.useEffect(() => {
@@ -1703,6 +1756,7 @@ exports.BASE_INDENT = BASE_INDENT;
 exports.CHEVRON_ICON_SIZE = CHEVRON_ICON_SIZE;
 exports.CollapsedRail = CollapsedRail;
 exports.CommandPalette = CommandPalette;
+exports.CommandPaletteTrigger = CommandPaletteTrigger;
 exports.DEFAULT_COLLAPSED_RAIL_MAX = DEFAULT_COLLAPSED_RAIL_MAX;
 exports.DarkModeControl = DarkModeControl;
 exports.NAV_ICON_SIZE = NAV_ICON_SIZE;