@gravitee/graphene-core 3.26.3 → 3.27.0

package/dist/lib/breadcrumbs/buildLinearBreadcrumbs.d.ts

@@ -10,11 +10,20 @@ export interface LinearBreadcrumbSegment {
  * Router-agnostic navigation (e.g. React Router `navigate` from `useNavigate()`).
  */
 export type LinearBreadcrumbNavigate = (to: string) => void | Promise<void>;
+export interface LinearBreadcrumbOptions {
+    /**
+     * Turns a segment's `to` into the URL the browser opens, which makes the crumb a link that can be opened in a new
+     * tab. `to` is what `navigate` receives, so it may be relative or leave out the router's `basename`: this must
+     * resolve it the same way `navigate` does. Without it, crumbs stay buttons and cannot be opened in a new tab.
+     */
+    readonly toHref?: (to: string) => string;
+}
 /**
  * Builds {@link BreadcrumbEntry} values for `ContentHeader` and `useLayoutConfig` from ordered segments.
- * The last segment is always label-only; earlier segments with `to` receive `onClick` that calls `navigate(to)`.
+ * The last segment is always label-only; earlier segments with `to` receive `onClick` that calls `navigate(to)`,
+ * and `href: toHref(to)` when {@link LinearBreadcrumbOptions.toHref} is given, so they can be opened in a new tab.
  * Non-final segments without `to` are label-only (no link).
  */
-declare function buildLinearBreadcrumbs(navigate: LinearBreadcrumbNavigate, segments: readonly LinearBreadcrumbSegment[]): BreadcrumbEntry[];
+declare function buildLinearBreadcrumbs(navigate: LinearBreadcrumbNavigate, segments: readonly LinearBreadcrumbSegment[], options?: LinearBreadcrumbOptions): BreadcrumbEntry[];
 export { buildLinearBreadcrumbs };
 //# sourceMappingURL=buildLinearBreadcrumbs.d.ts.map

package/dist/lib/breadcrumbs/buildLinearBreadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildLinearBreadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/lib/breadcrumbs/buildLinearBreadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAErF;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE5E;;;;GAIG;AACH,iBAAS,sBAAsB,CAC7B,QAAQ,EAAE,wBAAwB,EAClC,QAAQ,EAAE,SAAS,uBAAuB,EAAE,GAC3C,eAAe,EAAE,CAoBnB;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"buildLinearBreadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/lib/breadcrumbs/buildLinearBreadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAErF;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE5E,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C;AAED;;;;;GAKG;AACH,iBAAS,sBAAsB,CAC7B,QAAQ,EAAE,wBAAwB,EAClC,QAAQ,EAAE,SAAS,uBAAuB,EAAE,EAC5C,OAAO,GAAE,uBAA4B,GACpC,eAAe,EAAE,CAqBnB;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/lib/links/NavLink.d.ts

@@ -0,0 +1,33 @@
+import { HTMLAttributes, Ref } from 'react';
+interface NavLinkProps extends HTMLAttributes<HTMLElement> {
+    /** Renders a real link, so the browser can open it in a new tab. Without it, renders `fallback`. */
+    readonly href?: string;
+    /** Element rendered when there is no `href`. */
+    readonly fallback?: 'button' | 'div';
+    /**
+     * Lets the browser follow `href` after a plain click instead of cancelling it. For when no `onClick` navigates
+     * client-side but an `asChild` parent still merges one in (e.g. a Radix menu item closing its menu).
+     */
+    readonly followHref?: boolean;
+    /**
+     * Set when an `asChild` Radix menu item renders this link. Radix turns Enter into a click without its modifiers and
+     * cancels the key, so the link's own cmd/ctrl/shift+Enter never reaches the browser: NavLink opens the new tab itself.
+     */
+    readonly menuItem?: boolean;
+    readonly ref?: Ref<HTMLElement>;
+}
+/**
+ * A nav target that is a real `<a href>` when it has a URL, so right-click, middle-click and
+ * cmd/ctrl-click open it in a new tab. A plain left click runs `onClick` (client-side navigation)
+ * and then cancels the browser's own navigation, so there is no page reload. A modified click
+ * skips `onClick` entirely and is left to the browser, so the current tab does not navigate too.
+ *
+ * With `followHref`, a plain click runs `onClick` and then lets the browser load `href`.
+ *
+ * `onClick` runs before `preventDefault()` on purpose: handlers merged in by an `asChild` parent
+ * (e.g. Radix's menu-item select) skip their work when the event is already prevented.
+ */
+declare function NavLink({ href, fallback, followHref, menuItem, ref, ...props }: NavLinkProps): import("react").JSX.Element;
+export { NavLink };
+export type { NavLinkProps };
+//# sourceMappingURL=NavLink.d.ts.map

package/dist/lib/links/NavLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../../src/lib/links/NavLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAc,GAAG,EAAE,MAAM,OAAO,CAAC;AAE7D,UAAU,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IACxD,oGAAoG;IACpG,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,gDAAgD;IAChD,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACjC;AAaD;;;;;;;;;;GAUG;AACH,iBAAS,OAAO,CAAC,EAAE,IAAI,EAAE,QAAmB,EAAE,UAAkB,EAAE,QAAgB,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BA+BhH;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/testing/menuLinkActions.d.ts

@@ -0,0 +1,19 @@
+import { UserEvent } from '@testing-library/user-event';
+/**
+ * Runs `click` and reports whether the browser navigation of the click it triggers was cancelled.
+ * Internal: not exported from `@gravitee/graphene-core/testing`.
+ */
+declare function isClickCancelled(click: () => Promise<void>): Promise<boolean | undefined>;
+/**
+ * Actions on the link items of an open Radix menu (`AppSwitcher`, `SelectorDropdown`), found by accessible name.
+ * Internal: not exported from `@gravitee/graphene-core/testing`.
+ */
+declare function menuLinkActions(user: UserEvent): {
+    cmdSelect: (label: string) => Promise<void>;
+    selectWithKeyboard: (label: string) => Promise<void>;
+    selectWithModifiedEnter: (label: string, modifier: string) => Promise<void>;
+    /** Clicks the item and reports whether its browser navigation was cancelled. */
+    selectAndCheckCancelled: (label: string) => Promise<boolean | undefined>;
+};
+export { isClickCancelled, menuLinkActions };
+//# sourceMappingURL=menuLinkActions.d.ts.map

package/dist/testing/menuLinkActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuLinkActions.d.ts","sourceRoot":"","sources":["../../src/testing/menuLinkActions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAE7D;;;GAGG;AACH,iBAAe,gBAAgB,CAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,CAWxF;AAED;;;GAGG;AACH,iBAAS,eAAe,CAAC,IAAI,EAAE,SAAS;uBAIX,MAAM;gCAKG,MAAM;qCAID,MAAM,YAAY,MAAM;IAI/D,gFAAgF;qCAC/C,MAAM;EAE1C;AAED,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/graphene-core",
-  "version": "3.26.3",
+  "version": "3.27.0",
   "type": "module",
   "description": "Gravitee's Graphene design system: accessible React components, design tokens, icons, and shared ESLint/TypeScript configs. Built on shadcn/ui and Tailwind.",
   "keywords": [

package/snippets/context-sidebar-detail-page.tsx

@@ -13,13 +13,15 @@ import { FileTextIcon, SettingsIcon, UsersIcon } from '@gravitee/graphene-core/i
 import { useState } from 'react';
 
 // 1. Define the sub-sections for your resource type.
+//    `href` is each section's full URL (with the router's basename, if any), so users can open it
+//    in a new tab. A plain click still goes through onItemSelect and navigates without a reload.
 const resourceNavGroups: NavGroup[] = [
   {
     label: '{GROUP_LABEL}',
     items: [
-      { key: 'overview', title: 'Overview', icon: FileTextIcon },
-      { key: 'settings', title: 'Settings', icon: SettingsIcon },
-      { key: 'members', title: 'Members', icon: UsersIcon },
+      { key: 'overview', title: 'Overview', icon: FileTextIcon, href: '{RESOURCE_URL}/overview' },
+      { key: 'settings', title: 'Settings', icon: SettingsIcon, href: '{RESOURCE_URL}/settings' },
+      { key: 'members', title: 'Members', icon: UsersIcon, href: '{RESOURCE_URL}/members' },
     ],
   },
 ];
@@ -28,6 +30,7 @@ const resourceNavGroups: NavGroup[] = [
 //    The host provides <AppContextBar /> in ContentHeader's appContext slot.
 //    Do NOT include the application/module name as the first breadcrumb —
 //    it is already shown by AppContextBar. Start at the page level.
+//    Give each crumb with onClick an `href` (its full URL) too, so it can be opened in a new tab.
 export function ResourceDetailPage({
   resource,
   onBack,
@@ -63,7 +66,7 @@ export function ResourceDetailPage({
           leading={<ContextToggleButton expanded={contextExpanded} onToggle={() => setContextExpanded((v) => !v)} />}
           appContext={null /* replace with <AppContextBar apps={...} activeAppKey={...} ... /> */}
           breadcrumbs={[
-            { label: '{LIST_PAGE_LABEL}', onClick: onBack },
+            { label: '{LIST_PAGE_LABEL}', href: '{LIST_PAGE_URL}', onClick: onBack },
             { label: resource.name },
             { label: sectionLabel },
           ]}