@object-ui/react 11.4.0 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @object-ui/react
 
+## 13.1.0
+
+### Patch Changes
+
+- @object-ui/types@13.1.0
+- @object-ui/core@13.1.0
+- @object-ui/i18n@13.1.0
+- @object-ui/data-objectstack@13.1.0
+
+## 13.0.0
+
+### Patch Changes
+
+- Updated dependencies [9e38270]
+- Updated dependencies [619097e]
+  - @object-ui/i18n@13.0.0
+  - @object-ui/types@13.0.0
+  - @object-ui/core@13.0.0
+  - @object-ui/data-objectstack@13.0.0
+
+## 12.1.0
+
+### Patch Changes
+
+- Updated dependencies [6cbccf3]
+- Updated dependencies [e1840bf]
+- Updated dependencies [c31874d]
+  - @object-ui/i18n@12.1.0
+  - @object-ui/types@12.1.0
+  - @object-ui/core@12.1.0
+  - @object-ui/data-objectstack@12.1.0
+
+## 12.0.0
+
+### Patch Changes
+
+- Updated dependencies [226fde9]
+- Updated dependencies [e4de456]
+  - @object-ui/types@12.0.0
+  - @object-ui/core@12.0.0
+  - @object-ui/data-objectstack@12.0.0
+  - @object-ui/i18n@12.0.0
+
+## 11.5.0
+
+### Minor Changes
+
+- 6fffd3d: Client-side data-invalidation bus — refresh data, don't rebuild UI (objectui#2269 P1).
+
+  - `@object-ui/react` gains the bus: `notifyDataChanged({objectName, recordId?})`, `useDataInvalidation(objectName, recordId?)` (reader nonce), `subscribeDataChanges`, and `useMutationInvalidationBridge(dataSource)` which fans every dataSource write (`MutationEvent`) onto the bus. The bus also dispatches the legacy `objectui:related-changed` window event, so pre-bus listeners keep working.
+  - The `key={refreshKey}` remount of `RecordDetailView` (AppContent) and the `key={actionRefreshKey}` remount of `DetailView` (RecordDetailView) are GONE: record data now refetches in place via the bus — scroll, collapsed sections, tabs and in-progress inline edits survive every save/action/undo. All nine action-success bumps became precisely-scoped `notifyDataChanged` calls; undo/redo use the operation's own `objectName`/`recordId`.
+  - `RelatedCountStore` is wired to the bus (tab count badges refetch after any change to their object) and its `useSyncExternalStore` snapshot is now a monotonic version — previously it returned the same `Map` reference, so `emit()` never re-rendered subscribers and invalidations left badges stale; `useRelatedCountVersion()` is exported and drives the probe effect's re-fetch.
+  - app-shell also gains the reserved URL-param registry (`urlParams.ts` — `form`/`formObject`/`formLink`/`tab`/`recordId`/`palette`/`shortcuts` constants replace scattered string literals) and AGENTS.md Commandment #8 (UI-state classification: state that must survive a data refresh may never live only in an uncontrolled component).
+
+### Patch Changes
+
+- fae75e2: Fix two bugs verified still-present after #2254 claimed to resolve them (framework#2620 / framework#2616 Showcase UX pass, tracked in #2268):
+
+  - **Wizard/form `submitBehavior: 'thank-you'` allowed duplicate resubmission.** #2254 fixed the spec-bridge dropping `submitBehavior` before it reached the renderer, so the configured toast message started appearing — but `WizardForm`'s last step and `ObjectForm`'s submit handler only ever called `toast.success(...)` for `thank-you`/`next-record`; the form stayed mounted and fully filled with its submit button re-enabled once the request settled, so a second click created a second record. Both components now track a terminal `submitted` state and, when set, replace the form with a confirmation panel (using the behavior's `title`/`message`, which were also never read before) — mirroring the pattern `apps/console/src/components/FormPage.tsx` already used for its own standalone forms.
+
+  - **Command Center-style 3-up chart bands stayed collapsed to ~100-130px, and a dataset-bound chart's measure leaked its raw field name.**
+    - `responsiveStyles` (and `style`) were declared on the page-spec `PageComponent` bridge input type but never copied onto the `SchemaNode` in `spec-bridge/bridges/page.ts::mapComponent()` — so a page author's ADR-0065 layout override (e.g. forcing `display: 'grid'` on a `type: 'flex'` band) never reached `SchemaRenderer`, and the node silently fell back to its default flex layout. Both fields are now mapped through.
+    - `ObjectChart`'s dataset-bound fetch path (`schema.dataset` + `ds.queryDataset(...)`) discarded the response's `fields` array (which carries each measure's `label`, e.g. `{ name: 'task_count', label: 'Tasks' }`) before it ever reached `buildChartSeries()` — whose `fields` param already resolves this correctly (see `chart-series.test.ts`) — so the legend/tooltip always fell back to the raw field name. The fetched `fields` are now captured and threaded through.
+
+- Updated dependencies [544d8eb]
+- Updated dependencies [9255686]
+- Updated dependencies [1072701]
+  - @object-ui/i18n@11.5.0
+  - @object-ui/types@11.5.0
+  - @object-ui/data-objectstack@11.5.0
+  - @object-ui/core@11.5.0
+
 ## 11.4.0
 
 ### Patch Changes

package/dist/context/RelatedRecordActionsContext.d.ts

@@ -66,6 +66,15 @@ export interface RelatedRecordHandlers {
     rowActions?: RelatedRowActionDef[];
     /** Execute one of {@link rowActions} against a specific child row. */
     onRowAction?: (action: RelatedRowActionDef, record: unknown) => void | Promise<void>;
+    /**
+     * Child object list-level actions (`locations: ['list_toolbar']`),
+     * localized — rendered as header buttons on the related list (e.g.
+     * `invite_user` on an organization's Invitations list). Same bridge
+     * contract as {@link rowActions}, minus the row context.
+     */
+    toolbarActions?: RelatedRowActionDef[];
+    /** Execute one of {@link toolbarActions} (no row context). */
+    onToolbarAction?: (action: RelatedRowActionDef) => void | Promise<void>;
 }
 /** Input to {@link RelatedRecordActionsValue.resolve}. */
 export interface ResolveRelatedRecordActionsInput {

package/dist/data-invalidation.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+/** What changed. `objectName: '*'` means "unknown — treat everything as stale". */
+export interface DataChange {
+    objectName: string;
+    recordId?: string;
+}
+type DataChangeListener = (change: DataChange) => void;
+/** Legacy window event kept for pre-#2269 listeners (see RelatedList). */
+export declare const RELATED_CHANGED_EVENT = "objectui:related-changed";
+/**
+ * Declare that data changed. Call this from every WRITE path after the
+ * mutation succeeds; matching {@link useDataInvalidation} readers refetch.
+ */
+export declare function notifyDataChanged(change: DataChange): void;
+/** Subscribe to every change (unfiltered). Returns the unsubscribe function. */
+export declare function subscribeDataChanges(listener: DataChangeListener): () => void;
+/** True when `change` makes data for (objectName, recordId?) stale. */
+export declare function dataChangeMatches(change: DataChange, objectName: string, recordId?: string): boolean;
+/**
+ * Reader hook: returns a nonce that bumps whenever matching data changes.
+ * Put it in your fetch effect's dependency array — the refetch happens in
+ * place, no remount:
+ *
+ * ```ts
+ * const invalidationNonce = useDataInvalidation(objectName, recordId);
+ * useEffect(() => { void load(); }, [objectName, recordId, invalidationNonce]);
+ * ```
+ */
+export declare function useDataInvalidation(objectName?: string, recordId?: string): number;
+/**
+ * Bridge `DataSource.onMutation` (the automatic event every dataSource write
+ * already emits — see `MutationEvent` in `@object-ui/types`) onto this bus.
+ * Mount ONCE per app (the console does it in `AppContent`); after that, every
+ * create/update/delete performed through the dataSource reaches all
+ * {@link useDataInvalidation} readers with no manual `notifyDataChanged`
+ * call. Manual calls remain for writes that BYPASS the dataSource (server
+ * actions over raw HTTP, flow completions, approvals).
+ */
+export declare function useMutationInvalidationBridge(dataSource: unknown): void;
+export {};

package/dist/data-invalidation.js

@@ -0,0 +1,124 @@
+/**
+ * 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.
+ */
+/**
+ * data-invalidation — the client-side data invalidation bus (objectui#2269).
+ *
+ * "Refresh data, don't rebuild UI": after a write (create / update / delete /
+ * record action), the WRITER declares what changed — `notifyDataChanged({
+ * objectName, recordId? })` — and every mounted READER of that data refetches
+ * in place via {@link useDataInvalidation}. The component tree is never
+ * remounted for a data refresh, so UI state that lives in components (scroll,
+ * collapsed sections, in-progress inline edits) survives every save.
+ *
+ * This generalizes two pre-existing one-off mechanisms into one seam:
+ *   - the `objectui:related-changed` window event (RelatedList refetch) — the
+ *     bus still dispatches it for backward compatibility, and
+ *     `notifyRelatedChanged` in app-shell now delegates here;
+ *   - `RelatedCountStore.invalidate` (tab count badges) — wired to the bus by
+ *     `@object-ui/components`.
+ *
+ * It deliberately replaces the `key={refreshKey}`-style "bump a key to
+ * remount the subtree" pattern, which conflated data refresh with UI
+ * reconstruction (AGENTS.md Commandment #8).
+ *
+ * Scope semantics:
+ *   - `notifyDataChanged({ objectName })` — object-wide: lists, counts, and
+ *     every record of that object may be stale;
+ *   - `notifyDataChanged({ objectName, recordId })` — one record changed
+ *     (lists of that object are still refreshed — membership/ordering may
+ *     have changed);
+ *   - `notifyDataChanged({ objectName: '*' })` — everything (undo/redo of an
+ *     unknown operation).
+ */
+import { useEffect, useState } from 'react';
+const listeners = new Set();
+/** Legacy window event kept for pre-#2269 listeners (see RelatedList). */
+export const RELATED_CHANGED_EVENT = 'objectui:related-changed';
+/**
+ * Declare that data changed. Call this from every WRITE path after the
+ * mutation succeeds; matching {@link useDataInvalidation} readers refetch.
+ */
+export function notifyDataChanged(change) {
+    for (const l of Array.from(listeners)) {
+        try {
+            l(change);
+        }
+        catch {
+            // one bad listener must not starve the rest
+        }
+    }
+    // Backward-compat bridge: pre-bus consumers listen for this window event.
+    if (typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent(RELATED_CHANGED_EVENT, { detail: { objectName: change.objectName, recordId: change.recordId } }));
+    }
+}
+/** Subscribe to every change (unfiltered). Returns the unsubscribe function. */
+export function subscribeDataChanges(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+/** True when `change` makes data for (objectName, recordId?) stale. */
+export function dataChangeMatches(change, objectName, recordId) {
+    if (change.objectName === '*')
+        return true;
+    if (change.objectName !== objectName)
+        return false;
+    // An object-scoped change staled every record; a record-scoped change
+    // stales that record and the object's lists (a hook WITHOUT recordId is a
+    // list/aggregate reader — membership or ordering may have shifted).
+    if (recordId === undefined || change.recordId === undefined)
+        return true;
+    return change.recordId === recordId;
+}
+/**
+ * Reader hook: returns a nonce that bumps whenever matching data changes.
+ * Put it in your fetch effect's dependency array — the refetch happens in
+ * place, no remount:
+ *
+ * ```ts
+ * const invalidationNonce = useDataInvalidation(objectName, recordId);
+ * useEffect(() => { void load(); }, [objectName, recordId, invalidationNonce]);
+ * ```
+ */
+export function useDataInvalidation(objectName, recordId) {
+    const [nonce, setNonce] = useState(0);
+    useEffect(() => {
+        if (!objectName)
+            return;
+        return subscribeDataChanges((change) => {
+            if (dataChangeMatches(change, objectName, recordId)) {
+                setNonce((n) => n + 1);
+            }
+        });
+    }, [objectName, recordId]);
+    return nonce;
+}
+/**
+ * Bridge `DataSource.onMutation` (the automatic event every dataSource write
+ * already emits — see `MutationEvent` in `@object-ui/types`) onto this bus.
+ * Mount ONCE per app (the console does it in `AppContent`); after that, every
+ * create/update/delete performed through the dataSource reaches all
+ * {@link useDataInvalidation} readers with no manual `notifyDataChanged`
+ * call. Manual calls remain for writes that BYPASS the dataSource (server
+ * actions over raw HTTP, flow completions, approvals).
+ */
+export function useMutationInvalidationBridge(dataSource) {
+    useEffect(() => {
+        const ds = dataSource;
+        if (!ds?.onMutation)
+            return;
+        return ds.onMutation((e) => {
+            if (!e?.resource)
+                return;
+            notifyDataChanged({
+                objectName: e.resource,
+                recordId: e.id != null ? String(e.id) : undefined,
+            });
+        });
+    }, [dataSource]);
+}

package/dist/hooks/useExpression.d.ts

@@ -60,4 +60,6 @@ export declare function useExpression(expression: string | boolean | number | nu
  * const isVisible = useCondition('${data.status === "active"}', { data });
  * ```
  */
-export declare function useCondition(condition: string | boolean | undefined, context?: Record<string, any>): boolean;
+export declare function useCondition(condition: string | boolean | undefined, context?: Record<string, any>, options?: {
+    throwOnError?: boolean;
+}): boolean;

package/dist/hooks/useExpression.js

@@ -95,11 +95,23 @@ export function useExpression(expression, context = {}) {
  * const isVisible = useCondition('${data.status === "active"}', { data });
  * ```
  */
-export function useCondition(condition, context = {}) {
+export function useCondition(condition, context = {}, options) {
     const scope = usePredicateScope();
     // We evaluate directly without caching the evaluator to avoid issues with context changes
     return useMemo(() => {
         const evaluator = new ExpressionEvaluator({ ...scope, ...context });
+        if (options?.throwOnError) {
+            // Fail-closed: a predicate that can't be evaluated hides/disables
+            // rather than defaulting to visible — mirrors ActionEngine's
+            // getActionsForLocation contract, opted into by callers gating a
+            // real action rather than passive display content.
+            try {
+                return evaluator.evaluateCondition(condition, { throwOnError: true });
+            }
+            catch {
+                return false;
+            }
+        }
         return evaluator.evaluateCondition(condition);
-    }, [condition, context, scope]);
+    }, [condition, context, scope, options?.throwOnError]);
 }

package/dist/index.d.ts

@@ -11,5 +11,6 @@ export * from './context';
 export * from './components/form';
 export * from './LazyPluginLoader';
 export * from './spec-bridge';
+export * from './data-invalidation';
 export { resolveI18nLabel } from './utils/i18n';
 export { I18nProvider, useObjectTranslation, useObjectLabel, useSafeFieldLabel, useI18nContext, createI18n, getDirection, getAvailableLanguages, formatDate, formatDateTime, formatRelativeTime, formatCurrency, formatNumber, type I18nConfig, type I18nProviderProps, type TranslationKeys, type DateFormatOptions, type CurrencyFormatOptions, type NumberFormatOptions, } from '@object-ui/i18n';

package/dist/index.js

@@ -11,6 +11,7 @@ export * from './context'; // will be empty for now
 export * from './components/form';
 export * from './LazyPluginLoader';
 export * from './spec-bridge';
+export * from './data-invalidation';
 // i18n utilities
 export { resolveI18nLabel } from './utils/i18n';
 // Built-in i18n support

package/dist/spec-bridge/bridges/form-view.d.ts

@@ -38,6 +38,7 @@ interface FormViewSpec {
         ariaDescribedBy?: string;
         role?: string;
     };
+    submitBehavior?: any;
 }
 /** Transforms a FormView spec into a Form SchemaNode */
 export declare const bridgeFormView: BridgeFn<FormViewSpec>;

package/dist/spec-bridge/bridges/form-view.js

@@ -68,6 +68,8 @@ export const bridgeFormView = (spec, _context) => {
         node.groups = spec.groups;
     if (spec.defaultSort)
         node.defaultSort = spec.defaultSort;
+    if (spec.submitBehavior)
+        node.submitBehavior = spec.submitBehavior;
     // P1.6 — i18n & ARIA
     if (spec.sharing)
         node.sharing = spec.sharing;

package/dist/spec-bridge/bridges/page.d.ts

@@ -13,6 +13,7 @@ interface PageComponent {
     properties?: Record<string, any>;
     events?: Record<string, any>;
     style?: Record<string, any>;
+    responsiveStyles?: Record<string, any>;
     className?: string;
     visibility?: string;
     dataSource?: any;

package/dist/spec-bridge/bridges/page.js

@@ -14,6 +14,15 @@ function mapComponent(component) {
         node.label = component.label;
     if (component.className)
         node.className = component.className;
+    if (component.style)
+        node.style = component.style;
+    // ADR-0065 scoped per-breakpoint styles — declared on the page-spec
+    // component (sibling of className/style) but previously dropped here
+    // before reaching SchemaRenderer, so a layout override like
+    // `{ large: { display: 'grid', gridTemplateColumns: '...' } }` never
+    // compiled to CSS and the node fell back to its default layout.
+    if (component.responsiveStyles)
+        node.responsiveStyles = component.responsiveStyles;
     if (component.properties) {
         // Avoid overwriting the component dispatch keys (`type`/`id`) with inner
         // renderer-specific props. E.g. PageTabsProps.properties.type is the tab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/react",
-  "version": "11.4.0",
+  "version": "13.1.0",
   "type": "module",
   "license": "MIT",
   "description": "React bindings and SchemaRenderer component for Object UI",
@@ -24,12 +24,12 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^11.7.0",
-    "react-hook-form": "^7.80.0",
-    "@object-ui/core": "11.4.0",
-    "@object-ui/data-objectstack": "11.4.0",
-    "@object-ui/i18n": "11.4.0",
-    "@object-ui/types": "11.4.0"
+    "@objectstack/spec": "^13.0.0",
+    "react-hook-form": "^7.81.0",
+    "@object-ui/core": "13.1.0",
+    "@object-ui/data-objectstack": "13.1.0",
+    "@object-ui/i18n": "13.1.0",
+    "@object-ui/types": "13.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",