@object-ui/fields 17.3.0 → 17.6.0

package/src/widgets/ImageCropperDialog.tsx

@@ -1,245 +0,0 @@
-/**
- * ImageCropperDialog - Lightweight crop/rotate dialog for ImageField.
- *
- * Implementation notes:
- * - Uses a Canvas + native pointer events (no extra dependency) so the bundle
- *   stays small and the widget works in all SDUI contexts.
- * - Exposes a rectangular crop selection that can be dragged around the image
- *   and a rotate-by-90° button.
- * - On confirm, returns a `Blob` of the cropped image (PNG by default) so callers
- *   can wire it into upload providers or `URL.createObjectURL()`.
- */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@object-ui/components';
-import { RotateCw, Crop as CropIcon } from 'lucide-react';
-
-export interface ImageCropperDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  /** Source image URL or data URL */
-  src: string;
-  /** MIME type for the cropped output. Defaults to image/png. */
-  outputType?: string;
-  /** Suggested filename (passed back via onConfirm). Defaults to "cropped.png". */
-  outputName?: string;
-  /** Called when the user confirms the crop. */
-  onConfirm: (blob: Blob, name: string) => void;
-}
-
-interface CropRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export const ImageCropperDialog: React.FC<ImageCropperDialogProps> = ({
-  open,
-  onOpenChange,
-  src,
-  outputType = 'image/png',
-  outputName = 'cropped.png',
-  onConfirm,
-}) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const imgRef = useRef<HTMLImageElement | null>(null);
-  const [rotation, setRotation] = useState(0); // 0, 90, 180, 270
-  const [crop, setCrop] = useState<CropRect>({ x: 0, y: 0, width: 100, height: 100 });
-  const [drag, setDrag] = useState<{ ox: number; oy: number; cx: number; cy: number } | null>(null);
-  const [imageReady, setImageReady] = useState(false);
-
-  // Load the image when the dialog opens
-  useEffect(() => {
-    if (!open || !src) return;
-    setImageReady(false);
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.onload = () => {
-      imgRef.current = img;
-      // Default crop = centred 80% box
-      const w = img.naturalWidth * 0.8;
-      const h = img.naturalHeight * 0.8;
-      setCrop({
-        x: (img.naturalWidth - w) / 2,
-        y: (img.naturalHeight - h) / 2,
-        width: w,
-        height: h,
-      });
-      setRotation(0);
-      setImageReady(true);
-    };
-    img.onerror = () => setImageReady(false);
-    img.src = src;
-  }, [open, src]);
-
-  // Render image + crop overlay
-  useEffect(() => {
-    if (!imageReady || !imgRef.current || !canvasRef.current) return;
-    const img = imgRef.current;
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    // Scale image to fit a 480px-wide preview while preserving aspect
-    const previewW = 480;
-    const scale = previewW / img.naturalWidth;
-    const previewH = img.naturalHeight * scale;
-    canvas.width = previewW;
-    canvas.height = previewH;
-    ctx.clearRect(0, 0, previewW, previewH);
-
-    // Apply rotation to the image (purely visual — actual rotation is baked in on confirm)
-    ctx.save();
-    ctx.translate(previewW / 2, previewH / 2);
-    ctx.rotate((rotation * Math.PI) / 180);
-    const drawW = rotation % 180 === 0 ? previewW : previewH;
-    const drawH = rotation % 180 === 0 ? previewH : previewW;
-    ctx.drawImage(img, -drawW / 2, -drawH / 2, drawW, drawH);
-    ctx.restore();
-
-    // Draw crop overlay (in preview coordinates)
-    const px = crop.x * scale;
-    const py = crop.y * scale;
-    const pw = crop.width * scale;
-    const ph = crop.height * scale;
-    ctx.fillStyle = 'rgba(0,0,0,0.45)';
-    ctx.fillRect(0, 0, previewW, py);
-    ctx.fillRect(0, py + ph, previewW, previewH - py - ph);
-    ctx.fillRect(0, py, px, ph);
-    ctx.fillRect(px + pw, py, previewW - px - pw, ph);
-    ctx.strokeStyle = '#3b82f6';
-    ctx.lineWidth = 2;
-    ctx.strokeRect(px, py, pw, ph);
-  }, [imageReady, crop, rotation]);
-
-  const handlePointerDown = useCallback(
-    (e: React.PointerEvent<HTMLCanvasElement>) => {
-      if (!imgRef.current || !canvasRef.current) return;
-      const rect = canvasRef.current.getBoundingClientRect();
-      const scale = imgRef.current.naturalWidth / rect.width;
-      setDrag({
-        ox: (e.clientX - rect.left) * scale,
-        oy: (e.clientY - rect.top) * scale,
-        cx: crop.x,
-        cy: crop.y,
-      });
-      (e.target as HTMLCanvasElement).setPointerCapture(e.pointerId);
-    },
-    [crop],
-  );
-
-  const handlePointerMove = useCallback(
-    (e: React.PointerEvent<HTMLCanvasElement>) => {
-      if (!drag || !imgRef.current || !canvasRef.current) return;
-      const rect = canvasRef.current.getBoundingClientRect();
-      const scale = imgRef.current.naturalWidth / rect.width;
-      const dx = (e.clientX - rect.left) * scale - drag.ox;
-      const dy = (e.clientY - rect.top) * scale - drag.oy;
-      const nextX = Math.max(0, Math.min(drag.cx + dx, imgRef.current.naturalWidth - crop.width));
-      const nextY = Math.max(0, Math.min(drag.cy + dy, imgRef.current.naturalHeight - crop.height));
-      setCrop((c) => ({ ...c, x: nextX, y: nextY }));
-    },
-    [drag, crop.width, crop.height],
-  );
-
-  const handlePointerUp = useCallback(() => setDrag(null), []);
-
-  const rotate = useCallback(() => setRotation((r) => (r + 90) % 360), []);
-
-  const handleConfirm = useCallback(async () => {
-    if (!imgRef.current) return;
-    const img = imgRef.current;
-    const out = document.createElement('canvas');
-    // After rotation, swap width/height when needed
-    const cw = crop.width;
-    const ch = crop.height;
-    out.width = rotation % 180 === 0 ? cw : ch;
-    out.height = rotation % 180 === 0 ? ch : cw;
-    const ctx = out.getContext('2d');
-    if (!ctx) return;
-    ctx.save();
-    ctx.translate(out.width / 2, out.height / 2);
-    ctx.rotate((rotation * Math.PI) / 180);
-    ctx.drawImage(img, crop.x, crop.y, cw, ch, -cw / 2, -ch / 2, cw, ch);
-    ctx.restore();
-    const blob: Blob | null = await new Promise((resolve) => out.toBlob(resolve, outputType));
-    if (blob) {
-      onConfirm(blob, outputName);
-      onOpenChange(false);
-    }
-  }, [crop, rotation, outputName, outputType, onConfirm, onOpenChange]);
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-xl">
-        <DialogHeader>
-          <DialogTitle>Crop & rotate image</DialogTitle>
-          <DialogDescription>
-            Drag the highlighted box to reposition the crop. Use the rotate button to spin the image
-            in 90° increments.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex flex-col items-center gap-3">
-          {imageReady ? (
-            <canvas
-              ref={canvasRef}
-              data-testid="image-cropper-canvas"
-              role="img"
-              aria-label="Image crop preview"
-              className="border rounded-md cursor-move touch-none max-w-full"
-              onPointerDown={handlePointerDown}
-              onPointerMove={handlePointerMove}
-              onPointerUp={handlePointerUp}
-              onPointerCancel={handlePointerUp}
-            />
-          ) : (
-            <div className="flex h-[270px] w-full items-center justify-center text-sm text-muted-foreground">
-              Loading image…
-            </div>
-          )}
-          <div className="flex w-full items-center justify-between text-xs text-muted-foreground">
-            <span>
-              Crop: {Math.round(crop.width)} × {Math.round(crop.height)} px
-            </span>
-            <span>Rotation: {rotation}°</span>
-          </div>
-        </div>
-
-        <DialogFooter className="flex justify-between sm:justify-between">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={rotate}
-            data-testid="image-cropper-rotate"
-          >
-            <RotateCw className="size-4 mr-2" />
-            Rotate 90°
-          </Button>
-          <div className="flex gap-2">
-            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
-              Cancel
-            </Button>
-            <Button
-              type="button"
-              onClick={handleConfirm}
-              disabled={!imageReady}
-              data-testid="image-cropper-confirm"
-            >
-              <CropIcon className="size-4 mr-2" />
-              Apply crop
-            </Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

package/src/widgets/ImageField.tsx

@@ -1,255 +0,0 @@
-import React, { useRef, useState, useCallback, lazy, Suspense } from 'react';
-import { Button, EmptyValue } from '@object-ui/components';
-import { useUpload } from '@object-ui/providers';
-import { useObjectTranslation } from '@object-ui/i18n';
-import { X, Image as ImageIcon, Crop as CropIcon, Loader2 } from 'lucide-react';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-import { ImageLightbox } from './ImageLightbox';
-import { useUploadingSignal } from './useUploadingSignal';
-import {
-  fileValueForSubmit,
-  readFileValues,
-  uploadResultView,
-  withRecentUploads,
-  type FileValueView,
-} from './file-value';
-
-// Lazy-load the cropper so the dialog (canvas + crop logic) is not in the initial
-// ImageField bundle. Consumers that never crop pay zero cost.
-const ImageCropperDialog = lazy(() =>
-  import('./ImageCropperDialog').then((m) => ({ default: m.ImageCropperDialog })),
-);
-
-/**
- * ImageField - Image upload widget with preview thumbnails
- * Supports single and multiple image uploads with drag-and-drop and preview display
- */
-export function ImageField({ value, onChange, field, readonly, onUploadingChange, error, ...props }: FieldWidgetComponentProps<any>) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const imageField = field as any;
-  const multiple = imageField?.multiple || false;
-  const accept = imageField?.accept ? imageField.accept.join(',') : 'image/*';
-  /**
-   * Set `field.crop = false` to opt out of inline cropping. Defaults to enabled.
-   */
-  const cropEnabled = imageField?.crop !== false;
-  const [cropTarget, setCropTarget] = useState<{ index: number; src: string; name: string } | null>(null);
-  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
-  const { upload } = useUpload();
-  const { t } = useObjectTranslation();
-  const [uploading, setUploading] = useState(false);
-  // Display details of just-uploaded images, keyed by their new `sys_file` id.
-  // Submitting the reference form means the field value no longer carries the
-  // URL a thumbnail needs; these keep the preview visible until the next read
-  // returns the expanded form. See `file-value`.
-  const [recent, setRecent] = useState<Record<string, FileValueView>>({});
-  useUploadingSignal(uploading, onUploadingChange);
-
-  // Derived value + memoized handlers must run before the readonly early return
-  // so hook order stays stable across renders.
-  const images = value ? (Array.isArray(value) ? value : [value]) : [];
-  const views = withRecentUploads(readFileValues(value, 'Image'), recent);
-
-  const remember = useCallback((result: any, originalName: string) => {
-    const view = uploadResultView(result, originalName);
-    if (view.id) setRecent((prev) => ({ ...prev, [view.id as string]: view }));
-  }, []);
-
-  const handleCropConfirm = useCallback(
-    async (blob: Blob, name: string) => {
-      if (!cropTarget) return;
-      setUploading(true);
-      try {
-        const result = await upload(blob);
-        remember(result, name);
-        const next = fileValueForSubmit(result, name);
-        if (multiple) {
-          const updated = [...images];
-          updated[cropTarget.index] = next;
-          onChange(updated);
-        } else {
-          onChange(next);
-        }
-      } finally {
-        setUploading(false);
-        setCropTarget(null);
-      }
-    },
-    [cropTarget, images, multiple, onChange, upload, remember],
-  );
-
-  const openCropper = useCallback(
-    (index: number) => {
-      const img = views[index];
-      if (!img?.url) return;
-      setCropTarget({ index, src: img.url, name: img.name || `image-${index}.png` });
-    },
-    [views],
-  );
-
-  const lightboxImages = views.filter((v) => v.url).map((v) => ({ url: v.url as string, name: v.name }));
-
-  if (readonly) {
-    if (!value || lightboxImages.length === 0) return <EmptyValue />;
-
-    return (
-      <>
-        <div className="flex flex-wrap gap-2">
-          {lightboxImages.map((img, idx) => (
-            <button
-              key={idx}
-              type="button"
-              onClick={() => setLightboxIndex(idx)}
-              className="group relative overflow-hidden rounded-md border border-border focus:outline-none focus:ring-2 focus:ring-ring"
-              aria-label={t('fields.image.enlarge', { name: img.name || t('fields.image.imageAlt', { index: idx + 1 }) })}
-            >
-              <img
-                src={img.url}
-                alt={img.name || t('fields.image.imageAlt', { index: idx + 1 })}
-                className="size-20 object-cover transition-transform duration-150 group-hover:scale-105"
-              />
-              <span className="pointer-events-none absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/10" />
-            </button>
-          ))}
-        </div>
-        {lightboxIndex !== null && (
-          <ImageLightbox
-            images={lightboxImages}
-            index={lightboxIndex}
-            open
-            onOpenChange={(o) => !o && setLightboxIndex(null)}
-            onIndexChange={setLightboxIndex}
-          />
-        )}
-      </>
-    );
-  }
-
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFiles = Array.from(e.target.files || []);
-    if (selectedFiles.length === 0) return;
-
-    setUploading(true);
-    try {
-      const imageObjects = await Promise.all(
-        selectedFiles.map(async (file) => {
-          const result = await upload(file);
-          remember(result, file.name);
-          return fileValueForSubmit(result, file.name);
-        }),
-      );
-
-      if (multiple) {
-        onChange([...images, ...imageObjects]);
-      } else {
-        onChange(imageObjects[0]);
-      }
-    } finally {
-      setUploading(false);
-      // Reset input so picking the same file again still triggers change.
-      if (inputRef.current) inputRef.current.value = '';
-    }
-  };
-
-  const handleRemove = (index: number) => {
-    if (multiple) {
-      const newImages = images.filter((_: any, i: number) => i !== index);
-      onChange(newImages.length > 0 ? newImages : null);
-    } else {
-      onChange(null);
-    }
-  };
-
-  return (
-    <div className={props.className}>
-      <input
-        ref={inputRef}
-        type="file"
-        multiple={multiple}
-        accept={accept}
-        onChange={handleFileChange}
-        className="hidden"
-      />
-      
-      <div className="space-y-2">
-        {views.length > 0 && (
-          <div className="grid grid-cols-4 gap-2">
-            {views.map((img, idx) => (
-              <div key={idx} className="relative group">
-                <img
-                  src={img.url || ''}
-                  alt={img.name || t('fields.image.imageAlt', { index: idx + 1 })}
-                  className="size-20 rounded-md object-cover border border-gray-200"
-                />
-                <div className="absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                  {cropEnabled && (
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      size="sm"
-                      onClick={() => openCropper(idx)}
-                      className="h-6 w-6 p-0"
-                      aria-label={t('fields.image.crop', { index: idx + 1 })}
-                      data-testid={`image-field-crop-${idx}`}
-                    >
-                      <CropIcon className="size-3" />
-                    </Button>
-                  )}
-                  <Button
-                    type="button"
-                    variant="destructive"
-                    size="sm"
-                    onClick={() => handleRemove(idx)}
-                    className="h-6 w-6 p-0"
-                    aria-label={t('fields.image.remove', { index: idx + 1 })}
-                  >
-                    <X className="size-3" />
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-        
-        <Button
-          // DOM pass-through onto the widget's real focusable control — the
-          // upload button is the keyboard path to the hidden file input
-          // (objectui#3318).
-          {...toDomProps(props)}
-          type="button"
-          variant="outline"
-          onClick={() => inputRef.current?.click()}
-          className="w-full"
-          disabled={uploading}
-          data-testid="image-field-upload-button"
-          // AFTER the spread so this widget's own computation wins (#3222).
-          aria-invalid={!!error}
-        >
-          {uploading ? (
-            <Loader2 className="size-4 mr-2 animate-spin" />
-          ) : (
-            <ImageIcon className="size-4 mr-2" />
-          )}
-          {uploading
-            ? t('fields.image.uploading')
-            : images.length > 0
-              ? t('fields.image.addMore')
-              : t('fields.image.upload')}
-        </Button>
-      </div>
-
-      {cropEnabled && cropTarget && (
-        <Suspense fallback={null}>
-          <ImageCropperDialog
-            open
-            onOpenChange={(o) => !o && setCropTarget(null)}
-            src={cropTarget.src}
-            outputName={cropTarget.name}
-            onConfirm={handleCropConfirm}
-          />
-        </Suspense>
-      )}
-    </div>
-  );
-}

package/src/widgets/ImageLightbox.test.tsx

@@ -1,52 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { I18nProvider } from '@object-ui/i18n';
-import { ImageLightbox, type ImageLightboxProps } from './ImageLightbox';
-
-const imgs = [
-  { url: '/api/v1/storage/files/a', name: 'a.png' },
-  { url: '/api/v1/storage/files/b', name: 'b.png' },
-  { url: '/api/v1/storage/files/c', name: 'c.png' },
-];
-
-const renderLightbox = (props: ImageLightboxProps) =>
-  render(
-    <I18nProvider config={{ defaultLanguage: 'en', detectBrowserLanguage: false }}>
-      <ImageLightbox {...props} />
-    </I18nProvider>,
-  );
-
-describe('ImageLightbox', () => {
-  it('renders the image at the requested index', () => {
-    renderLightbox({ images: imgs, index: 1, open: true, onOpenChange: () => {} });
-    const img = screen.getByRole('img') as HTMLImageElement;
-    expect(img.src).toContain('/api/v1/storage/files/b');
-  });
-
-  it('shows navigation and a position counter for multiple images', () => {
-    renderLightbox({ images: imgs, index: 0, open: true, onOpenChange: () => {} });
-    expect(screen.getByText('1 / 3')).toBeInTheDocument();
-    expect(screen.getByLabelText('Next image')).toBeInTheDocument();
-    expect(screen.getByLabelText('Previous image')).toBeInTheDocument();
-  });
-
-  it('omits navigation for a single image', () => {
-    renderLightbox({ images: [imgs[0]], index: 0, open: true, onOpenChange: () => {} });
-    expect(screen.queryByLabelText('Next image')).not.toBeInTheDocument();
-    expect(screen.queryByText('1 / 1')).not.toBeInTheDocument();
-  });
-
-  it('advances to the next image and wraps around', () => {
-    const seen: number[] = [];
-    renderLightbox({ images: imgs, index: 2, open: true, onOpenChange: () => {}, onIndexChange: (i) => seen.push(i) });
-    fireEvent.click(screen.getByLabelText('Next image'));
-    expect(seen).toEqual([0]); // wrapped 2 -> 0
-  });
-
-  it('steps to the previous image and wraps around', () => {
-    const seen: number[] = [];
-    renderLightbox({ images: imgs, index: 0, open: true, onOpenChange: () => {}, onIndexChange: (i) => seen.push(i) });
-    fireEvent.click(screen.getByLabelText('Previous image'));
-    expect(seen).toEqual([2]); // wrapped 0 -> 2
-  });
-});

package/src/widgets/ImageLightbox.tsx

@@ -1,108 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react';
-import { Dialog, DialogContent, DialogTitle } from '@object-ui/components';
-import { useObjectTranslation } from '@object-ui/i18n';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-export interface LightboxImage {
-  url: string;
-  name?: string;
-}
-
-export interface ImageLightboxProps {
-  images: LightboxImage[];
-  /** Index of the image shown when the lightbox opens. */
-  index: number;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  /** Called when the user navigates to another image (prev/next, arrow keys). */
-  onIndexChange?: (index: number) => void;
-}
-
-/**
- * Full-screen image preview with prev/next navigation for a set of images.
- *
- * Controlled: the caller owns `open` and the current `index`. Built on the
- * shared `Dialog`, so backdrop-click and Escape close it for free; this adds
- * left/right arrow-key navigation and a position counter for the multi-image
- * case. A single image simply omits the arrows and counter.
- */
-export function ImageLightbox({ images, index, open, onOpenChange, onIndexChange }: ImageLightboxProps) {
-  const { t } = useObjectTranslation();
-  const count = images.length;
-  const current = images[index];
-
-  const go = React.useCallback(
-    (delta: number) => {
-      if (count <= 1) return;
-      const next = (index + delta + count) % count;
-      onIndexChange?.(next);
-    },
-    [count, index, onIndexChange],
-  );
-
-  const handleKeyDown = React.useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'ArrowRight') {
-        e.preventDefault();
-        go(1);
-      } else if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        go(-1);
-      }
-    },
-    [go],
-  );
-
-  if (!current) return null;
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="max-w-[92vw] sm:max-w-4xl p-0 bg-transparent border-0 shadow-none"
-        onKeyDown={handleKeyDown}
-      >
-        {/* Title is required for a labelled dialog but visually redundant here. */}
-        <DialogTitle className="sr-only">{current.name || t('fields.image.preview')}</DialogTitle>
-        <div className="relative flex items-center justify-center">
-          <img
-            src={current.url}
-            alt={current.name || t('fields.image.imageAlt', { index: index + 1 })}
-            className="max-h-[85vh] max-w-full rounded-md object-contain"
-          />
-
-          {count > 1 && (
-            <>
-              <button
-                type="button"
-                onClick={() => go(-1)}
-                aria-label={t('fields.image.previous')}
-                className="absolute left-2 top-1/2 -translate-y-1/2 flex size-9 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
-              >
-                <ChevronLeft className="size-5" />
-              </button>
-              <button
-                type="button"
-                onClick={() => go(1)}
-                aria-label={t('fields.image.next')}
-                className="absolute right-2 top-1/2 -translate-y-1/2 flex size-9 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
-              >
-                <ChevronRight className="size-5" />
-              </button>
-              <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-2.5 py-1 text-xs font-medium text-white">
-                {t('fields.image.counter', { current: index + 1, total: count })}
-              </div>
-            </>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}