@object-ui/fields 17.2.0 → 17.3.0

package/src/widgets/OptionsEmptyState.tsx

@@ -0,0 +1,83 @@
+/**
+ * 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 React from 'react';
+import { cn } from '@object-ui/components';
+import { useFieldTranslation } from './useFieldTranslation';
+
+/**
+ * The "this option list cannot be filled" state shared by every fixed-option
+ * widget (`SelectField` single, `MultiSelectField`, `RadioField`,
+ * `CheckboxesField`) — objectui#3231.
+ *
+ * ## One producer, one consumer
+ *
+ * `emptyHint` is a declared prop on `FieldWidgetComponentProps`, computed by
+ * the form renderer (`form.tsx`, the `#2284` dependency gate) and forwarded to
+ * these widgets. **When the host supplies it, it wins**: the host resolves the
+ * controlling fields to their human LABELS ("Select Country first"), where a
+ * widget on its own only knows the raw metadata names ("Select country first").
+ * Absent a host hint — a standalone widget, the inline grid editor, an action
+ * param dialog — the widget falls back to its own copy.
+ *
+ * Each of the four widgets used to inline this box, destructure `emptyHint`
+ * into `_emptyHint` and throw it away, then render a hardcoded English literal.
+ * Four independent copies is precisely why they drifted together, so the box
+ * AND the copy live here only: adding a fifth option widget cannot re-introduce
+ * the gap without deliberately re-implementing it.
+ *
+ * ## Fallback copy is translated
+ *
+ * The fallback goes through `useFieldTranslation()` (`fields.options.*`,
+ * present in all ten locale packs) rather than an English string literal — the
+ * gate sentence is the SAME i18n key the form renderer uses, so the two can
+ * never say different things in the same locale.
+ */
+export interface OptionsEmptyStateProps {
+  /**
+   * Host-computed hint. Wins over the widget's own copy whenever it is a
+   * non-empty string — this is the whole point of the prop.
+   */
+  emptyHint?: string;
+  /** The list is waiting on a `dependsOn` controlling field (vs. unconfigured). */
+  gated: boolean;
+  /** Controlling field names, used by the fallback gate sentence. */
+  dependsOnFields: readonly string[];
+  /** Widget-specific stable locator, e.g. `select-empty-${fieldName}`. */
+  testId?: string;
+  /** Widget-specific sizing (the dropdown is a fixed `h-9`, lists grow). */
+  className?: string;
+}
+
+export function OptionsEmptyState({
+  emptyHint,
+  gated,
+  dependsOnFields,
+  testId,
+  className,
+}: OptionsEmptyStateProps) {
+  const { t } = useFieldTranslation();
+  // The host's hint when it computed one; otherwise this widget's own copy,
+  // translated. Never an English literal — that was the reported defect.
+  const hint =
+    emptyHint ||
+    (gated
+      ? t('fields.options.selectFirst', { fields: dependsOnFields.join(' / ') })
+      : t('fields.options.empty'));
+  return (
+    <div
+      data-testid={testId}
+      className={cn(
+        'flex w-full items-center rounded-md border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground',
+        className,
+      )}
+    >
+      {hint}
+    </div>
+  );
+}

package/src/widgets/PasswordField.tsx

@@ -3,6 +3,7 @@ import { Input } from '@object-ui/components';
 import { Button } from '@object-ui/components';
 import { Eye, EyeOff } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * PasswordField - Secure password input with visibility toggle
@@ -10,14 +11,13 @@ import { FieldWidgetComponentProps } from './types';
  */
 export function PasswordField({ value, onChange, field, readonly, className, ...props }: FieldWidgetComponentProps<string>) {
   const [showPassword, setShowPassword] = useState(false);
-  const config = field || (props as any).schema;
+  const config = field;
 
   if (readonly) {
     return <span className="text-sm">••••••••</span>;
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <div className="relative">

package/src/widgets/PeoplePicker.tsx

@@ -316,8 +316,14 @@ export function PeoplePicker({
   // returns the same records (StrictMode double-effect, refetch-on-focus)
   // re-emits a new array; resetting on identity alone yanked the cursor to -1
   // mid-navigation (flaky ArrowDown→Enter, and a real UX nit).
+  //
+  // The id separator is the escaped U+0000 spelling, not the byte itself
+  // (objectstack#5450): one raw NUL made this whole file binary to grep and
+  // ripgrep — a content search printed `binary file matches` and no line. The
+  // runtime value is unchanged, and it is the same separator the `cursorEpoch`
+  // key below already spelled this way.
   const recordsSignature = useMemo(
-    () => query.records.map(r => String(getPersonId(r, idField))).join(''),
+    () => query.records.map(r => String(getPersonId(r, idField))).join('\u0000'),
     [query.records, idField],
   );
   // The reset runs in the RENDER PHASE (the "adjusting state during render"

package/src/widgets/PercentField.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { Input, Slider, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * PercentField - Percentage input with configurable decimal precision
  * Stores values as decimals (0-1) and displays as percentages (0-100%)
  * Includes a slider for interactive control.
  */
-export function PercentField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetComponentProps<number>) {
-  const percentField = (field || (props as any).schema) as any;
+export function PercentField({ value, onChange, field, readonly, error, className, ...props }: FieldWidgetComponentProps<number>) {
+  const percentField = field as any;
   const precision = percentField?.precision ?? 2;
 
   // Convention detection. A field declaring `max > 1` (e.g. `max: 100`) stores
@@ -64,7 +65,7 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, c
     <div className="space-y-2">
       <div className="relative">
         <Input
-          {...props}
+          {...toDomProps(props)}
           type="number"
           value={displayValue}
           onChange={handleChange}
@@ -72,7 +73,7 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, c
           disabled={readonly || props.disabled}
           className={`pr-8 ${className || ''}`}
           step={Math.pow(10, -precision).toFixed(precision)}
-          aria-invalid={!!errorMessage}
+          aria-invalid={!!error}
         />
         <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">
           %

package/src/widgets/PhoneField.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * PhoneField - Telephone number input with tel link in readonly mode
  * Renders as a clickable tel link when readonly, standard phone input otherwise
  */
-export function PhoneField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetComponentProps<string>) {
-  const config = field || (props as any).schema;
+export function PhoneField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
+  const config = field;
   if (readonly) {
     if (!value) return <EmptyValue />;
     return (
@@ -20,8 +21,7 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
     );
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <Input
@@ -31,7 +31,7 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || '(555) 123-4567'}
       disabled={readonly || domProps.disabled}
-      aria-invalid={!!errorMessage}
+      aria-invalid={!!error}
     />
   );
 }

package/src/widgets/QRCodeField.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 import { Input, Button, EmptyValue } from '@object-ui/components';
 import { QrCode, Copy } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * QR Code field widget - generates QR codes from text
  * Uses a simple SVG-based QR code generator
  */
-export function QRCodeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
+export function QRCodeField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
   const [showQR, setShowQR] = React.useState(false);
-  const config = field || (props as any).schema;
+  const config = field;
 
   // Simple QR code generation using an external library would be ideal
   // For now, we'll use a service API approach or placeholder
@@ -47,12 +48,18 @@ export function QRCodeField({ value, onChange, field, readonly, ...props }: Fiel
     <div className="space-y-3">
       <div className="flex items-center gap-2">
         <Input
+          // DOM pass-through onto the real focusable control (objectui#3318).
+          {...toDomProps(props)}
           type="text"
           value={value || ''}
           onChange={(e) => onChange(e.target.value)}
           placeholder={config?.placeholder || 'Enter text for QR code'}
           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}
         />
         {value && (
           <>

package/src/widgets/RadioField.tsx

@@ -2,6 +2,8 @@ import React, { useId, useEffect } from 'react';
 import { RadioGroup, RadioGroupItem, Label, EmptyValue } from '@object-ui/components';
 import { isValueStillOffered, type OptionLike } from '@object-ui/core';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
+import { OptionsEmptyState } from './OptionsEmptyState';
 import { useCascadingOptions } from './useCascadingOptions';
 
 type Option = OptionLike;
@@ -24,14 +26,14 @@ export function RadioField({
   field,
   readonly,
   className,
-  schema,
   dependentValues,
   dependsOn: dependsOnProp,
-  emptyHint: _emptyHint,
+  emptyHint,
   dataSource: _dataSource,
+  error,
   ...props
 }: FieldWidgetComponentProps<string>) {
-  const config = (field || schema) as any;
+  const config = field as any;
   const rawOptions: Option[] = config?.options || [];
   const groupId = useId();
   const fieldName = props.name || config?.name || props.id || '';
@@ -61,28 +63,36 @@ export function RadioField({
   }
 
   // No offered options is unfillable — surface a legible state instead of an
-  // empty radio group: a dependency-gated list prompts for its controlling
-  // field; an unconfigured / fully-filtered list says so. Mirrors the select.
+  // empty radio group: the host's `emptyHint` when it computed one, else this
+  // widget's own translated copy. Shared with the select / multiselect /
+  // checkboxes so the four cannot drift again (objectui#3231).
   if (options.length === 0) {
-    const hint = gated
-      ? `Select ${dependsOnFields.join(' / ')} first`
-      : 'No options available';
     return (
-      <div
-        data-testid={fieldName ? `radio-empty-${fieldName}` : undefined}
-        className="flex min-h-9 w-full items-center rounded-md border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground"
-      >
-        {hint}
-      </div>
+      <OptionsEmptyState
+        emptyHint={emptyHint}
+        gated={gated}
+        dependsOnFields={dependsOnFields}
+        testId={fieldName ? `radio-empty-${fieldName}` : undefined}
+        className="min-h-9"
+      />
     );
   }
 
   return (
+    // DOM pass-through onto the radiogroup (objectui#3318). Unlike Radix
+    // `Select.Root` (#3306) this Root IS a real DOM element — a
+    // `<div role="radiogroup">` — and `radiogroup` is exactly the role
+    // WAI-ARIA designates to carry `aria-invalid` for a set of radios
+    // (`radio` itself does not support it): the group's state is announced
+    // when focus lands on any radio inside it.
     <RadioGroup
+      {...toDomProps(props)}
       value={value ?? ''}
       onValueChange={onChange}
       disabled={props.disabled}
       className={className}
+      // AFTER the spread so this widget's own computation wins (#3222).
+      aria-invalid={!!error}
     >
       {options.map((opt) => {
         // Radix speaks strings — stringify the (possibly numeric,

package/src/widgets/RatingField.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 import { Star } from 'lucide-react';
 import { cn } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Rating field widget - provides a star rating input
  * Supports numeric values from 0 to max (default 5)
  */
-export function RatingField({ value, onChange, field, readonly, className, ...props }: FieldWidgetComponentProps<number>) {
+export function RatingField({ value, onChange, field, readonly, className, error, ...props }: FieldWidgetComponentProps<number>) {
   // Get rating-specific configuration from field metadata
-  const ratingField = (field || (props as any).schema) as any;
+  const ratingField = field as any;
   const max = ratingField?.max ?? 5;
   const currentValue = value ?? 0;
 
@@ -37,8 +38,21 @@ export function RatingField({ value, onChange, field, readonly, className, ...pr
     );
   }
 
+  // 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 star button below, computed from the
+  // published `error` slot (#3222). `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);
+
   return (
-    <div className={cn("flex items-center gap-1", className)}>
+    <div {...groupDomProps} className={cn("flex items-center gap-1", className)}>
       {Array.from({ length: max }, (_, i) => (
         <button
           key={i}
@@ -48,6 +62,7 @@ export function RatingField({ value, onChange, field, readonly, className, ...pr
           onMouseLeave={() => setHoverValue(null)}
           className="focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded"
           disabled={readonly || props.disabled}
+          aria-invalid={!!error}
         >
           <Star
             className={`w-5 h-5 transition-colors ${

package/src/widgets/RecipientPickerField.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Combobox, EmptyValue, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
 import type { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { useFieldTranslation } from './useFieldTranslation';
 
 /**
@@ -53,6 +54,7 @@ export function RecipientPickerField({
   onChange,
   readonly,
   className,
+  error,
   ...props
 }: FieldWidgetComponentProps<string>) {
   const ctx = React.useContext(SchemaRendererContext);
@@ -133,6 +135,8 @@ export function RecipientPickerField({
     // field is never un-editable.
     return (
       <input
+        // DOM pass-through onto the real focusable control (objectui#3318).
+        {...toDomProps(props)}
         className={cn(
           'w-full rounded border bg-background px-2 py-1 text-sm',
           className,
@@ -140,6 +144,7 @@ export function RecipientPickerField({
         value={value ?? ''}
         disabled={disabled || readonly}
         onChange={(e) => onChange(e.target.value as any)}
+        aria-invalid={!!error}
       />
     );
   }
@@ -149,8 +154,19 @@ export function RecipientPickerField({
     return <span className={className}>{options.find((o) => o.value === value)?.label ?? value}</span>;
   }
 
+  // DOM pass-through onto the combobox trigger — the widget's real focusable
+  // control (objectui#3318). `name` is withheld: the trigger is a button, not
+  // a submission control (same reasoning as #3306's SelectTrigger).
+  //
+  // NOTE this widget stays on the #3318 ledger regardless: its dependency-
+  // gated state (no `recipient_type` chosen yet — the state a fresh form and
+  // the registry sweep render) is a plain hint paragraph with no focusable
+  // control, so there is nothing there to carry the attribute.
+  const { name: _domName, ...triggerDomProps } = toDomProps(props);
+
   return (
     <Combobox
+      {...triggerDomProps}
       options={options}
       value={value ?? ''}
       onValueChange={(v) => onChange(v as any)}
@@ -163,6 +179,8 @@ export function RecipientPickerField({
       emptyText={records === null ? t('fields.recipient.loading') : t('fields.recipient.empty')}
       disabled={disabled}
       className={cn('w-full', className)}
+      // AFTER the spread so this widget's own computation wins (#3222).
+      aria-invalid={!!error}
     />
   );
 }