@object-ui/fields 16.1.0 → 17.1.0

package/src/widgets/FilterConditionField.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { FilterBuilder, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
 import type { FieldWidgetProps } from './types';
+import { useFieldTranslation } from './useFieldTranslation';
 
 /**
  * FilterConditionField — visual criteria builder for a stored FilterCondition
@@ -101,7 +102,13 @@ function toArray(value: any): any[] {
   return value == null ? [] : [value];
 }
 
-function condToMongo(c: BuilderCondition, typeOf: (f: string) => string | undefined): Record<string, any> | null {
+/**
+ * Builder condition → `$`-operator criteria. Exported for tests: this is the
+ * chokepoint where a builder token becomes a spec `FieldOperatorsSchema` key,
+ * and a wrong spelling here is rejected downstream by `convertFiltersToAST`
+ * rather than at authoring time. @internal
+ */
+export function condToMongo(c: BuilderCondition, typeOf: (f: string) => string | undefined): Record<string, any> | null {
   const { field, operator, value } = c || ({} as BuilderCondition);
   if (!field) return null;
   const t = typeOf(field);
@@ -110,9 +117,23 @@ function condToMongo(c: BuilderCondition, typeOf: (f: string) => string | undefi
     case 'equals': return { [field]: cv };
     case 'notEquals': return { [field]: { $ne: cv } };
     case 'contains': return { [field]: { $contains: value } };
-    case 'notContains': return { [field]: { $ncontains: value } };
+    // `$notContains` is the spec spelling (FieldOperatorsSchema, data/filter.zod.ts).
+    // This emitted `$ncontains` — a token that appears nowhere in @objectstack/spec and
+    // that convertFiltersToAST throws on, so every "does not contain" rule authored here
+    // was rejected downstream. See kvToCondition for reading the old spelling back.
+    case 'notContains': return { [field]: { $notContains: value } };
+    // String-specific spec operators — previously unreachable from the
+    // builder UI even though FieldOperatorsSchema accepts them (#2942).
+    case 'startsWith': return { [field]: { $startsWith: value } };
+    case 'endsWith': return { [field]: { $endsWith: value } };
     case 'isEmpty': return { [field]: { $in: [null, ''] } };
     case 'isNotEmpty': return { [field]: { $nin: [null, ''] } };
+    // Null / existence spec operators. Distinct from isEmpty/isNotEmpty,
+    // which also treat '' as empty.
+    case 'isNull': return { [field]: { $null: true } };
+    case 'isNotNull': return { [field]: { $null: false } };
+    case 'exists': return { [field]: { $exists: true } };
+    case 'notExists': return { [field]: { $exists: false } };
     case 'greaterThan':
     case 'after': return { [field]: { $gt: cv } };
     case 'lessThan':
@@ -133,7 +154,11 @@ function filterGroupToMongo(group: BuilderGroup, typeOf: (f: string) => string |
   const frags = (group?.conditions ?? [])
     .map((c) => condToMongo(c, typeOf))
     .filter((x): x is Record<string, any> => !!x);
-  if (frags.length === 0) return null; // empty = match all
+  // No conditions → no predicate. NOT "match all": a sharing rule with an
+  // empty criteria is refused on save, and one already stored shares nothing
+  // (objectstack#3896 / ADR-0049). `null` becomes an empty stored value, which
+  // is what the required-criteria messaging below keys off.
+  if (frags.length === 0) return null;
   if (group.logic === 'or') return { $or: frags };
   if (frags.length === 1) return frags[0];
   const keys = frags.flatMap((f) => Object.keys(f));
@@ -145,7 +170,13 @@ function arraysEqual(a: any, b: any[]): boolean {
   return Array.isArray(a) && a.length === b.length && a.every((v, i) => v === b[i]);
 }
 
-function kvToCondition(field: string, v: any, idx: number): BuilderCondition | null {
+/**
+ * Criteria → builder condition (the reverse of {@link condToMongo}). Returning
+ * `null` makes the builder refuse to load the rule ("criteria can't be
+ * represented"), so this must keep accepting spellings previously written.
+ * @internal
+ */
+export function kvToCondition(field: string, v: any, idx: number): BuilderCondition | null {
   const id = `c_${idx}_${field}`;
   if (v === null || typeof v !== 'object' || Array.isArray(v)) {
     return { id, field, operator: 'equals', value: v };
@@ -157,11 +188,19 @@ function kvToCondition(field: string, v: any, idx: number): BuilderCondition | n
     switch (op) {
       case '$ne': return { id, field, operator: 'notEquals', value: val };
       case '$contains': return { id, field, operator: 'contains', value: val };
+      // `$ncontains` is the pre-fix spelling this widget used to emit. Criteria saved
+      // before the fix still carry it, so keep reading it — dropping it here would make
+      // those rules fail to load ("criteria can't be represented") instead of migrating.
+      case '$notContains':
       case '$ncontains': return { id, field, operator: 'notContains', value: val };
       case '$gt': return { id, field, operator: 'greaterThan', value: val };
       case '$lt': return { id, field, operator: 'lessThan', value: val };
       case '$gte': return { id, field, operator: 'greaterOrEqual', value: val };
       case '$lte': return { id, field, operator: 'lessOrEqual', value: val };
+      case '$startsWith': return { id, field, operator: 'startsWith', value: val };
+      case '$endsWith': return { id, field, operator: 'endsWith', value: val };
+      case '$null': return { id, field, operator: val === false ? 'isNotNull' : 'isNull', value: '' };
+      case '$exists': return { id, field, operator: val === false ? 'notExists' : 'exists', value: '' };
       case '$in':
         return arraysEqual(val, [null, ''])
           ? { id, field, operator: 'isEmpty', value: '' }
@@ -212,6 +251,37 @@ function mongoToFilterGroup(mongo: any): BuilderGroup | null {
   return { id: 'root', logic: 'and', conditions };
 }
 
+/**
+ * Would this criteria select EVERY record of the object?
+ *
+ * Mirrors the server's `isMatchAllCriteria` (objectstack `plugin-sharing`,
+ * #3896) closely enough to warn before the round-trip: blank, `{}`, `[]`, and
+ * the vacuous combinators. Deliberately conservative in the same direction —
+ * the cost of a false positive is one extra hint, the cost of a false negative
+ * is a save that fails with a toast. The server stays authoritative.
+ *
+ * @internal exported for tests
+ */
+export function isMatchAllCriteria(parsed: any): boolean {
+  if (parsed == null) return true;
+  if (Array.isArray(parsed)) return parsed.every(isMatchAllCriteria);
+  if (typeof parsed !== 'object') return true;
+  const entries = Object.entries(parsed);
+  if (entries.length === 0) return true;
+  for (const [key, value] of entries) {
+    if (key === '$and') {
+      if (!Array.isArray(value) || value.every(isMatchAllCriteria)) continue;
+      return false;
+    }
+    if (key === '$or') {
+      if (!Array.isArray(value) || value.length === 0 || value.some(isMatchAllCriteria)) continue;
+      return false;
+    }
+    return false;
+  }
+  return true;
+}
+
 function stringifyValue(value: string | object | undefined | null): string {
   if (value == null || value === '') return '';
   if (typeof value === 'string') return value;
@@ -230,6 +300,7 @@ export function FilterConditionField({
   ...props
 }: FieldWidgetProps<string | object>) {
   const ctx = React.useContext(SchemaRendererContext);
+  const { t } = useFieldTranslation();
   const dataSource: any = (props as any).dataSource ?? (ctx as any)?.dataSource ?? null;
   const dependentValues: Record<string, any> = (props as any).dependentValues ?? {};
   const objectName = String(dependentValues.object_name ?? '');
@@ -269,6 +340,13 @@ export function FilterConditionField({
     [parsed],
   );
 
+  // Only flag a criteria that PARSES to match-all. Unparsable JSON has its own
+  // message (`invalidJson`) and must not collect a second, contradictory one.
+  const isEmptyCriteria = React.useMemo(
+    () => parsed.ok && isMatchAllCriteria(parsed.mongo),
+    [parsed],
+  );
+
   // Raw JSON mode: forced when the stored value can't be represented in the
   // builder; otherwise opt-in via the toggle.
   const representable = parsed.ok && group !== null;
@@ -290,14 +368,22 @@ export function FilterConditionField({
   if (!objectName) {
     return (
       <p className={cn('text-sm text-muted-foreground', className)}>
-        Select an object first.
+        {t('fields.filterCondition.selectObjectFirst')}
       </p>
     );
   }
 
   if (readonly) {
     if (!rawValue.trim()) {
-      return <span className={cn('text-sm text-muted-foreground', className)}>All records</span>;
+      // Used to read "All records" — which was both wrong and the most
+      // dangerous thing this widget could say (objectstack#3896). A rule with
+      // no criteria has never usefully shared everything; it now shares
+      // nothing and is refused on save, so name that instead.
+      return (
+        <span className={cn('text-sm text-destructive', className)}>
+          {t('fields.filterCondition.noCriteria')}
+        </span>
+      );
     }
     return (
       <pre className={cn('overflow-x-auto rounded bg-muted/40 p-2 text-xs', className)}>
@@ -317,7 +403,7 @@ export function FilterConditionField({
             onChange={(e) => onChange(e.target.value as any)}
           />
           {!parsed.ok && (
-            <span className="text-xs text-destructive">Invalid JSON — the rule will match no records until fixed.</span>
+            <span className="text-xs text-destructive">{t('fields.filterCondition.invalidJson')}</span>
           )}
         </>
       ) : (
@@ -327,14 +413,28 @@ export function FilterConditionField({
           onChange={handleBuilderChange as any}
         />
       )}
+      {/*
+        The server refuses to save a criteria that would select every record
+        (objectstack#3896), but that rejection only arrives as a toast after
+        the admin hits Save. Say it here, while they are still looking at the
+        empty builder — and never imply that leaving it empty means "share
+        everything", which is what this widget used to do.
+      */}
+      {isEmptyCriteria && (
+        <span className="text-xs text-destructive">
+          {t('fields.filterCondition.criteriaRequired')}
+        </span>
+      )}
       <button
         type="button"
         className="self-start text-xs text-muted-foreground underline-offset-2 hover:underline"
         onClick={() => setRawMode((m) => !m)}
         disabled={!representable && !rawMode}
-        title={!representable ? 'This criteria can only be edited as JSON' : undefined}
+        title={!representable ? t('fields.filterCondition.jsonOnly') : undefined}
       >
-        {rawMode ? 'Use visual builder' : 'Edit as JSON'}
+        {rawMode
+          ? t('fields.filterCondition.useVisualBuilder')
+          : t('fields.filterCondition.editAsJson')}
       </button>
     </div>
   );

package/src/widgets/ImageField.tsx

@@ -1,9 +1,18 @@
 import React, { useRef, useState, useCallback, lazy, Suspense } from 'react';
 import { Button, EmptyValue } from '@object-ui/components';
 import { useUpload } from '@object-ui/providers';
-import { Upload, X, Image as ImageIcon, Crop as CropIcon, Loader2 } from 'lucide-react';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { X, Image as ImageIcon, Crop as CropIcon, Loader2 } from 'lucide-react';
 import { FieldWidgetProps } from './types';
+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.
@@ -25,13 +34,26 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
    */
   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) => {
@@ -39,13 +61,8 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
       setUploading(true);
       try {
         const result = await upload(blob);
-        const next = {
-          name: result.name || name,
-          original_name: name,
-          size: result.size,
-          mime_type: result.mimeType,
-          url: result.url,
-        };
+        remember(result, name);
+        const next = fileValueForSubmit(result, name);
         if (multiple) {
           const updated = [...images];
           updated[cropTarget.index] = next;
@@ -58,32 +75,53 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
         setCropTarget(null);
       }
     },
-    [cropTarget, images, multiple, onChange, upload],
+    [cropTarget, images, multiple, onChange, upload, remember],
   );
 
   const openCropper = useCallback(
     (index: number) => {
-      const img = images[index];
+      const img = views[index];
       if (!img?.url) return;
       setCropTarget({ index, src: img.url, name: img.name || `image-${index}.png` });
     },
-    [images],
+    [views],
   );
 
+  const lightboxImages = views.filter((v) => v.url).map((v) => ({ url: v.url as string, name: v.name }));
+
   if (readonly) {
-    if (!value) return <EmptyValue />;
+    if (!value || lightboxImages.length === 0) return <EmptyValue />;
 
     return (
-      <div className="flex flex-wrap gap-2">
-        {images.map((img: any, idx: number) => (
-          <img
-            key={idx}
-            src={img.url || ''}
-            alt={img.name || `Image ${idx + 1}`}
-            className="size-20 rounded-md object-cover border border-gray-200"
+      <>
+        <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}
           />
-        ))}
-      </div>
+        )}
+      </>
     );
   }
 
@@ -96,13 +134,8 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
       const imageObjects = await Promise.all(
         selectedFiles.map(async (file) => {
           const result = await upload(file);
-          return {
-            name: result.name,
-            original_name: file.name,
-            size: result.size,
-            mime_type: result.mimeType,
-            url: result.url,
-          };
+          remember(result, file.name);
+          return fileValueForSubmit(result, file.name);
         }),
       );
 
@@ -139,13 +172,13 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
       />
       
       <div className="space-y-2">
-        {images.length > 0 && (
+        {views.length > 0 && (
           <div className="grid grid-cols-4 gap-2">
-            {images.map((img: any, idx: number) => (
+            {views.map((img, idx) => (
               <div key={idx} className="relative group">
                 <img
                   src={img.url || ''}
-                  alt={img.name || `Image ${idx + 1}`}
+                  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">
@@ -156,7 +189,7 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
                       size="sm"
                       onClick={() => openCropper(idx)}
                       className="h-6 w-6 p-0"
-                      aria-label={`Crop image ${idx + 1}`}
+                      aria-label={t('fields.image.crop', { index: idx + 1 })}
                       data-testid={`image-field-crop-${idx}`}
                     >
                       <CropIcon className="size-3" />
@@ -168,6 +201,7 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
                     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>
@@ -190,7 +224,11 @@ export function ImageField({ value, onChange, field, readonly, onUploadingChange
           ) : (
             <ImageIcon className="size-4 mr-2" />
           )}
-          {uploading ? 'Uploading…' : images.length > 0 ? 'Add More Images' : 'Upload Image'}
+          {uploading
+            ? t('fields.image.uploading')
+            : images.length > 0
+              ? t('fields.image.addMore')
+              : t('fields.image.upload')}
         </Button>
       </div>
 

package/src/widgets/ImageLightbox.test.tsx

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,108 @@
+/**
+ * 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>
+  );
+}