@carlonicora/nextjs-jsonapi 1.117.1 → 1.118.0

package/src/components/containers/partitionTabs.ts

@@ -0,0 +1,43 @@
+import { Tab } from "./TabsContainer";
+
+export type PartitionedTabs = {
+  ungrouped: Tab[];
+  groups: Array<{ label: string; items: Tab[] }>;
+};
+
+/**
+ * Split a `Tab[]` into ungrouped + grouped strata for the
+ * `RoundPageContainer` `layout="rail"` navigation.
+ *
+ * Tabs without a `group` land in `ungrouped` (the pinned stratum) in declared
+ * order. Grouped tabs cluster under their `group` label; groups appear in the
+ * order they first occur in the input array.
+ *
+ * Pure function — safe to call on every render. Complexity O(n).
+ */
+export function partitionTabs(tabs: Tab[]): PartitionedTabs {
+  const ungrouped: Tab[] = [];
+  const groupMap = new Map<string, Tab[]>();
+  const groupOrder: string[] = [];
+
+  for (const tab of tabs) {
+    if (!tab.group) {
+      ungrouped.push(tab);
+      continue;
+    }
+    if (!groupMap.has(tab.group)) {
+      groupMap.set(tab.group, []);
+      groupOrder.push(tab.group);
+    }
+    // The map entry is guaranteed to exist because we just initialized it.
+    groupMap.get(tab.group)!.push(tab);
+  }
+
+  return {
+    ungrouped,
+    groups: groupOrder.map((label) => ({
+      label,
+      items: groupMap.get(label)!,
+    })),
+  };
+}

package/src/components/forms/EditorSheet.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { ReactNode, useCallback, useEffect, useRef } from "react";
+import { ReactElement, ReactNode, useCallback, useEffect, useRef } from "react";
 import { FieldValues, UseFormReturn } from "react-hook-form";
 import { PencilIcon } from "lucide-react";
 import { ModuleWithPermissions } from "../../permissions/types";
@@ -161,7 +161,12 @@ export function EditorSheet<T extends FieldValues>({
         {dialogOpen === undefined &&
           forceShow === undefined &&
           (trigger ? (
-            <SheetTrigger>{trigger}</SheetTrigger>
+            // Base UI: the trigger renders its own <button>. Pass the caller's
+            // element via `render` (NOT as children) so it BECOMES the trigger
+            // button — otherwise an interactive trigger (e.g. <Button>) nests a
+            // <button> inside SheetTrigger's <button> (invalid HTML / hydration
+            // error). `render` also preserves the element's native `disabled`.
+            <SheetTrigger render={trigger as ReactElement} />
           ) : (
             <SheetTrigger>
               {isEdit ? (