@object-ui/fields 17.5.0 → 17.6.0

package/src/widgets/ImageField.tsx

@@ -1,305 +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 { maxSizeError, type TranslateFn } from './file-size-guard';
-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/*';
-  /**
-   * Max upload size in bytes. Delivered by `paramToField` for an action param
-   * and by the field config for a record field; enforced before any upload
-   * starts, exactly as FileField does (objectui#4141).
-   */
-  const maxSize = imageField?.maxSize as number | undefined;
-  /**
-   * 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);
-  /** Client-side rejections (oversize picks), cleared on the next attempt. */
-  const [errors, setErrors] = useState<string[]>([]);
-  // 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;
-      // The size that matters here is the CROP's, not the source image's: the
-      // cropper re-encodes to PNG, so cropping an in-limit JPEG can produce a
-      // blob over the limit. Checked before `setUploading` so a rejected crop
-      // never flashes the spinner, and the dialog closes so the message lands
-      // in the field's error row rather than behind the open dialog.
-      const rejection = maxSizeError(t as TranslateFn, { name, size: blob.size }, maxSize);
-      if (rejection) {
-        setErrors([rejection]);
-        setCropTarget(null);
-        return;
-      }
-      setErrors([]);
-      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, maxSize, t],
-  );
-
-  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 || []);
-    // Reset the input up front rather than in `finally`: a pick rejected below
-    // returns before the upload runs, and leaving the old value in place would
-    // stop the user re-picking the same name after shrinking the image.
-    // `selectedFiles` already holds the File objects, so clearing is safe.
-    if (inputRef.current) inputRef.current.value = '';
-    if (selectedFiles.length === 0) return;
-
-    // Enforce the declared limit before anything touches the network. Partial
-    // acceptance matches FileField: the in-limit picks of a multi-select still
-    // upload, and only the oversize ones are reported.
-    const rejections: string[] = [];
-    const validFiles = selectedFiles.filter((file) => {
-      const rejection = maxSizeError(t as TranslateFn, file, maxSize);
-      if (rejection) {
-        rejections.push(rejection);
-        return false;
-      }
-      return true;
-    });
-    setErrors(rejections);
-    if (validFiles.length === 0) return;
-
-    setUploading(true);
-    try {
-      const imageObjects = await Promise.all(
-        validFiles.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);
-    }
-  };
-
-  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>
-
-        {/* Client-side rejections (oversize picks). Same presentation as
-            FileField's error row — this widget previously had no surface for
-            them at all, because it never rejected anything (objectui#4141). */}
-        {errors.length > 0 && (
-          <div className="space-y-0.5">
-            {errors.map((err, i) => (
-              <p key={i} className="text-xs text-destructive">{err}</p>
-            ))}
-          </div>
-        )}
-      </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>
-  );
-}

package/src/widgets/LocationField.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * LocationField - Geographic coordinate input for latitude and longitude
- * Stores location as { latitude, longitude } object and displays as comma-separated pair
- */
-export function LocationField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<any>) {
-  const config = field;
-  // Location is stored as { latitude, longitude } object
-  // For display, convert to "latitude, longitude" string format
-  const displayValue = value && typeof value === 'object' 
-    ? `${value.latitude || 0}, ${value.longitude || 0}`
-    : '';
-
-  if (readonly) {
-    return <span className="text-sm">{displayValue || <EmptyValue />}</span>;
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    if (!val.trim()) {
-      onChange(null);
-      return;
-    }
-    
-    // Parse as coordinates (latitude, longitude)
-    const parts = val.split(',').map(p => p.trim());
-    if (parts.length === 2) {
-      const lat = parseFloat(parts[0]);
-      const lng = parseFloat(parts[1]);
-      if (!isNaN(lat) && !isNaN(lng)) {
-        onChange({ latitude: lat, longitude: lng });
-      }
-      // If invalid, don't update the value
-    }
-  };
-
-  return (
-    <Input
-      // DOM pass-through onto the real focusable control (objectui#3318).
-      {...toDomProps(props)}
-      type="text"
-      value={displayValue}
-      onChange={handleChange}
-      placeholder={config?.placeholder || 'latitude, longitude'}
-      disabled={readonly || props.disabled}
-      className={props.className}
-      // AFTER the spread so this widget's own computation wins: `error` is
-      // the published validation slot (#3222), `!!undefined` → explicit
-      // "false".
-      aria-invalid={!!error}
-    />
-  );
-}