@dloizides/ui-nav 1.12.0 → 1.13.1

package/dist/index.mjs

@@ -1048,6 +1048,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",
@@ -1113,7 +1117,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);
@@ -1665,6 +1669,55 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     )
   ] });
 };
+var MIN_TARGET = 36;
+var styles5 = 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 } = useUi();
+  const colors = theme.colors;
+  const primary = theme.palette.primary["500"];
+  const [focused, setFocused] = React2.useState(false);
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(Text, { style: [styles5.label, { color: colors.textSecondary }], children: label }),
+        /* @__PURE__ */ jsx(View, { style: [styles5.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsx(Text, { style: [styles5.badgeText, { color: colors.textSecondary }], children: shortcut }) })
+      ]
+    }
+  );
+};
 var LAUNCH_KEY = "k";
 function useCommandPaletteHotkey(onOpen, enabled = true) {
   useEffect(() => {
@@ -1690,6 +1743,6 @@ function accessibleNavItems(user, table, translate) {
   return roleRoutesToNavItems(resolveAccessibleRoutes(user, table), translate);
 }
 
-export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, CommandPalette, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, NavExpandableItem, NavOverflowMenu, NavShell, PillNav, RAIL_FULL_BREAKPOINT, Sidebar, Topbar, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, CommandPalette, CommandPaletteTrigger, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, NavExpandableItem, NavOverflowMenu, NavShell, PillNav, RAIL_FULL_BREAKPOINT, Sidebar, Topbar, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map