@object-ui/fields 6.2.3 → 7.1.0

package/src/widgets/recentLookups.ts

@@ -0,0 +1,47 @@
+/**
+ * Recently-used lookup memory.
+ *
+ * Mainstream record pickers (Salesforce, Dataverse, SAP, ServiceNow) surface
+ * the user's recently-picked records the moment a lookup is focused — before
+ * any typing. We approximate that with a small per-object ring of the last few
+ * selected record ids, kept in localStorage (no backend dependency). When a
+ * recent-items API later exists, this module is the single seam to swap.
+ */
+
+const KEY_PREFIX = 'objectui:lookup:recent:';
+const MAX_RECENT = 5;
+
+function storage(): Storage | null {
+  try {
+    return typeof localStorage !== 'undefined' ? localStorage : null;
+  } catch {
+    // Accessing localStorage can throw in sandboxed iframes / SSR.
+    return null;
+  }
+}
+
+/** Most-recent-first list of record ids previously chosen for `objectName`. */
+export function getRecentLookupIds(objectName: string): Array<string | number> {
+  const s = storage();
+  if (!objectName || !s) return [];
+  try {
+    const raw = s.getItem(KEY_PREFIX + objectName);
+    if (!raw) return [];
+    const arr = JSON.parse(raw);
+    return Array.isArray(arr) ? arr.slice(0, MAX_RECENT) : [];
+  } catch {
+    return [];
+  }
+}
+
+/** Record that `id` was just chosen for `objectName` (moves it to the front). */
+export function pushRecentLookupId(objectName: string, id: string | number | null | undefined): void {
+  const s = storage();
+  if (!objectName || id === null || id === undefined || id === '' || !s) return;
+  try {
+    const next = [id, ...getRecentLookupIds(objectName).filter((x) => x !== id)].slice(0, MAX_RECENT);
+    s.setItem(KEY_PREFIX + objectName, JSON.stringify(next));
+  } catch {
+    // Ignore quota / serialization failures — recents are best-effort.
+  }
+}

package/src/widgets/useFieldTranslation.ts

@@ -8,7 +8,37 @@ const FIELD_DEFAULTS: Record<string, string> = {
   'common.selectOption': 'Select an option',
   'common.select': 'Select...',
   'common.search': 'Search',
+  'common.loading': 'Loading...',
+  'common.noResults': 'No results found',
+  'common.cancel': 'Cancel',
+  'common.confirm': 'Confirm',
   'table.selected': '{{count}} selected',
+  'table.search': 'Search...',
+  'lookup.loading': 'Loading…',
+  'lookup.noOptions': 'No options found',
+  'lookup.noRecords': 'No records found',
+  'lookup.recentlyUsed': 'Recently used',
+  'lookup.allResults': 'All results',
+  'lookup.createNew': 'Create new',
+  'lookup.createNamed': 'Create new "{{name}}"',
+  'lookup.showingResults': 'Showing {{shown}} of {{total}} results',
+  'lookup.showAllResults': 'Show all results ({{count}})',
+  'lookup.selectedBadge': 'Selected',
+  'lookup.browseAll': 'Browse all records',
+  'lookup.remove': 'Remove {{label}}',
+  'lookup.selectFirst': 'Select {{fields}} first',
+  'lookup.selectRecord': 'Select record',
+  'lookup.recordCount': '{{count}} records',
+  'lookup.recordCountOne': '1 record',
+  'lookup.pageOf': 'Page {{current}} of {{total}}',
+  'lookup.filters': 'Filters',
+  'lookup.clear': 'Clear',
+  'lookup.yes': 'Yes',
+  'lookup.filterPlaceholder': 'Filter {{label}}',
+  'lookup.prevPage': 'Previous page',
+  'lookup.nextPage': 'Next page',
+  'lookup.jumpToPage': 'Jump to page',
+  'lookup.retry': 'Retry',
 };
 
 export const useFieldTranslation = createSafeTranslation(

package/dist/packages/fields/src/fields-edge-cases.stories.d.ts

@@ -1,45 +0,0 @@
-import { StoryObj } from '@storybook/react';
-/**
- * **Field Widgets – Edge Cases** from `@object-ui/fields`.
- *
- * Stories that exercise boundary conditions: empty values, overflow text,
- * RTL content, emoji-only input, error states, disabled state, and readonly
- * variants across multiple field types.
- */
-declare const meta: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        readonly: {
-            control: "boolean";
-            description: string;
-        };
-        disabled: {
-            control: "boolean";
-            description: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<any>;
-export declare const EmptyText: Story;
-export declare const NullNumber: Story;
-export declare const EmptySelect: Story;
-export declare const LongText: Story;
-export declare const LongTextArea: Story;
-export declare const LongUrl: Story;
-export declare const RTLText: Story;
-export declare const RTLTextArea: Story;
-export declare const EmojiText: Story;
-export declare const EmojiEmail: Story;
-export declare const ErrorText: Story;
-export declare const ErrorNumber: Story;
-export declare const ErrorSelect: Story;
-export declare const DisabledText: Story;
-export declare const DisabledNumber: Story;
-export declare const DisabledSelect: Story;
-export declare const DisabledBoolean: Story;
-export declare const ReadonlyGallery: Story;

package/dist/packages/fields/src/fields.stories.d.ts

@@ -1,56 +0,0 @@
-import { StoryObj } from '@storybook/react';
-/**
- * **Field Widgets** from `@object-ui/fields`.
- *
- * These components handle data formatting, validation, and display logic for specific data types.
- * They are typically used within `ObjectForm` or `ObjectGrid` but can be used standalone.
- *
- * Note: These widgets implement the `FieldWidgetProps` interface.
- */
-declare const meta: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<any>;
-export declare const Text: Story;
-export declare const TextArea: Story;
-export declare const Email: Story;
-export declare const Phone: Story;
-export declare const Url: Story;
-export declare const Password: Story;
-export declare const AutoNumber: Story;
-export declare const Number: Story;
-export declare const Currency: Story;
-export declare const Percent: Story;
-export declare const Date: Story;
-export declare const DateTime: Story;
-export declare const Time: Story;
-export declare const Boolean: Story;
-export declare const Select: Story;
-export declare const Lookup: Story;
-export declare const MultiSelectLookup: Story;
-export declare const User: Story;
-export declare const File: Story;
-export declare const Location: Story;
-export declare const Formula: Story;
-export declare const Summary: Story;
-export declare const ReadOnly: Story;
-export declare const RichText: Story;
-export declare const Image: Story;
-export declare const Color: Story;
-export declare const Slider: Story;
-export declare const Rating: Story;
-export declare const Code: Story;
-export declare const Avatar: Story;
-export declare const Signature: Story;
-export declare const QRCode: Story;
-export declare const Address: Story;
-export declare const Geolocation: Story;
-export declare const Object: Story;
-export declare const Grid: Story;
-export declare const MasterDetail: Story;
-export declare const Vector: Story;

package/dist/packages/fields/src/index.d.ts

@@ -1,286 +0,0 @@
-import { default as React } from 'react';
-import { FieldMetadata } from '../../types/src';
-/**
- * Heuristic: detect strings that look like opaque foreign-key IDs (e.g. nanoid
- * or BSON ObjectId). Used so we don't display random gibberish to users when
- * a lookup wasn't expanded.
- */
-export declare function isLikelyOpaqueId(v: unknown): boolean;
-/**
- * Cell renderer props
- */
-export interface CellRendererProps {
-    value: any;
-    field: FieldMetadata;
-    isEditing?: boolean;
-    onChange?: (value: any) => void;
-}
-/**
- * Coerce a value to a safe primitive for rendering.
- * Handles MongoDB wrapper types ($numberDecimal, $oid, $date), expanded
- * reference objects, and arrays so that no raw object is ever passed as
- * a React child — preventing React error #310.
- */
-export declare function coerceToSafeValue(value: unknown): string | number | boolean | null | undefined;
-/**
- * Format currency value. When `currency` is undefined, falls back to a
- * plain number with thousands separators (no symbol). Silently assuming
- * USD for unconfigured currency fields was the #1 source of "why is my
- * RMB amount showing as dollars?" bug reports.
- *
- * Trailing `.00` is dropped when the value is a whole number — Salesforce
- * convention: `$1,234.50` keeps cents; `$1,234` does not.
- */
-export declare function formatCurrency(value: number, currency?: string): string;
-/**
- * Format currency value in compact form for mobile display.
- * E.g., $150,000 → $150K, $1,200,000 → $1.2M
- * When `currency` is undefined, returns a compact number without symbol.
- */
-export declare function formatCompactCurrency(value: number, currency?: string): string;
-/**
- * Format a plain number with thousands separators, no currency symbol.
- * Used as a safe fallback when a currency-typed field has no `currency`
- * configured — we'd rather render `1,234.50` than silently assume USD.
- */
-export declare function formatNumber(value: number, decimals?: number): string;
-/**
- * Format percent value
- * Handles both decimal (0.8 = 80%) and whole number (80 = 80%) inputs.
- */
-export declare function formatPercent(value: number, precision?: number): string;
-/**
- * Humanize a snake_case or kebab-case string into Title Case.
- * Used as fallback label when no explicit option.label exists.
- *
- * Examples:
- *   "in_progress" → "In Progress"
- *   "high-priority" → "High Priority"
- *   "active" → "Active"
- */
-export declare function humanizeLabel(value: string): string;
-/**
- * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d")
- */
-export declare function formatRelativeDate(value: string | Date | number): string;
-/**
- * Format date value
- */
-export declare function formatDate(value: string | Date | number, style?: string): string;
-/**
- * Format datetime value
- */
-export declare function formatDateTime(value: string | Date | number): string;
-/**
- * Text field cell renderer
- */
-export declare function TextCellRenderer({ value }: CellRendererProps): React.ReactElement;
-/**
- * Number field cell renderer
- */
-export declare function NumberCellRenderer({ value, field }: CellRendererProps): React.ReactElement;
-/**
- * Currency field cell renderer
- */
-export declare function CurrencyCellRenderer({ value, field }: CellRendererProps): React.ReactElement;
-/**
- * Percent field cell renderer with mini progress bar
- */
-export declare function PercentCellRenderer({ value, field }: CellRendererProps): React.ReactElement;
-/**
- * Boolean field cell renderer (Airtable-style checkbox)
- * Supports semantic rendering for completion fields (green indicator)
- * and warning badge for active/enabled fields when false.
- */
-export declare function BooleanCellRenderer({ value, field }: CellRendererProps): React.ReactElement;
-/**
- * Date field cell renderer
- */
-export declare function DateCellRenderer({ value, field }: CellRendererProps): React.ReactElement;
-/**
- * DateTime field cell renderer (Airtable-style with date and time visually separated)
- */
-export declare function DateTimeCellRenderer({ value }: CellRendererProps): React.ReactElement;
-export declare function getBadgeColorClasses(color?: string, val?: unknown): string;
-/**
- * Resolve a semantic color name (e.g. "red", "green") for a value, suitable
- * for callers that need a raw color token rather than CSS classes (for
- * example, the Gantt renderer paints bars via inline styles).
- *
- * Resolution order: explicit option color → semantic value mapping →
- * deterministic hash fallback. Returns `undefined` only when no value is
- * supplied so the caller can fall back to its own default.
- */
-export declare function getSemanticColorName(color?: string, val?: unknown): string | undefined;
-/**
- * Map a semantic color name to its Tailwind -500 hex value. Used by
- * inline-style consumers (Gantt bars). Falls back to the supplied default
- * (or the platform default blue) when the name is unrecognized.
- */
-export declare function getSemanticHex(name?: string, fallback?: string): string;
-/**
- * Select field cell renderer.
- *
- * Two visual styles, controlled by `field.appearance` (renderer-level option,
- * not part of the `@objectstack/spec` field schema):
- *   - `'badge'` (default for spec compatibility): soft-pill colored badge.
- *   - `'dot'`: a small colored dot followed by the option label. Used by
- *     dense list/grid contexts to keep the table visually quiet — repeated
- *     filled badges across many rows create heavy visual noise.
- *
- * Metadata always wins: callers can pass `appearance: 'badge'` on the field
- * descriptor to force the legacy badge in any context.
- */
-export declare function SelectCellRenderer({ value, field }: CellRendererProps): React.ReactElement;
-/**
- * Email field cell renderer
- */
-export declare function EmailCellRenderer({ value }: CellRendererProps): React.ReactElement;
-/**
- * URL field cell renderer
- */
-export declare function UrlCellRenderer({ value }: CellRendererProps): React.ReactElement;
-/**
- * Phone field cell renderer
- */
-export declare function PhoneCellRenderer({ value }: CellRendererProps): React.ReactElement;
-/**
- * File field cell renderer
- */
-export declare function FileCellRenderer({ value, field }: CellRendererProps): React.ReactElement;
-/**
- * Image field cell renderer (with thumbnails)
- */
-export declare function ImageCellRenderer({ value }: CellRendererProps): React.ReactElement;
-/**
- * Lookup/Master-Detail field cell renderer.
- *
- * Display order:
- * 1. Embedded record object (`{ id, name, ... }` from `$expand`) → use its name
- * 2. Static `field.options[]` (e.g. when the lookup is a closed enum) → look up label
- * 3. Fetch-on-demand: when the value is a primitive ID and `field.reference_to`
- *    is known, resolve via dataSource and show the related record's display name.
- *    Falls back to a muted placeholder while pending and on failure.
- */
-export declare function LookupCellRenderer({ value, field }: CellRendererProps): React.ReactElement;
-/**
- * Formula field cell renderer (read-only)
- */
-export declare function FormulaCellRenderer({ value }: CellRendererProps): React.ReactElement;
-/**
- * User/Owner field cell renderer (with avatars)
- */
-export declare function UserCellRenderer({ value }: CellRendererProps): React.ReactElement;
-/**
- * Register a custom field renderer
- * @param type Field type (e.g. 'text', 'location', 'my-custom-type')
- * @param renderer React component to render the field
- */
-export declare function registerFieldRenderer(type: string, renderer: React.FC<CellRendererProps>): void;
-/**
- * Resolve the canonical cell-renderer key for a field. Accepts either a
- * raw type string (back-compat) or a field-metadata object so that
- * format hints (`format: 'phone'` etc.) can promote a plain `text`
- * field to its richer renderer counterpart.
- */
-export declare function resolveCellRendererType(fieldOrType: string | {
-    type?: string;
-    format?: string;
-} | null | undefined): string;
-/**
- * Get the appropriate cell renderer for a field type
- */
-export declare function getCellRenderer(fieldType: string): React.FC<CellRendererProps>;
-/**
- * Map field type to form component type
- *
- * @param fieldType - The ObjectQL field type identifier to convert
- * (for example: `"text"`, `"number"`, `"date"`, `"lookup"`).
- * @returns The normalized form field type string used in the form schema
- * (for example: `"input"`, `"textarea"`, `"date-picker"`, `"select"`).
- */
-export declare function mapFieldTypeToFormType(fieldType: string): string;
-/**
- * Formats file size in bytes to human-readable string
- * @param bytes - File size in bytes (must be non-negative)
- * @returns Formatted string (e.g., "5 MB", "1.5 GB")
- */
-export declare function formatFileSize(bytes: number): string;
-/**
- * Build validation rules from field metadata
- * @param field - Field metadata from ObjectStack
- * @returns Validation rule object compatible with react-hook-form
- */
-export declare function buildValidationRules(field: any): any;
-/**
- * Evaluate a conditional expression for field visibility
- * @param condition - Condition object from field metadata
- * @param formData - Current form values
- * @returns Whether the condition is met
- */
-export declare function evaluateCondition(condition: any, formData: any): boolean;
-/**
- * Register a specific field type lazily
- * @param fieldType - The field type to register (e.g., 'text', 'number')
- *
- * @example
- * // Register only the text field
- * registerField('text');
- */
-export declare function registerField(fieldType: string): void;
-/**
- * Register all field types (for backward compatibility)
- * This function auto-registers all field widgets on import.
- *
- * For better tree-shaking, use registerField() to register only needed fields.
- *
- * @example
- * // Register all fields at once
- * registerAllFields();
- */
-export declare function registerAllFields(): void;
-/**
- * Legacy function - kept for backward compatibility
- * @deprecated Use registerAllFields() instead
- */
-export declare function registerFields(): void;
-export * from './widgets/types';
-export * from './widgets/TextField';
-export * from './widgets/NumberField';
-export * from './widgets/BooleanField';
-export * from './widgets/SelectField';
-export * from './widgets/DateField';
-export * from './widgets/DateTimeField';
-export * from './widgets/TimeField';
-export * from './widgets/EmailField';
-export * from './widgets/PhoneField';
-export * from './widgets/UrlField';
-export * from './widgets/CurrencyField';
-export * from './widgets/PercentField';
-export * from './widgets/PasswordField';
-export * from './widgets/TextAreaField';
-export * from './widgets/RichTextField';
-export * from './widgets/LookupField';
-export * from './widgets/RecordPickerDialog';
-export * from './widgets/FileField';
-export * from './widgets/ImageField';
-export { ImageCropperDialog } from './widgets/ImageCropperDialog';
-export type { ImageCropperDialogProps } from './widgets/ImageCropperDialog';
-export * from './widgets/LocationField';
-export * from './widgets/FormulaField';
-export * from './widgets/SummaryField';
-export * from './widgets/AutoNumberField';
-export * from './widgets/UserField';
-export * from './widgets/ObjectField';
-export * from './widgets/VectorField';
-export * from './widgets/GridField';
-export * from './widgets/ColorField';
-export * from './widgets/SliderField';
-export * from './widgets/RatingField';
-export * from './widgets/CodeField';
-export * from './widgets/AvatarField';
-export * from './widgets/AddressField';
-export * from './widgets/GeolocationField';
-export * from './widgets/SignatureField';
-export * from './widgets/QRCodeField';
-export * from './widgets/MasterDetailField';

package/dist/packages/fields/src/record-picker-dialog.stories.d.ts

@@ -1,25 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { RecordPickerDialog } from './widgets/RecordPickerDialog';
-/**
- * **RecordPickerDialog** — Enterprise-grade record picker for lookup fields.
- *
- * Features: skeleton loading, sticky table header, column sort,
- * keyboard navigation, page jump, inline filter bar, column resize,
- * and responsive layout.
- */
-declare const meta: {
-    title: string;
-    component: typeof RecordPickerDialog;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof RecordPickerDialog>;
-/** Default single-select dialog with 4 columns, pagination, and search. */
-export declare const Default: Story;
-/** Multi-select mode with confirm/cancel footer. */
-export declare const MultiSelect: Story;
-/** With inline filter columns for interactive filtering. */
-export declare const WithFilters: Story;

package/dist/packages/fields/src/widgets/GridField.d.ts

@@ -1,7 +0,0 @@
-import { FieldWidgetProps } from './types';
-/**
- * GridField - Sub-table/grid data display
- * Shows tabular data in a simplified format
- * For full editing capabilities, use the grid plugin
- */
-export declare function GridField({ value, field, readonly, ...props }: FieldWidgetProps<any[]>): import("react/jsx-runtime").JSX.Element;