@object-ui/fields 17.5.0 → 17.7.0

package/src/widgets/MarkdownContent.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import rehypeSanitize from 'rehype-sanitize';
-
-/**
- * Heavy markdown renderer, split into its own module so it can be lazy-loaded
- * by the cell/detail renderers (react-markdown pulls in ~100-200 KB). GitHub
- * Flavored Markdown + sanitization (defense against XSS in stored content).
- */
-export default function MarkdownContent({ value }: { value: string }) {
-  return (
-    <div className="prose prose-sm max-w-none dark:prose-invert break-words">
-      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeSanitize]}>
-        {value}
-      </ReactMarkdown>
-    </div>
-  );
-}

package/src/widgets/MasterDetailField.tsx

@@ -1,131 +0,0 @@
-import React from 'react';
-import { Button, Badge, cn } from '@object-ui/components';
-import { Plus, X, ExternalLink } from 'lucide-react';
-import { FieldWidgetComponentProps } from './types';
-
-/**
- * Master-Detail relationship data structure
- */
-export interface MasterDetailValue {
-  id: string;
-  label: string;
-  [key: string]: any;
-}
-
-/**
- * Master-Detail field widget - manages one-to-many relationships
- * Displays related records with add/remove capabilities
- */
-export function MasterDetailField({ 
-  value, 
-  onChange, 
-  field,
-  readonly,
-  className,
-  ...props 
-}: FieldWidgetComponentProps<MasterDetailValue[]>) {
-  const items = value || [];
-  const config = field;
-
-  const handleAdd = () => {
-    // This would typically open a dialog to select/create related records
-    // For now, we'll just show a placeholder
-    const newItem: MasterDetailValue = {
-      id: `new-${Date.now()}`,
-      label: 'New Related Record',
-    };
-    onChange([...items, newItem]);
-  };
-
-  const handleRemove = (id: string) => {
-    onChange(items.filter(item => item.id !== id));
-  };
-
-  const handleView = (item: MasterDetailValue) => {
-    // This would typically navigate to the detail view
-    console.log('View detail:', item);
-  };
-
-  if (readonly) {
-    return (
-      <div className={cn("space-y-2", className)}>
-        {items.length === 0 ? (
-          <span className="text-sm text-muted-foreground">No related records</span>
-        ) : (
-          items.map((item) => (
-            <div
-              key={item.id}
-              className="flex items-center justify-between p-2 border rounded hover:bg-muted/50"
-            >
-              <span className="text-sm">{item.label}</span>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => handleView(item)}
-              >
-                <ExternalLink className="w-4 h-4" />
-              </Button>
-            </div>
-          ))
-        )}
-        <p className="text-xs text-muted-foreground">
-          {items.length} {items.length === 1 ? 'record' : 'records'}
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn("space-y-3", className)}>
-      <div className="space-y-2">
-        {items.map((item) => (
-          <div
-            key={item.id}
-            className="flex items-center justify-between gap-2 p-2 border rounded hover:bg-muted/50"
-          >
-            <div className="flex items-center gap-2 flex-1">
-              <Badge variant="outline">{item.id}</Badge>
-              <span className="text-sm flex-1">{item.label}</span>
-            </div>
-            <div className="flex items-center gap-1">
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => handleView(item)}
-              >
-                <ExternalLink className="w-4 h-4" />
-              </Button>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => handleRemove(item.id)}
-                disabled={props.disabled}
-              >
-                <X className="w-4 h-4" />
-              </Button>
-            </div>
-          </div>
-        ))}
-        {items.length === 0 && (
-          <div className="text-sm text-muted-foreground text-center py-4 border border-dashed rounded bg-muted/20">
-            No related records
-          </div>
-        )}
-      </div>
-
-      <Button
-        type="button"
-        variant="outline"
-        className="w-full"
-        onClick={handleAdd}
-        disabled={props.disabled}
-      >
-        <Plus className="w-4 h-4 mr-2" />
-        Add {config?.label || 'Record'}
-      </Button>
-    </div>
-  );
-}

package/src/widgets/MultiSelectField.cascade.test.tsx

@@ -1,143 +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.
- */
-
-/**
- * Cascading / role-gated `multiselect` options (#2715) — parity with the single
- * `SelectField` (ADR-0058 / #2284).
- *
- * Exercises the observable widget behaviour: the dependency gate (a "select the
- * parent first" empty-state), and the cascade clear — but here per-element: a
- * selection dropped from the array when the offered set no longer includes it,
- * while still-valid selections are kept. The per-option filtering itself is
- * unit-tested in `@object-ui/core` (`optionRules.test.ts`); here we prove the
- * chip picker wires `dependentValues` + predicate scope into that resolver via
- * the shared `useCascadingOptions` hook.
- */
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { PredicateScopeProvider } from '@object-ui/react';
-import { MultiSelectField } from './MultiSelectField';
-
-const provinceField = {
-  name: 'province',
-  type: 'multiselect',
-  dependsOn: 'country',
-  options: [
-    { label: 'Zhejiang', value: 'zj', visibleWhen: "record.country == 'cn'" },
-    { label: 'California', value: 'ca', visibleWhen: "record.country == 'us'" },
-  ],
-} as any;
-
-beforeEach(() => {
-  vi.clearAllMocks();
-});
-
-describe('MultiSelectField — dependency gating (#2715)', () => {
-  it('gates with a "select parent first" hint while the controlling field is empty', () => {
-    render(
-      <MultiSelectField
-        value={[]}
-        onChange={vi.fn()}
-        field={provinceField}
-        {...({ name: 'province', dependentValues: {} } as any)}
-      />,
-    );
-    const gate = screen.getByTestId('multiselect-empty-province');
-    expect(gate).toHaveTextContent(/select country first/i);
-    // Gated → no chips offered.
-    expect(screen.queryAllByRole('button')).toHaveLength(0);
-  });
-
-  it('unlocks the chips once the controlling field is set', () => {
-    render(
-      <MultiSelectField
-        value={[]}
-        onChange={vi.fn()}
-        field={provinceField}
-        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
-      />,
-    );
-    expect(screen.queryByTestId('multiselect-empty-province')).not.toBeInTheDocument();
-    // Only the `cn` option is offered.
-    expect(screen.getByTestId('multiselect-option-zj')).toBeInTheDocument();
-    expect(screen.queryByTestId('multiselect-option-ca')).not.toBeInTheDocument();
-  });
-});
-
-describe('MultiSelectField — cascade clear (#2715)', () => {
-  it('drops only the selections the parent change no longer offers', () => {
-    const onChange = vi.fn();
-    render(
-      <MultiSelectField
-        value={['zj', 'ca']}
-        onChange={onChange}
-        field={provinceField}
-        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
-      />,
-    );
-    // 'ca' is a US province — under country=cn it is not offered, so it is
-    // pruned; the still-valid 'zj' is kept.
-    expect(onChange).toHaveBeenCalledWith(['zj']);
-  });
-
-  it('keeps selections that are all still offered', () => {
-    const onChange = vi.fn();
-    render(
-      <MultiSelectField
-        value={['zj']}
-        onChange={onChange}
-        field={provinceField}
-        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
-      />,
-    );
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});
-
-describe('MultiSelectField — role / context gating (#2715)', () => {
-  const tierField = {
-    name: 'tiers',
-    type: 'multiselect',
-    options: [
-      { label: 'Standard', value: 'standard' },
-      { label: 'Admin only', value: 'admin_only', visibleWhen: "'admin' in current_user.positions" },
-    ],
-  } as any;
-
-  it('prunes an admin-only value for a non-admin (offered set excludes it)', () => {
-    const onChange = vi.fn();
-    render(
-      <PredicateScopeProvider scope={{ current_user: { positions: ['sales'] } }}>
-        <MultiSelectField
-          value={['standard', 'admin_only']}
-          onChange={onChange}
-          field={tierField}
-          {...({ name: 'tiers', dependentValues: {} } as any)}
-        />
-      </PredicateScopeProvider>,
-    );
-    expect(onChange).toHaveBeenCalledWith(['standard']);
-  });
-
-  it('keeps an admin-only value for an admin', () => {
-    const onChange = vi.fn();
-    render(
-      <PredicateScopeProvider scope={{ current_user: { positions: ['admin'] } }}>
-        <MultiSelectField
-          value={['standard', 'admin_only']}
-          onChange={onChange}
-          field={tierField}
-          {...({ name: 'tiers', dependentValues: {} } as any)}
-        />
-      </PredicateScopeProvider>,
-    );
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});

package/src/widgets/MultiSelectField.tsx

@@ -1,196 +0,0 @@
-import React, { useEffect } from 'react';
-import { Badge, EmptyValue, cn } from '@object-ui/components';
-import type { OptionLike } from '@object-ui/core';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-import { toHostGroupProps } from './toHostGroupProps';
-import { OptionsEmptyState } from './OptionsEmptyState';
-import { useCascadingOptions } from './useCascadingOptions';
-
-interface Option extends OptionLike { color?: string }
-
-/**
- * MultiSelectField - select zero or more values from a fixed option set.
- *
- * Renders the configured options as toggleable chips. The stored value is a
- * string[] (the selected option values). Used for the `multiselect` field type
- * and for a `select` field declared `multiple: true`.
- *
- * Options support the same per-option `visibleWhen` cascading + `dependsOn`
- * gating as the single `SelectField` (ADR-0058 / #2715), resolved through the
- * shared {@link useCascadingOptions} hook: the offered chips narrow against the
- * live form record + `current_user`, the control is gated behind a "select the
- * parent first" hint while a dependency is empty, and selections no longer
- * offered (parent changed / predicate flipped) are dropped from the array.
- */
-export function MultiSelectField({
-  value,
-  onChange,
-  field,
-  readonly,
-  className,
-  dependentValues,
-  dependsOn: dependsOnProp,
-  emptyHint,
-  dataSource: _dataSource,
-  error,
-  ...props
-}: FieldWidgetComponentProps<string[]>) {
-  const config = field as any;
-  const rawOptions: Option[] = config?.options || [];
-  const selected: string[] = Array.isArray(value) ? value : value == null ? [] : [value as unknown as string];
-  const fieldName = props.name || config?.name || props.id || '';
-
-  const dependsOn = config?.dependsOn ?? dependsOnProp;
-  const { options, gated, dependsOnFields } = useCascadingOptions<Option>(
-    rawOptions,
-    dependsOn,
-    dependentValues,
-  );
-
-  // Cascade clear: drop selected values the offered set no longer includes
-  // (parent changed / predicate flipped), keeping the ones still valid — unlike
-  // the scalar case we prune per-element rather than clearing the whole field.
-  useEffect(() => {
-    if (readonly) return;
-    // An empty offered set has THREE very different causes, and only one of them
-    // is a decision to prune against. This is the canonical copy of the guards;
-    // the other three option widgets carry the same pair.
-    //
-    // 1. Nothing was ever CONFIGURED (objectui#4220) — a field authored with no
-    //    `options` at all. No decision was made anywhere, and the widget renders
-    //    its "unfillable" state below. Pruning here is not a cascade, it is
-    //    deleting the stored value of a field the user was only ever shown a
-    //    hint for — measured on the detail page's inline editor, which stages
-    //    that empty array into the record draft the moment the row enters edit
-    //    mode, and on the grid's inline cell editor, which has always taken this
-    //    path.
-    if (rawOptions.length === 0) return;
-    // 2. The list is GATED (objectui#4247) — an authored list withheld because a
-    //    declared `dependsOn` parent is still empty, so `resolveCascadingOptions`
-    //    returns nothing at all. Gated means UNKNOWN, not invalid: the widget has
-    //    no information about which stored values are valid, which is exactly
-    //    what the `OptionsEmptyState` below tells the user ("select Country
-    //    first"). Clearing here fired on MOUNT with no interaction — a record
-    //    that merely ARRIVES with the parent empty (a later-cleared parent, an
-    //    import, a partially-migrated row) had its picklist silently staged for
-    //    deletion. Read from the resolver's own `gated` flag rather than
-    //    re-derived from `options.length === 0`, which would collide with case 1.
-    if (gated) return;
-    // 3. The list RESOLVED and genuinely excludes the value — a real cascade
-    //    (the parent changed, a predicate flipped). That is the ADR-0058
-    //    contract and it still prunes, below.
-    if (selected.length === 0) return;
-    const stillOffered = selected.filter((v) => options.some((o) => o.value === v));
-    if (stillOffered.length !== selected.length) onChange(stillOffered);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options, gated]);
-
-  // The host's group label has to be consumed on EVERY surface this widget can
-  // render, not only the editable one (objectui#3990): both branches below
-  // return before the editable container's `groupDomProps` spread, which is how
-  // a field-level `readonly: true` and a zero-option list ended up with a
-  // published label id and no consumer at all. See `toHostGroupProps`.
-  const hostGroupProps = toHostGroupProps(props);
-
-  if (readonly) {
-    // A readonly set of values is still a set, so it takes the same `group`
-    // answer the editable chip row gives. `EmptyValue` is that surface with
-    // nothing in it: it publishes an `aria-label` ("No value") of its own, and
-    // `aria-labelledby` outranks that per accname — correctly, because on the
-    // `generic` role that placeholder span carries, an author name is prohibited
-    // and never exposed, so the real choice is the field's name or no name.
-    if (selected.length === 0) return <EmptyValue {...hostGroupProps} />;
-    return (
-      <div {...hostGroupProps} className="flex flex-wrap gap-1">
-        {selected.map((v) => {
-          // Label from the raw set so a stored value hidden by `visibleWhen`
-          // still renders its label rather than a bare id.
-          const opt = rawOptions.find((o) => o.value === v);
-          return <Badge key={v} variant="outline">{opt?.label || v}</Badge>;
-        })}
-      </div>
-    );
-  }
-
-  // No offered options is unfillable — surface a legible state instead of an
-  // empty chip row: the host's `emptyHint` when it computed one, else this
-  // widget's own translated copy. Shared with the single select / radio /
-  // checkboxes so the four cannot drift again (objectui#3231).
-  if (options.length === 0) {
-    return (
-      <OptionsEmptyState
-        emptyHint={emptyHint}
-        gated={gated}
-        dependsOnFields={dependsOnFields}
-        testId={fieldName ? `multiselect-empty-${fieldName}` : undefined}
-        className="min-h-9"
-        // This box IS the field in this state, so it is what the host label
-        // names (objectui#3990).
-        hostGroupProps={hostGroupProps}
-      />
-    );
-  }
-
-  const toggle = (v: string) => {
-    const next = selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v];
-    onChange(next);
-  };
-
-  // DOM pass-through (objectui#3318): the container carries the form
-  // renderer's id / aria-describedby, but NOT its `aria-invalid` — a plain
-  // wrapper div is not where assistive tech reads the invalid state. That
-  // state goes onto every focusable chip button below, computed from the
-  // published `error` slot (#3222), so whichever chip the user tabs to
-  // announces the failure. `name` is withheld too: it is only DOM-legal on
-  // form controls, and on this div it is exactly the leak #3291 sweeps for.
-  const {
-    'aria-invalid': _hostAriaInvalid,
-    name: _domName,
-    ...groupDomProps
-  } = toDomProps(props);
-  // When the host associated its visible label with this container by IDREF
-  // (`aria-labelledby`, objectui#3961 / #3975) the container IS the labelled
-  // group, so it answers with the matching role — without one, the name sits on
-  // a generic `div` and contributes nothing: `label for` pointing here was
-  // already inert (`HTMLLabelElement.control` is null for a div), which is the
-  // whole defect. Each chip keeps its own accessible name from its text content,
-  // which the group name does not override. Absent (standalone: the inline grid
-  // editor, a bare SDUI node) nothing is emitted and the markup is unchanged.
-  const isLabelledGroup = groupDomProps['aria-labelledby'] != null;
-
-  return (
-    <div
-      {...groupDomProps}
-      role={isLabelledGroup ? 'group' : undefined}
-      className={cn('flex flex-wrap gap-1.5', className)}
-      data-testid={fieldName ? `multiselect-${fieldName}` : undefined}
-    >
-      {options.map((opt) => {
-        // Multi-value fields store string arrays — stringify the (possibly
-        // numeric, #3090-widened) authored value at this boundary.
-        const value = String(opt.value);
-        const active = selected.includes(value);
-        return (
-          <button
-            type="button"
-            key={value}
-            onClick={() => toggle(value)}
-            disabled={props.disabled}
-            aria-pressed={active}
-            aria-invalid={!!error}
-            data-testid={`multiselect-option-${opt.value}`}
-            className={cn(
-              'rounded-full border px-3 py-1 text-sm transition-colors',
-              active
-                ? 'border-primary bg-primary text-primary-foreground'
-                : 'border-input bg-background text-foreground hover:bg-accent',
-            )}
-          >
-            {opt.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

package/src/widgets/NumberField.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { Input, EmptyValue } from '@object-ui/components';
-import { NumberFieldMetadata } from '@object-ui/types';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * NumberField - Numeric input with optional decimal precision
- * Supports min/max/step constraints and configurable decimal precision
- */
-export function NumberField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<number>) {
-  if (readonly) {
-    return value == null ? <EmptyValue /> : <span className="text-sm">{value}</span>;
-  }
-
-  const numberField = field as NumberFieldMetadata;
-  // Step follows `scale` (decimal places), not `precision` (total digit count):
-  // a decimal(10, 0) column has 0 decimal places, so the input should step by 1
-  // (`scale: 0` is a valid declaration — hence the typeof check, not truthiness).
-  // An explicit `step` in the metadata wins over the derived one.
-  const scale = numberField?.scale;
-  const step =
-    typeof numberField?.step === 'number'
-      ? numberField.step
-      : typeof scale === 'number'
-        ? Math.pow(10, -scale)
-        : 'any';
-
-  const domProps = toDomProps(props);
-
-  return (
-    <Input
-      {...domProps}
-      type="number"
-      value={value ?? ''}
-      onChange={(e) => {
-        const val = e.target.value;
-        onChange(val === '' ? (null as any) : Number(val));
-      }}
-      placeholder={numberField?.placeholder}
-      disabled={readonly || domProps.disabled}
-      // Surface the field's declared range so the browser's spinner/keyboard
-      // affordances respect it (server-side validation still owns enforcement).
-      min={typeof numberField?.min === 'number' ? numberField.min : undefined}
-      max={typeof numberField?.max === 'number' ? numberField.max : undefined}
-      step={step}
-    />
-  );
-}

package/src/widgets/ObjectField.tsx

@@ -1,94 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Textarea, cn, EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * ObjectField - JSON object editor
- * Allows editing structured JSON data
- */
-export function ObjectField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<any>) {
-  const config = field;
-  
-  // Initialize string state based on value
-  const getInitialJsonString = () => {
-    if (value === undefined || value === null) return '';
-    return JSON.stringify(value, null, 2);
-  };
-  
-  const [jsonString, setJsonString] = useState(getInitialJsonString);
-  // Named `parseError`, NOT `error`: `error` is the published validation slot
-  // on the widget contract (#3222) and is destructured above.
-  const [parseError, setParseError] = useState<string | null>(null);
-
-  // Sync internal string state when value changes externally
-  // This is a controlled component pattern where we need to sync external changes
-  useEffect(() => {
-    try {
-      if (value === undefined || value === null) {
-        // eslint-disable-next-line react-hooks/set-state-in-effect -- Required for controlled component sync
-        setJsonString('');
-        return;
-      }
-      // Only update if the parsed internal state doesn't match the new value
-      // This prevents cursor jumping/reformatting while typing valid JSON
-      const currentParsed = jsonString ? JSON.parse(jsonString) : null;
-      if (JSON.stringify(currentParsed) !== JSON.stringify(value)) {
-        // eslint-disable-next-line react-hooks/set-state-in-effect -- Required for controlled component sync
-        setJsonString(JSON.stringify(value, null, 2));
-      }
-    } catch {
-      // Fallback if internal state was invalid JSON
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- Required for controlled component sync
-      setJsonString(JSON.stringify(value, null, 2));
-    }
-  }, [value, jsonString]);
-
-  if (readonly) {
-    if (!value) return <EmptyValue />;
-    return (
-      <pre className={cn("text-xs bg-gray-50 p-2 rounded border border-gray-200 overflow-auto max-h-40", props.className)}>
-        {JSON.stringify(value, null, 2)}
-      </pre>
-    );
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const str = e.target.value;
-    setJsonString(str);
-    setParseError(null);
-
-    if (!str.trim()) {
-      onChange(null);
-      return;
-    }
-
-    try {
-      const parsed = JSON.parse(str);
-      onChange(parsed);
-    } catch (e) {
-      // Invalid JSON - don't propagate change to parent, but keep local state
-      setParseError("Invalid JSON");
-    }
-  };
-
-  return (
-    <div className="space-y-1">
-      <Textarea
-        // DOM pass-through onto the real focusable control (objectui#3318).
-        {...toDomProps(props)}
-        value={jsonString}
-        onChange={handleChange}
-        placeholder={config?.placeholder || '{\n  "key": "value"\n}'}
-        disabled={readonly || props.disabled}
-        className={cn("font-mono text-xs", parseError ? "border-red-500 focus-visible:ring-red-500" : "", props.className)}
-        rows={6}
-        // AFTER the spread so this widget's own computation wins (#3222).
-        // Invalid = the form's validation slot OR this widget's own unparsable
-        // draft (which already draws the red border above).
-        aria-invalid={!!error || !!parseError}
-      />
-      {parseError && <p className="text-xs text-red-500">{parseError}</p>}
-    </div>
-  );
-}