@dloizides/ui-nav 1.10.2 → 1.12.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { StyleSheet, Platform, TouchableOpacity, View, Text, useWindowDimensions, ActivityIndicator, ScrollView, Pressable } from 'react-native';
+import { StyleSheet, Platform, TouchableOpacity, View, Text, useWindowDimensions, ActivityIndicator, ScrollView, Pressable, TextInput } from 'react-native';
 import { useUi, UiProvider } from '@dloizides/ui-feedback';
 import React2, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -13,6 +13,7 @@ function isRouteActive(pathname, route) {
   return pathname === route || pathname.startsWith(`${route}/`);
 }
 var ACTIVE_BORDER_RADIUS = 4;
+var ACTIVE_ACCENT_WIDTH = 3;
 var NAV_LINK_GAP = 4;
 var navStyles = StyleSheet.create({
   // --- Sidebar ---
@@ -236,23 +237,39 @@ var collapsedRailStyles = StyleSheet.create({
   slot: { alignItems: "center" }
 });
 var expandableStyles = StyleSheet.create({
+  // Every leaf reserves the accent-bar gutter (a TRANSPARENT left border of the
+  // same width the active item colours in) so activation never shifts the row.
   childItem: {
-    borderRadius: 4,
+    borderRadius: 6,
     flexDirection: "row",
     alignItems: "center",
-    paddingVertical: 6
+    paddingVertical: 9,
+    borderLeftWidth: ACTIVE_ACCENT_WIDTH,
+    borderLeftColor: "transparent"
   },
   childItemText: { fontSize: 14 },
   childItemTextWithIcon: { fontSize: 14, marginLeft: 6 },
   chevron: { marginLeft: "auto" },
-  childrenContainer: { overflow: "hidden" },
+  childrenContainer: { overflow: "hidden", marginBottom: 4 },
   header: {
-    borderRadius: 4,
+    borderRadius: 6,
     flexDirection: "row",
     alignItems: "center",
     paddingVertical: 8
   },
+  // Depth-0 module groups render as docs-style SECTION HEADERS: extra top rhythm
+  // to separate one module from the next.
+  sectionHeader: { marginTop: 12 },
   headerText: { fontSize: 15, fontWeight: "600", marginLeft: 6 },
+  // The section-label look: small, uppercased, tracked, muted — the aml-screening
+  // docs treatment ("START HERE" / "REFERENCE"), kept on an interactive toggle.
+  sectionHeaderText: {
+    fontSize: 12,
+    fontWeight: "700",
+    marginLeft: 6,
+    textTransform: "uppercase",
+    letterSpacing: 0.8
+  },
   iconWrapper: { width: 20, alignItems: "center" }
 });
 var BASE_INDENT = 12;
@@ -283,6 +300,13 @@ function hoverTransitionStyle(reducedMotion) {
 function ariaCurrentProps(isActive) {
   return isActive ? { "aria-current": "page" } : {};
 }
+function ariaExpandedProps(expanded) {
+  return { "aria-expanded": expanded };
+}
+function hasActiveDescendant(item, pathname) {
+  if (isRouteActive(pathname, item.route)) return true;
+  return (item.children ?? []).some((child) => hasActiveDescendant(child, pathname));
+}
 var NavExpandableItem = ({
   item,
   pathname,
@@ -293,7 +317,7 @@ var NavExpandableItem = ({
   renderChevron,
   depth = 0
 }) => {
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(() => hasActiveDescendant(item, pathname));
   const [focused, setFocused] = useState(false);
   const { theme } = useUi();
   const colors = theme.colors;
@@ -302,9 +326,15 @@ var NavExpandableItem = ({
   const indent = depth * BASE_INDENT;
   const hasChildren = Array.isArray(item.children) && item.children.length > 0;
   const isActive = isRouteActive(pathname, item.route);
+  const isSectionHeader = hasChildren && depth === 0;
   const activeItemStyle = useMemo(
-    () => ({ backgroundColor: colors.border, borderRadius: ACTIVE_BORDER_RADIUS }),
-    [colors.border]
+    () => ({
+      backgroundColor: colors.border,
+      borderRadius: ACTIVE_BORDER_RADIUS,
+      borderLeftWidth: ACTIVE_ACCENT_WIDTH,
+      borderLeftColor: primaryColor
+    }),
+    [colors.border, primaryColor]
   );
   const paddingStyle = useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
   const headerPaddingStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
@@ -350,14 +380,29 @@ var NavExpandableItem = ({
         accessibilityLabel: item.label,
         accessibilityRole: "button",
         accessibilityState: { expanded },
-        style: [expandableStyles.header, headerPaddingStyle, focusRingStyle(focused, primaryColor)],
+        style: [
+          expandableStyles.header,
+          isSectionHeader ? expandableStyles.sectionHeader : void 0,
+          headerPaddingStyle,
+          focusRingStyle(focused, primaryColor)
+        ],
         testID: item.testID ?? item.key,
         onBlur: () => setFocused(false),
         onFocus: () => setFocused(true),
         onPress: toggle,
+        ...ariaExpandedProps(expanded),
         children: [
-          typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.text, NAV_ICON_SIZE) }) : null,
-          /* @__PURE__ */ jsx(Text, { style: [expandableStyles.headerText, { color: colors.text }], children: item.label }),
+          typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.iconWrapper, children: item.renderIcon(isSectionHeader ? colors.textSecondary : colors.text, NAV_ICON_SIZE) }) : null,
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                isSectionHeader ? expandableStyles.sectionHeaderText : expandableStyles.headerText,
+                { color: isSectionHeader ? colors.textSecondary : colors.text }
+              ],
+              children: item.label
+            }
+          ),
           typeof renderChevron === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.chevron, children: renderChevron(expanded, colors.textSecondary, CHEVRON_ICON_SIZE) }) : null
         ]
       }
@@ -1002,6 +1047,7 @@ var DRAWER_WIDTH = 280;
 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]";
 var DEFAULT_DRAWER_LABELS = {
   openLabel: "Menu",
   openHint: "Open the navigation menu",
@@ -1064,8 +1110,10 @@ var MobileDrawer = ({
     if (node === null || typeof node.addEventListener !== "function") return void 0;
     const handleClick = (event) => {
       const target = event.target;
-      const onNavItem = target !== null && target.closest(NAV_ACTIVATABLE_SELECTOR) !== null;
-      if (onNavItem) onClose();
+      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();
     };
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
@@ -1478,6 +1526,159 @@ var DarkModeControl = ({
     }
   );
 };
+
+// src/commandPaletteFilter.ts
+function haystack(item) {
+  return [item.label, item.hint ?? "", ...item.keywords ?? []].join(" ").toLowerCase();
+}
+function filterCommands(items, query) {
+  const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+  if (tokens.length === 0) return [...items];
+  return items.filter((item) => {
+    const hay = haystack(item);
+    return tokens.every((token) => hay.includes(token));
+  });
+}
+var SCRIM_COLOR2 = "rgba(0, 0, 0, 0.5)";
+var OVERLAY_Z_INDEX = 60;
+var PANEL_MAX_WIDTH = 560;
+var PANEL_TOP_OFFSET = 88;
+var LIST_MAX_HEIGHT = 360;
+var KEY_DOWN = "ArrowDown";
+var KEY_UP = "ArrowUp";
+var KEY_ENTER = "Enter";
+var KEY_ESCAPE = "Escape";
+var styles4 = StyleSheet.create({
+  overlay: { ...StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
+  scrim: { ...StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
+  panel: {
+    marginTop: PANEL_TOP_OFFSET,
+    width: "92%",
+    maxWidth: PANEL_MAX_WIDTH,
+    borderRadius: 12,
+    borderWidth: 1,
+    overflow: "hidden"
+  },
+  input: { fontSize: 16, paddingHorizontal: 16, paddingVertical: 14, borderBottomWidth: 1 },
+  list: { maxHeight: LIST_MAX_HEIGHT },
+  row: { flexDirection: "row", alignItems: "center", paddingHorizontal: 16, paddingVertical: 12, columnGap: 10 },
+  rowText: { flex: 1 },
+  rowLabel: { fontSize: 15, fontWeight: "600" },
+  rowHint: { fontSize: 12, marginTop: 2 },
+  empty: { paddingHorizontal: 16, paddingVertical: 20, fontSize: 14 }
+});
+var PaletteRow = ({ item, selected, onChoose }) => {
+  const { theme } = useUi();
+  const colors = theme.colors;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityHint: item.hint,
+      accessibilityLabel: item.label,
+      accessibilityRole: "button",
+      accessibilityState: { selected },
+      style: [styles4.row, selected ? { backgroundColor: colors.border } : void 0],
+      testID: item.testID ?? item.key,
+      onPress: () => onChoose(item),
+      children: [
+        typeof item.renderIcon === "function" ? item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles4.rowText, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles4.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsx(Text, { style: [styles4.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
+        ] })
+      ]
+    }
+  );
+};
+var CommandPalette = ({ open, items, onClose, labels, testID }) => {
+  const { theme } = useUi();
+  const colors = theme.colors;
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState(0);
+  const inputRef = useRef(null);
+  const results = useMemo(() => filterCommands(items, query), [items, query]);
+  useEffect(() => {
+    if (!open) return;
+    setQuery("");
+    setSelected(0);
+    inputRef.current?.focus();
+  }, [open]);
+  useEffect(() => {
+    setSelected((prev) => Math.min(prev, Math.max(0, results.length - 1)));
+  }, [results.length]);
+  const choose = useCallback(
+    (item) => {
+      item.onSelect();
+      onClose();
+    },
+    [onClose]
+  );
+  const onKeyPress = useCallback(
+    (event) => {
+      const key = event.nativeEvent.key;
+      if (key === KEY_DOWN) setSelected((i) => Math.min(i + 1, results.length - 1));
+      else if (key === KEY_UP) setSelected((i) => Math.max(i - 1, 0));
+      else if (key === KEY_ESCAPE) onClose();
+      else if (key === KEY_ENTER && results[selected]) choose(results[selected]);
+    },
+    [results, selected, choose, onClose]
+  );
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(View, { style: styles4.overlay, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityHint: labels.closeHint,
+        accessibilityLabel: labels.closeLabel,
+        accessibilityRole: "button",
+        style: styles4.scrim,
+        testID: `${testID ?? "command-palette"}-scrim`,
+        onPress: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        "aria-modal": true,
+        "aria-label": labels.regionLabel,
+        role: "dialog",
+        style: [styles4.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
+        testID: testID ?? "command-palette",
+        children: [
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ref: inputRef,
+              accessibilityLabel: labels.placeholder,
+              placeholder: labels.placeholder,
+              placeholderTextColor: colors.textSecondary,
+              style: [styles4.input, { color: colors.text, borderBottomColor: colors.border }],
+              testID: `${testID ?? "command-palette"}-input`,
+              value: query,
+              onChangeText: setQuery,
+              onKeyPress
+            }
+          ),
+          results.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles4.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", style: styles4.list, children: results.map((item, index) => /* @__PURE__ */ jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
+        ]
+      }
+    )
+  ] });
+};
+var LAUNCH_KEY = "k";
+function useCommandPaletteHotkey(onOpen, enabled = true) {
+  useEffect(() => {
+    if (!enabled || typeof document === "undefined") return void 0;
+    const handler = (event) => {
+      const isLauncher = event.key.toLowerCase() === LAUNCH_KEY && (event.metaKey || event.ctrlKey);
+      if (!isLauncher) return;
+      event.preventDefault();
+      onOpen();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onOpen, enabled]);
+}
 function roleRoutesToNavItems(routes, translate) {
   return routes.map((entry) => ({
     key: entry.role,
@@ -1489,6 +1690,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, 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, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useContentMaxWidth };
+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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map