@carlonicora/nextjs-jsonapi 3.5.7 → 3.5.9

package/src/components/forms/EditorSheet.tsx

@@ -65,12 +65,23 @@ function resolveTriggerIsNativeButton(trigger: ReactNode): boolean {
  * base `data-[side=left]:sm:max-w-sm`.
  */
 // rtl-ok: keyed to the resolved physical side, not to a writing direction
+/**
+ * On a phone an editor IS the page. SheetContent's base is `w-3/4`, which
+ * leaves a dead 25% strip of the page showing behind the form and squeezes
+ * every field — so each size takes the full width and hands over to its
+ * `sm:max-w-*` cap from the `sm` breakpoint up. Same width utility and same
+ * variant as the base, so `cn`'s tailwind-merge replaces it rather than
+ * fighting it on specificity.
+ */
+// rtl-ok: keyed to the resolved physical side, not to a writing direction
+const fullWidthOnMobile = "data-[side=right]:w-full data-[side=left]:w-full";
+
 const sizeClasses: Record<EditorSheetSize, string> = {
-  sm: "data-[side=right]:sm:max-w-2xl data-[side=left]:sm:max-w-2xl",
-  md: "data-[side=right]:sm:max-w-3xl data-[side=left]:sm:max-w-3xl",
-  lg: "data-[side=right]:sm:max-w-5xl data-[side=left]:sm:max-w-5xl",
-  xl: "data-[side=right]:sm:max-w-7xl data-[side=left]:sm:max-w-7xl",
-  "2xl": "data-[side=right]:sm:!max-w-[min(96rem,90vw)] data-[side=left]:sm:!max-w-[min(96rem,90vw)]",
+  sm: `${fullWidthOnMobile} data-[side=right]:sm:max-w-2xl data-[side=left]:sm:max-w-2xl`,
+  md: `${fullWidthOnMobile} data-[side=right]:sm:max-w-3xl data-[side=left]:sm:max-w-3xl`,
+  lg: `${fullWidthOnMobile} data-[side=right]:sm:max-w-5xl data-[side=left]:sm:max-w-5xl`,
+  xl: `${fullWidthOnMobile} data-[side=right]:sm:max-w-7xl data-[side=left]:sm:max-w-7xl`,
+  "2xl": `${fullWidthOnMobile} data-[side=right]:sm:!max-w-[min(96rem,90vw)] data-[side=left]:sm:!max-w-[min(96rem,90vw)]`,
 };
 
 export type EditorSheetProps<T extends FieldValues> = {
@@ -261,23 +272,34 @@ export function EditorSheet<T extends FieldValues>({
             // warned on every native-button trigger).
             <SheetTrigger nativeButton={resolveTriggerIsNativeButton(trigger)} render={trigger as ReactElement} />
           ) : (
-            <SheetTrigger>
-              {isEdit ? (
-                <Button
-                  render={<div />}
-                  nativeButton={false}
-                  size="sm"
-                  variant="ghost"
-                  className="text-muted-foreground"
-                >
-                  <PencilIcon />
-                </Button>
-              ) : (
-                <Button render={<div />} nativeButton={false} size="sm" variant="outline">
-                  {t("ui.buttons.create")}
-                </Button>
-              )}
-            </SheetTrigger>
+            // The default trigger goes through `render` for the SAME reason the
+            // caller-supplied one above does. As CHILDREN, the Button rendered a
+            // second `role="button"` inside SheetTrigger's own button: two nodes
+            // with one accessible name, which a screen reader announces as a
+            // button inside a button and which makes
+            // `getByRole("button", { name })` ambiguous (e2e DRQ-01 failed strict
+            // mode on exactly this). `nativeButton={false}` because both variants
+            // render a <div>, matching the element the trigger actually emits.
+            <SheetTrigger
+              nativeButton={false}
+              render={
+                isEdit ? (
+                  <Button
+                    render={<div />}
+                    nativeButton={false}
+                    size="sm"
+                    variant="ghost"
+                    className="text-muted-foreground"
+                  >
+                    <PencilIcon />
+                  </Button>
+                ) : (
+                  <Button render={<div />} nativeButton={false} size="sm" variant="outline">
+                    {t("ui.buttons.create")}
+                  </Button>
+                )
+              }
+            />
           ))}
         <SheetContent side="end" className={sizeClasses[size]}>
           <SheetHeader className="border-b px-6 py-4">

package/src/components/forms/FileUploader.tsx

@@ -112,11 +112,27 @@ export const FileUploader = forwardRef<HTMLDivElement, FileUploaderProps & React
 
     const handleKeyDown = useCallback(
       (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (!value) return;
+
+        // Only swallow the keys this component actually handles. Blanket
+        // preventDefault() killed Space / PageDown / arrow scrolling for as long
+        // as focus was anywhere inside the uploader — the page simply stopped
+        // responding to the keyboard while a file was selected.
+        const handledKeys = [
+          "ArrowLeft",
+          "ArrowRight",
+          "ArrowUp",
+          "ArrowDown",
+          "Enter",
+          "Space",
+          "Delete",
+          "Backspace",
+          "Escape",
+        ];
+        if (!handledKeys.includes(e.key)) return;
         e.preventDefault();
         e.stopPropagation();
 
-        if (!value) return;
-
         const moveNext = () => {
           const nextIndex = activeIndex + 1;
           setActiveIndex(nextIndex > value.length - 1 ? 0 : nextIndex);

package/src/components/forms/MultiFileUploader.tsx

@@ -10,18 +10,31 @@ import { FileInput, FileUploader } from "./FileUploader";
 type MultiFileUploaderProps = {
   files: File[];
   setFiles: (files: File[]) => void;
+  /**
+   * Let one trip through the picker return several files. OPT-IN, and it stays
+   * that way: every existing caller was written against one-file-at-a-time, so
+   * flipping the default would change behaviour in every app consuming this
+   * package to suit whichever one asked last.
+   */
+  multiple?: boolean;
+  /**
+   * Extra classes for the tile grid — density is the caller's business. The
+   * default is one column on the smallest screens, which suits a desktop form;
+   * a phone-first caller can ask for more columns without moving the default
+   * out from under anyone else.
+   */
+  className?: string;
 };
 
 const dropzone = {
-  multiple: false,
   maxSize: 100 * 1024 * 1024,
   preventDropOnDocument: false,
   accept: {
     "application/images": [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".docx", ".xslx", ".pdf", ".txt", ".md"],
   },
-} satisfies DropzoneOptions;
+} satisfies Omit<DropzoneOptions, "multiple">;
 
-export default function MultiFileUploader({ files, setFiles }: MultiFileUploaderProps) {
+export default function MultiFileUploader({ files, setFiles, multiple = false, className }: MultiFileUploaderProps) {
   const uploadFiles = (newFiles: File[] | null) => {
     if (!newFiles) return;
 
@@ -33,11 +46,16 @@ export default function MultiFileUploader({ files, setFiles }: MultiFileUploader
   };
 
   return (
-    <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
+    <div
+      className={cn(
+        "grid w-full grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
+        className,
+      )}
+    >
       <FileUploader
         value={files}
         onValueChange={uploadFiles}
-        dropzoneOptions={dropzone}
+        dropzoneOptions={{ ...dropzone, multiple }}
         className="text-muted-foreground hover:text-primary relative aspect-square h-full cursor-pointer overflow-hidden rounded-lg border"
       >
         <FileInput className={cn("text-muted-foreground flex h-full w-full flex-col items-center justify-center")}>

package/src/components/forms/index.ts

@@ -26,6 +26,6 @@ export * from "./FormSlider";
 export * from "./FormSwitch";
 export * from "./FormTextarea";
 export * from "./GdprConsentCheckbox";
-export * from "./MultiFileUploader";
+export { default as MultiFileUploader } from "./MultiFileUploader";
 export * from "./PasswordInput";
 export * from "./useEditorDialog";