@carlonicora/nextjs-jsonapi 1.116.0 → 1.117.1

package/src/components/forms/EditorSheet.tsx

@@ -62,6 +62,17 @@ export type EditorSheetProps<T extends FieldValues> = {
   dialogOpen?: boolean;
   onDialogOpenChange?: (open: boolean) => void;
 
+  /** Render a fully custom footer instead of the default CommonEditorButtons.
+   *  `setOpen` is the dirty-checked open handler (shows the discard dialog);
+   *  `closeWithoutConfirm` is the raw setter that bypasses the discard dialog
+   *  (use after a successful submit when no confirmation is needed). */
+  renderFooter?: (props: {
+    form: UseFormReturn<T>;
+    isEdit: boolean;
+    setOpen: (open: boolean) => void;
+    closeWithoutConfirm: (open: boolean) => void;
+  }) => ReactNode;
+
   children: ReactNode;
 };
 
@@ -90,6 +101,7 @@ export function EditorSheet<T extends FieldValues>({
   onClose,
   dialogOpen,
   onDialogOpenChange,
+  renderFooter,
   children,
 }: EditorSheetProps<T>) {
   const t = useTranslations();
@@ -147,6 +159,7 @@ export function EditorSheet<T extends FieldValues>({
     <>
       <Sheet open={open} onOpenChange={handleOpenChange}>
         {dialogOpen === undefined &&
+          forceShow === undefined &&
           (trigger ? (
             <SheetTrigger>{trigger}</SheetTrigger>
           ) : (
@@ -184,17 +197,31 @@ export function EditorSheet<T extends FieldValues>({
             </SheetDescription>
           </SheetHeader>
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(wrappedOnSubmit)} className="flex min-h-0 flex-1 flex-col">
+            <form
+              onSubmit={(e) => {
+                // The Sheet content is portaled, but React synthetic events still
+                // bubble up the React tree — so without stopPropagation an inner
+                // EditorSheet's submit also triggers the outer form's submit
+                // (e.g. a create dialog opened from within another editor).
+                e.stopPropagation();
+                return form.handleSubmit(wrappedOnSubmit)(e);
+              }}
+              className="flex min-h-0 flex-1 flex-col"
+            >
               <div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
               <SheetFooter className="shrink-0 border-t px-6 py-4">
-                <CommonEditorButtons
-                  form={form}
-                  setOpen={handleOpenChange}
-                  isEdit={isEdit}
-                  disabled={disabled}
-                  hideSubmit={hideSubmit}
-                  centerButtons={centerButtons}
-                />
+                {renderFooter ? (
+                  renderFooter({ form, isEdit, setOpen: handleOpenChange, closeWithoutConfirm: setOpen })
+                ) : (
+                  <CommonEditorButtons
+                    form={form}
+                    setOpen={handleOpenChange}
+                    isEdit={isEdit}
+                    disabled={disabled}
+                    hideSubmit={hideSubmit}
+                    centerButtons={centerButtons}
+                  />
+                )}
               </SheetFooter>
             </form>
           </Form>

package/src/components/forms/FileUploader.tsx

@@ -10,12 +10,13 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
-import { DropzoneOptions, DropzoneState, FileRejection, useDropzone } from "react-dropzone";
+import { Accept, DropzoneOptions, DropzoneState, FileRejection, useDropzone } from "react-dropzone";
 import { showError } from "../../utils/toast";
-import { buttonVariants, Input } from "../../shadcnui";
+import { buttonVariants, Input, Tooltip, TooltipContent, TooltipTrigger } from "../../shadcnui";
 import { cn } from "../../utils";
 
 export type { DropzoneOptions } from "react-dropzone";
@@ -31,6 +32,7 @@ type FileUploaderContextType = {
   setActiveIndex: Dispatch<SetStateAction<number>>;
   orientation: "horizontal" | "vertical";
   direction: DirectionOptions;
+  accept?: Accept;
 };
 
 const FileUploaderContext = createContext<FileUploaderContextType | null>(null);
@@ -195,6 +197,7 @@ export const FileUploader = forwardRef<HTMLDivElement, FileUploaderProps & React
           setActiveIndex,
           orientation,
           direction,
+          accept: dropzoneOptions.accept,
         }}
       >
         <div
@@ -283,35 +286,62 @@ FileUploaderItem.displayName = "FileUploaderItem";
 
 export const FileInput = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, children, ...props }, ref) => {
-    const { dropzoneState, isFileTooBig, isLOF } = useFileUpload();
+    const { dropzoneState, isFileTooBig, isLOF, accept } = useFileUpload();
+    const t = useTranslations();
     const rootProps = isLOF ? {} : dropzoneState.getRootProps();
     // Get isDragActive from the context for FileInput as well, to ensure it can react if needed, or to simplify its own styling.
     const { isDragActive: parentIsDragActive } = dropzoneState;
 
+    const acceptedLabels = useMemo(() => {
+      if (!accept) return null;
+      const extensions = new Set<string>();
+      let hasWildcardImages = false;
+      for (const [mime, exts] of Object.entries(accept)) {
+        if (mime === "image/*") hasWildcardImages = true;
+        for (const ext of exts) extensions.add(ext);
+      }
+      const labels = Array.from(extensions).sort();
+      if (hasWildcardImages) labels.push(t("ui.labels.images"));
+      return labels.length > 0 ? labels : null;
+    }, [accept, t]);
+
+    const dropArea = (
+      <div
+        className={cn(
+          "w-full rounded-lg duration-300 ease-in-out",
+          // Simpler border logic: if parent is drag-active, it controls the border.
+          // Otherwise, FileInput can show its own accept/reject/default border.
+          {
+            "border-green-500": dropzoneState.isDragAccept && !parentIsDragActive,
+            "border-red-500": (dropzoneState.isDragReject || isFileTooBig) && !parentIsDragActive,
+            "border-gray-300":
+              !dropzoneState.isDragAccept && !dropzoneState.isDragReject && !isFileTooBig && !parentIsDragActive,
+          },
+          // className from props should be last to allow overrides if necessary
+          className,
+        )}
+        {...rootProps}
+      >
+        {children}
+      </div>
+    );
+
     return (
       <div
         ref={ref}
         {...props}
         className={cn(`relative w-full ${isLOF ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`, className)}
       >
-        <div
-          className={cn(
-            "w-full rounded-lg duration-300 ease-in-out",
-            // Simpler border logic: if parent is drag-active, it controls the border.
-            // Otherwise, FileInput can show its own accept/reject/default border.
-            {
-              "border-green-500": dropzoneState.isDragAccept && !parentIsDragActive,
-              "border-red-500": (dropzoneState.isDragReject || isFileTooBig) && !parentIsDragActive,
-              "border-gray-300":
-                !dropzoneState.isDragAccept && !dropzoneState.isDragReject && !isFileTooBig && !parentIsDragActive,
-            },
-            // className from props should be last to allow overrides if necessary
-            className,
-          )}
-          {...rootProps}
-        >
-          {children}
-        </div>
+        {acceptedLabels ? (
+          <Tooltip>
+            <TooltipTrigger render={dropArea} />
+            <TooltipContent>
+              {t("ui.labels.accepted_file_types")}: {acceptedLabels.join(", ")}
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          dropArea
+        )}
         <Input
           ref={dropzoneState.inputRef}
           disabled={isLOF}

package/src/components/forms/FormDate.tsx

@@ -26,6 +26,8 @@ export function FormDate({
   isRequired = false,
   defaultMonth,
   allowEmpty,
+  description,
+  futureYears,
 }: {
   form: any;
   id: string;
@@ -36,6 +38,8 @@ export function FormDate({
   isRequired?: boolean;
   defaultMonth?: Date;
   allowEmpty?: boolean;
+  description?: string;
+  futureYears?: number;
 }) {
   const t = useI18nTranslations();
   const locale = useI18nLocale();
@@ -117,7 +121,7 @@ export function FormDate({
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired} description={description}>
         {(field) => (
           <Popover open={open} onOpenChange={setOpen} modal={true}>
             <InputGroup>
@@ -162,7 +166,7 @@ export function FormDate({
                 month={displayMonth}
                 onMonthChange={setDisplayMonth}
                 startMonth={new Date(1900, 0)}
-                endMonth={new Date(new Date().getFullYear() + 10, 11)}
+                endMonth={new Date(new Date().getFullYear() + (futureYears ?? 10), 11)}
               />
               {allowEmpty !== false && (
                 <div className="border-t p-2">

package/src/components/forms/FormDateTime.tsx

@@ -27,6 +27,9 @@ export function FormDateTime({
   onChange,
   allowEmpty,
   defaultMonth,
+  placeholder,
+  isRequired,
+  description,
 }: {
   form: any;
   id: string;
@@ -36,6 +39,8 @@ export function FormDateTime({
   onChange?: (date?: Date) => Promise<void>;
   allowEmpty?: boolean;
   defaultMonth?: Date;
+  isRequired?: boolean;
+  description?: string;
 }) {
   const [open, setOpen] = useState<boolean>(false);
   const t = useI18nTranslations();
@@ -100,7 +105,7 @@ export function FormDateTime({
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name}>
+      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired} description={description}>
         {(field) => (
           <div className="relative flex flex-row">
             <Popover open={open} onOpenChange={setOpen} modal={true}>
@@ -113,7 +118,11 @@ export function FormDateTime({
                     />
                   }
                 >
-                  {field.value ? formatDateTime(field.value) : <span>{t(`common.pick_date_time`)}</span>}
+                  {field.value ? (
+                    formatDateTime(field.value)
+                  ) : (
+                    <span>{placeholder ? placeholder : t(`common.pick_date_time`)}</span>
+                  )}
                   <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                 </PopoverTrigger>
                 {field.value && allowEmpty !== false && (

package/src/components/forms/FormFieldWrapper.tsx

@@ -18,6 +18,7 @@ type FormFieldWrapperProps<T extends FieldValues> = {
   description?: string;
   isRequired?: boolean;
   orientation?: "vertical" | "horizontal" | "responsive";
+  className?: string;
   children: (field: ControllerRenderProps<T, Path<T>>, fieldState: ControllerFieldState) => ReactNode;
   testId?: string;
 };
@@ -29,6 +30,7 @@ export function FormFieldWrapper<T extends FieldValues>({
   description,
   isRequired,
   orientation = "vertical",
+  className,
   children,
   testId,
 }: FormFieldWrapperProps<T>) {
@@ -37,7 +39,7 @@ export function FormFieldWrapper<T extends FieldValues>({
       control={form.control}
       name={name}
       render={({ field, fieldState }) => (
-        <Field orientation={orientation} data-invalid={!!fieldState.error} data-testid={testId}>
+        <Field orientation={orientation} className={className} data-invalid={!!fieldState.error} data-testid={testId}>
           {label && (
             <FieldLabel>
               {label}

package/src/components/forms/FormInput.tsx

@@ -9,6 +9,7 @@ export function FormInput({
   form,
   id,
   name,
+  description,
   placeholder,
   type,
   onBlur,
@@ -22,6 +23,7 @@ export function FormInput({
   form: any;
   id: string;
   name?: string;
+  description?: string;
   placeholder?: string;
   type?: "text" | "number" | "currency" | "decimal" | "password" | "link";
   onBlur?: () => Promise<void>;
@@ -36,7 +38,7 @@ export function FormInput({
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+      <FormFieldWrapper form={form} name={id} label={name} description={description} isRequired={isRequired}>
         {(field) => {
           const handleBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
             let value = e.target.value;

package/src/components/forms/FormPassword.tsx

@@ -12,6 +12,7 @@ export function FormPassword({
   disabled,
   testId,
   isRequired,
+  description,
 }: {
   form: any;
   id: string;
@@ -21,10 +22,18 @@ export function FormPassword({
   disabled?: boolean;
   testId?: string;
   isRequired?: boolean;
+  description?: string;
 }) {
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired} testId={testId}>
+      <FormFieldWrapper
+        form={form}
+        name={id}
+        label={name}
+        isRequired={isRequired}
+        description={description}
+        testId={testId}
+      >
         {(field) => (
           <PasswordInput
             {...field}

package/src/components/forms/FormPlaceAutocomplete.tsx

@@ -42,6 +42,7 @@ interface PlaceAutocompleteProps {
   form: any;
   id: string;
   name?: string;
+  description?: string;
   placeholder?: string;
   disabled?: boolean;
   testId?: string;
@@ -56,12 +57,15 @@ interface PlaceAutocompleteProps {
    * For regions, use: ["administrative_area_level_1", "administrative_area_level_2"]
    */
   includeTypes?: string[];
+  /** Google Places language code for results. Defaults to "en". */
+  languageCode?: string;
 }
 
 export function FormPlaceAutocomplete({
   form,
   id,
   name,
+  description,
   placeholder,
   disabled,
   testId,
@@ -69,6 +73,7 @@ export function FormPlaceAutocomplete({
   onPlaceSelect,
   className,
   includeTypes,
+  languageCode = "en",
 }: PlaceAutocompleteProps) {
   const [inputValue, setInputValue] = useState("");
   const [suggestions, setSuggestions] = useState<PlaceSuggestion[]>([]);
@@ -117,7 +122,7 @@ export function FormPlaceAutocomplete({
         body: JSON.stringify({
           input: input,
           ...(includeTypes ? { includedPrimaryTypes: includeTypes } : {}),
-          languageCode: "en",
+          languageCode: languageCode,
         }),
       });
 
@@ -270,7 +275,7 @@ export function FormPlaceAutocomplete({
   if (loadError) {
     return (
       <div className="flex w-full flex-col">
-        <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+        <FormFieldWrapper form={form} name={id} label={name} description={description} isRequired={isRequired}>
           {(field) => (
             <Input
               {...field}
@@ -287,7 +292,7 @@ export function FormPlaceAutocomplete({
 
   return (
     <div className="flex w-full flex-col" ref={containerRef}>
-      <FormFieldWrapper form={form} name={id} label={name} isRequired={isRequired}>
+      <FormFieldWrapper form={form} name={id} label={name} description={description} isRequired={isRequired}>
         {(field) => (
           <div className="relative">
             <Input

package/src/components/forms/FormSelect.tsx

@@ -9,6 +9,7 @@ export function FormSelect({
   form,
   id,
   name,
+  description,
   placeholder,
   disabled,
   values,
@@ -21,6 +22,7 @@ export function FormSelect({
   form: any;
   id: string;
   name?: string;
+  description?: string;
   placeholder?: string;
   disabled?: boolean;
   values: { id: string; text: string }[];
@@ -36,6 +38,7 @@ export function FormSelect({
         form={form}
         name={id}
         label={name}
+        description={description}
         isRequired={isRequired}
         orientation={useRows ? "horizontal" : "vertical"}
         testId={testId}

package/src/components/forms/FormSlider.tsx

@@ -10,6 +10,7 @@ export function FormSlider({
   name,
   disabled,
   showPercentage,
+  description,
 }: {
   form: any;
   id: string;
@@ -17,12 +18,13 @@ export function FormSlider({
   placeholder?: string;
   disabled?: boolean;
   showPercentage?: boolean;
+  description?: string;
 }) {
   const value = useWatch({ control: form.control, name: id });
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name}>
+      <FormFieldWrapper form={form} name={id} label={name} description={description}>
         {() => (
           <div>
             {showPercentage && (

package/src/components/forms/FormTextarea.tsx

@@ -11,6 +11,9 @@ export function FormTextarea({
   className,
   placeholder,
   testId,
+  description,
+  isRequired,
+  textareaRef,
 }: {
   form: any;
   id: string;
@@ -18,13 +21,24 @@ export function FormTextarea({
   placeholder?: string;
   className?: string;
   testId?: string;
+  description?: string;
+  isRequired?: boolean;
+  textareaRef?: React.RefObject<HTMLTextAreaElement>;
 }) {
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={name} testId={testId}>
+      <FormFieldWrapper
+        form={form}
+        name={id}
+        label={name}
+        description={description}
+        isRequired={isRequired}
+        testId={testId}
+      >
         {(field) => (
           <Textarea
             {...field}
+            ref={textareaRef}
             className={cn("min-h-96 w-full", className)}
             disabled={form.formState.isSubmitting}
             placeholder={placeholder}

package/src/components/navigations/Breadcrumb.tsx

@@ -45,7 +45,13 @@ function BreadcrumbDesktop({
         {items.length > ITEMS_TO_DISPLAY ? (
           <>
             <BreadcrumbItem>
-              {items[0].href ? <Link href={items[0].href}>{items[0].name}</Link> : <>{items[0].name}</>}
+              {items[0].href ? (
+                <Link href={items[0].href} onClick={items[0].onClick}>
+                  {items[0].name}
+                </Link>
+              ) : (
+                <>{items[0].name}</>
+              )}
             </BreadcrumbItem>
             <BreadcrumbSeparator />
             <BreadcrumbItem>
@@ -56,7 +62,9 @@ function BreadcrumbDesktop({
                 <DropdownMenuContent align="start">
                   {items.slice(1, -ITEMS_TO_DISPLAY + 2).map((item, index) => (
                     <DropdownMenuItem key={index}>
-                      <Link href={item.href ? item.href : "#"}>{item.name}</Link>
+                      <Link href={item.href ? item.href : "#"} onClick={item.onClick}>
+                        {item.name}
+                      </Link>
                     </DropdownMenuItem>
                   ))}
                 </DropdownMenuContent>
@@ -66,7 +74,13 @@ function BreadcrumbDesktop({
             {items.slice(-ITEMS_TO_DISPLAY + 2).map((item, index) => (
               <Fragment key={index}>
                 <BreadcrumbItem>
-                  {item.href ? <Link href={item.href}>{item.name}</Link> : <>{item.name}</>}
+                  {item.href ? (
+                    <Link href={item.href} onClick={item.onClick}>
+                      {item.name}
+                    </Link>
+                  ) : (
+                    <>{item.name}</>
+                  )}
                 </BreadcrumbItem>
                 {index < items.slice(-ITEMS_TO_DISPLAY + 2).length - 1 && <BreadcrumbSeparator />}
               </Fragment>
@@ -77,7 +91,13 @@ function BreadcrumbDesktop({
             {items.map((item, index) => (
               <Fragment key={index}>
                 <BreadcrumbItem>
-                  {item.href ? <Link href={item.href}>{item.name}</Link> : <>{item.name}</>}
+                  {item.href ? (
+                    <Link href={item.href} onClick={item.onClick}>
+                      {item.name}
+                    </Link>
+                  ) : (
+                    <>{item.name}</>
+                  )}
                 </BreadcrumbItem>
                 {index < items.length - 1 && <BreadcrumbSeparator />}
               </Fragment>
@@ -124,7 +144,13 @@ function BreadcrumbMobile({
       <DropdownMenuContent align="start">
         {allItems.map((item, index) => (
           <DropdownMenuItem key={index}>
-            {item.href ? <Link href={item.href}>{item.name}</Link> : <>{item.name}</>}
+            {item.href ? (
+              <Link href={item.href} onClick={item.onClick}>
+                {item.name}
+              </Link>
+            ) : (
+              <>{item.name}</>
+            )}
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>

package/src/hooks/useSocket.ts

@@ -114,7 +114,18 @@ export function useSocket({ token }: UseSocketOptions): UseSocketReturn {
     };
 
     const handleNotification = (data: any) => {
-      const notification = rehydrate(Modules.Notification, data) as NotificationInterface;
+      // The socket sends a JSON:API document { data, included }; rehydrate expects
+      // { jsonApi, included }. Map it (and guard against an unexpected shape so a
+      // malformed payload never throws an uncaught error that breaks the socket).
+      const resource = data?.data ?? data?.jsonApi;
+      if (!resource?.type) {
+        console.warn("[useSocket] ignoring notification with unexpected payload shape", data);
+        return;
+      }
+      const notification = rehydrate(Modules.Notification, {
+        jsonApi: resource,
+        included: data?.included || [],
+      }) as NotificationInterface;
       if (notification) {
         setSocketNotifications((prev) => {
           const newNotifications = [...prev, notification];

package/src/interfaces/breadcrumb.item.data.interface.ts

@@ -1,4 +1,5 @@
 export type BreadcrumbItemData = {
   name: string;
   href?: string;
+  onClick?: () => void;
 };

package/src/shadcnui/ui/badge.tsx

@@ -17,6 +17,18 @@ const badgeVariants = cva(
           "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 dark:bg-input/30",
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
         link: "text-primary underline-offset-4 hover:underline",
+        warning: "bg-warning text-warning-foreground [a]:hover:bg-warning/80",
+        blue: "bg-sky-500 text-primary-foreground [a]:hover:bg-sky-500/80",
+        green: "bg-emerald-500 text-primary-foreground [a]:hover:bg-emerald-500/80",
+        red: "bg-red-500 text-primary-foreground [a]:hover:bg-red-500/80",
+        yellow: "bg-yellow-500 text-primary-foreground [a]:hover:bg-yellow-500/80",
+        purple: "bg-purple-500 text-primary-foreground [a]:hover:bg-purple-500/80",
+        pink: "bg-pink-500 text-primary-foreground [a]:hover:bg-pink-500/80",
+        gray: "bg-gray-500 text-primary-foreground [a]:hover:bg-gray-500/80",
+        orange: "bg-orange-500 text-primary-foreground [a]:hover:bg-orange-500/80",
+        teal: "bg-teal-500 text-primary-foreground [a]:hover:bg-teal-500/80",
+        lime: "bg-lime-500 text-primary-foreground [a]:hover:bg-lime-500/80",
+        none: "border-input bg-transparent text-muted-foreground min-w-20 min-h-5",
       },
     },
     defaultVariants: {
@@ -47,4 +59,7 @@ function Badge({
   });
 }
 
+type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
+
 export { Badge, badgeVariants };
+export type { BadgeProps };