@object-ui/react 7.0.0 → 7.2.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @object-ui/react
 
+## 7.2.0
+
+### Patch Changes
+
+- Updated dependencies [8e7c1da]
+- Updated dependencies [d23db5c]
+  - @object-ui/i18n@7.2.0
+  - @object-ui/types@7.2.0
+  - @object-ui/core@7.2.0
+  - @object-ui/data-objectstack@7.2.0
+
+## 7.1.0
+
+### Minor Changes
+
+- a71be60: chore: drop the unrendered `blank` / `record_review` page types and their config
+
+  The `blank` and `record_review` page types have no renderer and were removed
+  from `@objectstack/spec`'s `PageTypeSchema` (framework#2265, enforce-or-remove).
+  This drops their now-dead references in objectui so the upstream spec can hard-
+  remove `BlankPageLayoutSchema` / `RecordReviewConfigSchema`:
+
+  - `PageType` union: removed `dashboard` / `form` / `record_detail` /
+    `record_review` / `overview` / `blank` (grid/gallery/kanban/calendar/timeline
+    remain — those are list _visualizations_, a separate cleanup).
+  - Removed `blankLayout` from `PageLayout` and the `blankLayout` / `recordReview`
+    handling in the spec→SDUI page bridge.
+  - Removed the redundant `BlankPageLayout{,Schema,Item,ItemSchema}` re-import from
+    `@objectstack/spec/ui` (it was never used).
+
+### Patch Changes
+
+- Updated dependencies [677f7ed]
+- Updated dependencies [08c47da]
+- Updated dependencies [a71be60]
+- Updated dependencies [cb03bc3]
+  - @object-ui/types@7.1.0
+  - @object-ui/core@7.1.0
+  - @object-ui/data-objectstack@7.1.0
+  - @object-ui/i18n@7.1.0
+
 ## 7.0.0
 
 ### Minor Changes

package/dist/SchemaRenderer.js

@@ -10,6 +10,7 @@ import React, { forwardRef, useContext, useMemo, useEffect, useReducer, useState
 import { ComponentRegistry, ExpressionEvaluator, isObjectUIError, ERROR_CODES, debugLog, debugTime, debugTimeEnd, DebugCollector, validateSchema, hasResponsiveStyles, scopeClassFor, compileScopedStyles, } from '@object-ui/core';
 import { SchemaRendererContext } from './context/SchemaRendererContext';
 import { usePredicateScope } from './hooks/useExpression';
+import { usePageVariables } from './hooks/usePageVariables';
 import { resolveI18nLabel } from './utils/i18n';
 /**
  * Dev-mode schema validation.
@@ -142,6 +143,11 @@ export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
     // ExpressionProvider. Threaded into `visible`/expression evaluation so
     // component predicates can gate on the signed-in user & deployment flags.
     const predicateScope = usePredicateScope();
+    // Page-local state (PageSchema.variables), provided by PageVariablesProvider.
+    // Exposed to predicates/bindings under `page.<var>` so an interactive element
+    // (e.g. element:record_picker) writing a variable can drive another
+    // component's `visible`/`visibility`. Empty object outside a Page.
+    const { variables: pageVariables } = usePageVariables();
     // Re-render trigger when the global ComponentRegistry mutates (e.g. a
     // lazy-loaded plugin finishes registering its components).
     const [, forceUpdate] = useReducer((n) => n + 1, 0);
@@ -164,11 +170,14 @@ export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
             return schema;
         // `data` (record/datasource) plus the ambient host scope. `current_user`
         // is aliased to `user` so both `user.email` and `current_user.email`
-        // resolve in component `visible`/`visibleOn` expressions.
+        // resolve in component `visible`/`visibleOn` expressions. `page` exposes
+        // page-local state so predicates can gate on `page.<var>` (e.g. a record
+        // picker's selection toggling another component's visibility).
         const evaluator = new ExpressionEvaluator({
             ...predicateScope,
             current_user: predicateScope?.user,
             data: dataSource,
+            page: pageVariables,
         });
         // Shallow copy
         const newSchema = { ...schema };
@@ -207,7 +216,7 @@ export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
             }
             newSchema.props = newProps;
         }
-        // Evaluate visibility: visible / visibleOn / hidden / hiddenOn
+        // Evaluate visibility: visible / visibleOn / visibility / hidden / hiddenOn
         const shouldHide = (() => {
             if (newSchema.visible !== undefined) {
                 return !evaluator.evaluateCondition(newSchema.visible);
@@ -215,6 +224,13 @@ export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
             if (newSchema.visibleOn !== undefined) {
                 return !evaluator.evaluateCondition(newSchema.visibleOn);
             }
+            // `visibility` is the spec-canonical predicate (PageComponentSchema.visibility,
+            // an ExpressionInput) — show-when-truthy, same semantics as `visibleOn`. The
+            // spec→node bridge preserves it verbatim on the node, so this is where it
+            // finally gates rendering (previously it was inert and leaked as a DOM prop).
+            if (newSchema.visibility !== undefined) {
+                return !evaluator.evaluateCondition(newSchema.visibility);
+            }
             if (newSchema.hidden !== undefined) {
                 return evaluator.evaluateCondition(newSchema.hidden);
             }
@@ -240,7 +256,7 @@ export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
             newSchema._disabled = true;
         }
         return newSchema;
-    }, [schema, dataSource, predicateScope]);
+    }, [schema, dataSource, predicateScope, pageVariables]);
     if (!evaluatedSchema)
         return null;
     // Handle visibility: if evaluated schema is hidden, render nothing
@@ -275,7 +291,7 @@ export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
     // Note: We don't forward the ref to the Component because components in the registry
     // may not support refs. The SchemaRenderer itself can still receive refs for its own use.
     // Extract schema metadata properties that should NOT be passed as React props
-    const { type: _type, children: _children, body: _body, schema: _schema, visible: _visible, visibleOn: _visibleOn, hidden: _hidden, hiddenOn: _hiddenOn, disabled: _disabled, disabledOn: _disabledOn, _hidden: __hidden, // stripped: internal visibility flag
+    const { type: _type, children: _children, body: _body, schema: _schema, visible: _visible, visibleOn: _visibleOn, visibility: _visibility, hidden: _hidden, hiddenOn: _hiddenOn, disabled: _disabled, disabledOn: _disabledOn, _hidden: __hidden, // stripped: internal visibility flag
     _disabled: __disabled, // stripped: internal disabled flag
     responsiveStyles: _responsiveStyles, // stripped: compiled to scoped CSS, not a DOM prop
     ...componentProps } = evaluatedSchema;

package/dist/hooks/index.d.ts

@@ -9,6 +9,7 @@ export * from './useExpression';
 export * from './useActionRunner';
 export * from './useNavigationOverlay';
 export * from './usePageVariables';
+export * from './usePageVariableActionBridge';
 export * from './useViewData';
 export * from './useDynamicApp';
 export * from './useDiscovery';

package/dist/hooks/index.js

@@ -9,6 +9,7 @@ export * from './useExpression';
 export * from './useActionRunner';
 export * from './useNavigationOverlay';
 export * from './usePageVariables';
+export * from './usePageVariableActionBridge';
 export * from './useViewData';
 export * from './useDynamicApp';
 export * from './useDiscovery';

package/dist/hooks/usePageVariableActionBridge.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+/**
+ * PageVariableActionBridge — publishes the live page-variable snapshot into the
+ * shared ActionRunner context as `pageVariables`, so a submit action (`api` /
+ * `script` / `flow`, or an `onClick` expression) can pull page-local form state
+ * into its request body via `{{page.<var>}}` token interpolation (resolved in
+ * app-shell's `useConsoleActionRuntime`).
+ *
+ * This is the data-entry counterpart to ObjectGrid publishing `selectedRecords`
+ * into the same context. Page variables live BELOW the ActionProvider — they're
+ * mounted by `PageVariablesProvider` inside the page layout renderer, whereas
+ * the action runtime is mounted above it — so the runtime can't read them
+ * directly. The bridge carries them up via `updateContext`.
+ *
+ * Mount it once inside a `PageVariablesProvider`. Outside an `ActionProvider`,
+ * `useAction()` falls back to a throwaway runner, so the bridge is a safe no-op
+ * (never throws in standalone / test contexts). Renders nothing.
+ */
+export declare function PageVariableActionBridge(): null;
+export declare namespace PageVariableActionBridge {
+    var displayName: string;
+}

package/dist/hooks/usePageVariableActionBridge.js

@@ -0,0 +1,39 @@
+/**
+ * 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 { usePageVariables } from './usePageVariables';
+import { useAction } from '../context';
+/**
+ * PageVariableActionBridge — publishes the live page-variable snapshot into the
+ * shared ActionRunner context as `pageVariables`, so a submit action (`api` /
+ * `script` / `flow`, or an `onClick` expression) can pull page-local form state
+ * into its request body via `{{page.<var>}}` token interpolation (resolved in
+ * app-shell's `useConsoleActionRuntime`).
+ *
+ * This is the data-entry counterpart to ObjectGrid publishing `selectedRecords`
+ * into the same context. Page variables live BELOW the ActionProvider — they're
+ * mounted by `PageVariablesProvider` inside the page layout renderer, whereas
+ * the action runtime is mounted above it — so the runtime can't read them
+ * directly. The bridge carries them up via `updateContext`.
+ *
+ * Mount it once inside a `PageVariablesProvider`. Outside an `ActionProvider`,
+ * `useAction()` falls back to a throwaway runner, so the bridge is a safe no-op
+ * (never throws in standalone / test contexts). Renders nothing.
+ */
+export function PageVariableActionBridge() {
+    const { variables } = usePageVariables();
+    const { updateContext } = useAction();
+    React.useEffect(() => {
+        updateContext({ pageVariables: variables });
+        return () => {
+            updateContext({ pageVariables: {} });
+        };
+    }, [variables, updateContext]);
+    return null;
+}
+PageVariableActionBridge.displayName = 'PageVariableActionBridge';

package/dist/hooks/usePageVariables.d.ts

@@ -14,6 +14,13 @@ import type { PageVariable } from '@object-ui/types';
 export interface PageVariablesContextValue {
     /** Current variable values */
     variables: Record<string, any>;
+    /**
+     * The variable definitions backing this provider. Exposed so writer
+     * elements can resolve which variable they feed via `PageVariable.source`
+     * (the component id that writes to the variable) — see
+     * {@link usePageVariableBinding}.
+     */
+    definitions: PageVariable[];
     /** Set a single variable value */
     setVariable: (name: string, value: any) => void;
     /** Set multiple variable values at once */
@@ -65,3 +72,36 @@ export declare function usePageVariables(): PageVariablesContextValue;
  * Hook to check if a PageVariablesProvider is available.
  */
 export declare function useHasPageVariables(): boolean;
+/**
+ * A writer binding for a page variable, resolved from a component id.
+ */
+export interface PageVariableBinding {
+    /** The bound variable's name */
+    name: string;
+    /** The bound variable's current value */
+    value: any;
+    /** Write a new value into the bound variable */
+    setValue: (value: any) => void;
+}
+/**
+ * Resolve the page variable that a given component writes to.
+ *
+ * Per `@objectstack/spec`'s `PageVariableSchema`, a variable's `source`
+ * names the **component id** that feeds it — e.g. a `variables` entry
+ * `{ name: 'selectedProjectId', source: 'project_picker' }` is written by the
+ * component whose `id` is `project_picker`. An interactive element (record
+ * picker, filter, …) calls this with its own `schema.id` and writes the
+ * user's selection through the returned `setValue`.
+ *
+ * Returns `null` when no variable targets the given component (or when called
+ * outside a {@link PageVariablesProvider}), so callers can treat themselves as
+ * uncontrolled in that case.
+ *
+ * @example
+ * ```tsx
+ * const binding = usePageVariableBinding(schema.id);
+ * // on selection:
+ * binding?.setValue(record.id);
+ * ```
+ */
+export declare function usePageVariableBinding(componentId?: string): PageVariableBinding | null;

package/dist/hooks/usePageVariables.js

@@ -71,7 +71,8 @@ export const PageVariablesProvider = ({ definitions, children, }) => {
     const resetVariables = useCallback(() => {
         setVariablesState(initializeVariables(definitions));
     }, [definitions]);
-    const value = useMemo(() => ({ variables, setVariable, setVariables, resetVariables }), [variables, setVariable, setVariables, resetVariables]);
+    const defs = useMemo(() => definitions ?? [], [definitions]);
+    const value = useMemo(() => ({ variables, definitions: defs, setVariable, setVariables, resetVariables }), [variables, defs, setVariable, setVariables, resetVariables]);
     return (_jsx(PageVariablesContext.Provider, { value: value, children: children }));
 };
 PageVariablesProvider.displayName = 'PageVariablesProvider';
@@ -94,6 +95,7 @@ export function usePageVariables() {
         // Graceful fallback — allows components to work outside a Page
         return {
             variables: {},
+            definitions: [],
             setVariable: () => { },
             setVariables: () => { },
             resetVariables: () => { },
@@ -107,3 +109,39 @@ export function usePageVariables() {
 export function useHasPageVariables() {
     return useContext(PageVariablesContext) !== null;
 }
+/**
+ * Resolve the page variable that a given component writes to.
+ *
+ * Per `@objectstack/spec`'s `PageVariableSchema`, a variable's `source`
+ * names the **component id** that feeds it — e.g. a `variables` entry
+ * `{ name: 'selectedProjectId', source: 'project_picker' }` is written by the
+ * component whose `id` is `project_picker`. An interactive element (record
+ * picker, filter, …) calls this with its own `schema.id` and writes the
+ * user's selection through the returned `setValue`.
+ *
+ * Returns `null` when no variable targets the given component (or when called
+ * outside a {@link PageVariablesProvider}), so callers can treat themselves as
+ * uncontrolled in that case.
+ *
+ * @example
+ * ```tsx
+ * const binding = usePageVariableBinding(schema.id);
+ * // on selection:
+ * binding?.setValue(record.id);
+ * ```
+ */
+export function usePageVariableBinding(componentId) {
+    const { variables, definitions, setVariable } = usePageVariables();
+    return useMemo(() => {
+        if (!componentId)
+            return null;
+        const def = definitions.find((d) => d.source === componentId);
+        if (!def)
+            return null;
+        return {
+            name: def.name,
+            value: variables[def.name],
+            setValue: (value) => setVariable(def.name, value),
+        };
+    }, [componentId, definitions, variables, setVariable]);
+}

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

@@ -30,13 +30,6 @@ interface PageVariable {
     defaultValue?: any;
     source?: string;
 }
-interface BlankPageLayoutItem {
-    componentId: string;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
 interface PageSpec {
     name?: string;
     label?: string;
@@ -47,13 +40,6 @@ interface PageSpec {
     regions?: PageRegion[];
     template?: string;
     object?: string;
-    blankLayout?: {
-        columns?: number;
-        rowHeight?: number;
-        gap?: number;
-        items?: BlankPageLayoutItem[];
-    };
-    recordReview?: any;
     isDefault?: boolean;
     assignedProfiles?: string[];
     interfaceConfig?: any;

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

@@ -72,12 +72,8 @@ export const bridgePage = (spec, _context) => {
         node.template = spec.template;
     if (spec.object)
         node.object = spec.object;
-    // P1.4 — Blank page layout
-    if (spec.blankLayout)
-        node.blankLayout = spec.blankLayout;
-    // P1.4 — Additional page properties
-    if (spec.recordReview)
-        node.recordReview = spec.recordReview;
+    // Additional page properties (blankLayout/recordReview dropped — their page
+    // types have no renderer and were removed from @objectstack/spec, framework#2265)
     if (spec.isDefault != null)
         node.isDefault = spec.isDefault;
     if (spec.assignedProfiles)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/react",
-  "version": "7.0.0",
+  "version": "7.2.0",
   "type": "module",
   "license": "MIT",
   "description": "React bindings and SchemaRenderer component for Object UI",
@@ -26,10 +26,10 @@
   "dependencies": {
     "@objectstack/spec": "^10.0.0",
     "react-hook-form": "^7.80.0",
-    "@object-ui/core": "7.0.0",
-    "@object-ui/data-objectstack": "7.0.0",
-    "@object-ui/i18n": "7.0.0",
-    "@object-ui/types": "7.0.0"
+    "@object-ui/core": "7.2.0",
+    "@object-ui/data-objectstack": "7.2.0",
+    "@object-ui/i18n": "7.2.0",
+    "@object-ui/types": "7.2.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",