@genesislcap/foundation-react-utils 14.429.0 → 14.429.2-alpha-0d0a008.0

package/dist/custom-elements.json

@@ -24,7 +24,7 @@
             {
               "name": "options",
               "type": {
-                "text": "{\n    /**\n     * The custom element tag name to register. Must be unique and contain a hyphen.\n     * e.g. 'my-price-renderer'\n     */\n    name: string;\n    /**\n     * RankedTester from @jsonforms/core — determines when this renderer applies.\n     * Use rankWith(rank, tester) — rank 5+ recommended to override built-ins.\n     */\n    tester: RankedTester;\n    /**\n     * Custom mapper if you need to transform state differently.\n     * Defaults to mapStateToControlProps from @jsonforms/core.\n     */\n    mapper?: (state: JsonFormsState, ownProps: OwnPropsOfControl) => StatePropsOfControl;\n    /**\n     * Whether to wrap the React component in the platform's <control-wrapper>,\n     * which provides consistent label rendering, error display, and accessibility.\n     * Defaults to true. Set to false if your React component handles its own labels/errors.\n     *\n     * Note: if your component has layout conflicts with control-wrapper's internal flex styles\n     * (e.g. a block-level combobox that shrinks to content width), prefer keeping this true\n     * and overriding via the exposed CSS part instead:\n     *\n     *   control-wrapper::part(wrapper) { display: block; }\n     *\n     * This avoids losing built-in label/error/accessibility while still allowing external styling.\n     * The `part=\"wrapper\"` is exposed on the inner slot-hosting div of <control-wrapper>.\n     */\n    wrapWithControlWrapper?: boolean;\n  }"
+                "text": "{\n    /**\n     * The custom element tag name to register. Must be unique and contain a hyphen.\n     * e.g. 'my-price-renderer'\n     */\n    name: string;\n    /**\n     * RankedTester from @jsonforms/core — determines when this renderer applies.\n     * Use rankWith(rank, tester) — rank 5+ recommended to override built-ins.\n     */\n    tester: RankedTester;\n    /**\n     * Custom mapper if you need to transform state differently.\n     * Defaults to mapStateToControlProps from @jsonforms/core.\n     */\n    mapper?: (state: JsonFormsState, ownProps: OwnPropsOfControl) => StatePropsOfControl;\n    /**\n     * Whether to wrap the React component in the platform's control-wrapper template,\n     * which provides consistent label rendering, error display, and accessibility.\n     * Defaults to true. Set to false if your React component handles its own labels/errors.\n     *\n     * Note: if your component has layout conflicts with the wrapper's internal flex styles\n     * (e.g. a block-level combobox that shrinks to content width), you can target the\n     * wrapper's inner element directly in light DOM:\n     *\n     *   .foundation-control-wrapper { display: block; }\n     */\n    wrapWithControlWrapper?: boolean;\n  }"
               }
             }
           ],

package/dist/dts/create-react-renderer.d.ts

@@ -1,4 +1,4 @@
-import type { RendererControlProps, RendererEntry } from '@genesislcap/foundation-forms';
+import { type RendererControlProps, type RendererEntry } from '@genesislcap/foundation-forms';
 import { type JsonFormsState, type OwnPropsOfControl, type RankedTester, type StatePropsOfControl } from '@jsonforms/core';
 import type { ComponentType } from 'react';
 /**
@@ -66,18 +66,15 @@ export declare function createReactRenderer(Component: ComponentType<RendererCon
      */
     mapper?: (state: JsonFormsState, ownProps: OwnPropsOfControl) => StatePropsOfControl;
     /**
-     * Whether to wrap the React component in the platform's <control-wrapper>,
+     * Whether to wrap the React component in the platform's control-wrapper template,
      * which provides consistent label rendering, error display, and accessibility.
      * Defaults to true. Set to false if your React component handles its own labels/errors.
      *
-     * Note: if your component has layout conflicts with control-wrapper's internal flex styles
-     * (e.g. a block-level combobox that shrinks to content width), prefer keeping this true
-     * and overriding via the exposed CSS part instead:
+     * Note: if your component has layout conflicts with the wrapper's internal flex styles
+     * (e.g. a block-level combobox that shrinks to content width), you can target the
+     * wrapper's inner element directly in light DOM:
      *
-     *   control-wrapper::part(wrapper) { display: block; }
-     *
-     * This avoids losing built-in label/error/accessibility while still allowing external styling.
-     * The `part="wrapper"` is exposed on the inner slot-hosting div of <control-wrapper>.
+     *   .foundation-control-wrapper { display: block; }
      */
     wrapWithControlWrapper?: boolean;
 }): RendererEntry;

package/dist/dts/create-react-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-react-renderer.d.ts","sourceRoot":"","sources":["../../src/create-react-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEzF,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACzB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,aAAa,CAAC,oBAAoB,CAAC,EAC9C,OAAO,EAAE;IACP;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,KAAK,mBAAmB,CAAC;IACrF;;;;;;;;;;;;;OAaG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,GACA,aAAa,CAmDf"}
+{"version":3,"file":"create-react-renderer.d.ts","sourceRoot":"","sources":["../../src/create-react-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EACnB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACzB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,aAAa,CAAC,oBAAoB,CAAC,EAC9C,OAAO,EAAE;IACP;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,KAAK,mBAAmB,CAAC;IACrF;;;;;;;;;;OAUG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,GACA,aAAa,CAoDf"}

package/dist/esm/create-react-renderer.js

@@ -1,3 +1,4 @@
+import { controlWrapperTemplate, } from '@genesislcap/foundation-forms';
 import { html } from '@genesislcap/web-core';
 import { mapStateToControlProps, } from '@jsonforms/core';
 import r2wc from '@r2wc/react-to-web-component';
@@ -83,9 +84,10 @@ export function createReactRenderer(Component, options) {
     const template = useWrapper
         ? html `
         <template>
-          <control-wrapper :control=${(x) => x.control} :json-forms=${(x) => x.jsonforms}>
-            ${innerTemplate(name)}
-          </control-wrapper>
+          ${controlWrapperTemplate({
+            prefix: 'zero',
+            innerTemplate: innerTemplate(name),
+        })}
         </template>
       `
         : html `

package/dist/foundation-react-utils.d.ts

@@ -5,7 +5,7 @@ import { OwnPropsOfControl } from '@jsonforms/core';
 import { RankedTester } from '@jsonforms/core';
 import * as React_2 from 'react';
 import { RendererControlProps } from '@genesislcap/foundation-forms';
-import type { RendererEntry } from '@genesislcap/foundation-forms';
+import { RendererEntry } from '@genesislcap/foundation-forms';
 import { StatePropsOfControl } from '@jsonforms/core';
 
 /**
@@ -73,18 +73,15 @@ export declare function createReactRenderer(Component: ComponentType<RendererCon
      */
     mapper?: (state: JsonFormsState, ownProps: OwnPropsOfControl) => StatePropsOfControl;
     /**
-     * Whether to wrap the React component in the platform's <control-wrapper>,
+     * Whether to wrap the React component in the platform's control-wrapper template,
      * which provides consistent label rendering, error display, and accessibility.
      * Defaults to true. Set to false if your React component handles its own labels/errors.
      *
-     * Note: if your component has layout conflicts with control-wrapper's internal flex styles
-     * (e.g. a block-level combobox that shrinks to content width), prefer keeping this true
-     * and overriding via the exposed CSS part instead:
+     * Note: if your component has layout conflicts with the wrapper's internal flex styles
+     * (e.g. a block-level combobox that shrinks to content width), you can target the
+     * wrapper's inner element directly in light DOM:
      *
-     *   control-wrapper::part(wrapper) { display: block; }
-     *
-     * This avoids losing built-in label/error/accessibility while still allowing external styling.
-     * The `part="wrapper"` is exposed on the inner slot-hosting div of <control-wrapper>.
+     *   .foundation-control-wrapper { display: block; }
      */
     wrapWithControlWrapper?: boolean;
 }): RendererEntry;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-react-utils",
   "description": "Genesis Foundation React Utils",
-  "version": "14.429.0",
+  "version": "14.429.2-alpha-0d0a008.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -29,23 +29,23 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.429.0",
-    "@genesislcap/genx": "14.429.0",
-    "@genesislcap/rollup-builder": "14.429.0",
-    "@genesislcap/ts-builder": "14.429.0",
-    "@genesislcap/uvu-playwright-builder": "14.429.0",
-    "@genesislcap/vite-builder": "14.429.0",
-    "@genesislcap/webpack-builder": "14.429.0"
+    "@genesislcap/foundation-testing": "14.429.2-alpha-0d0a008.0",
+    "@genesislcap/genx": "14.429.2-alpha-0d0a008.0",
+    "@genesislcap/rollup-builder": "14.429.2-alpha-0d0a008.0",
+    "@genesislcap/ts-builder": "14.429.2-alpha-0d0a008.0",
+    "@genesislcap/uvu-playwright-builder": "14.429.2-alpha-0d0a008.0",
+    "@genesislcap/vite-builder": "14.429.2-alpha-0d0a008.0",
+    "@genesislcap/webpack-builder": "14.429.2-alpha-0d0a008.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-forms": "14.429.0",
-    "@genesislcap/foundation-layout": "14.429.0",
-    "@genesislcap/foundation-logger": "14.429.0",
-    "@genesislcap/web-core": "14.429.0",
+    "@genesislcap/foundation-forms": "14.429.2-alpha-0d0a008.0",
+    "@genesislcap/foundation-layout": "14.429.2-alpha-0d0a008.0",
+    "@genesislcap/foundation-logger": "14.429.2-alpha-0d0a008.0",
+    "@genesislcap/web-core": "14.429.2-alpha-0d0a008.0",
     "@jsonforms/core": "^3.2.1",
     "@r2wc/react-to-web-component": "^2.0.2"
   },
@@ -58,5 +58,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "3584bc77da10f9c2b4207d690ef088d2c8a12496"
+  "gitHead": "70bcfc8eced0a855333c57f9a5a18782ff49c7f5"
 }

package/src/create-react-renderer.ts

@@ -1,4 +1,8 @@
-import type { RendererControlProps, RendererEntry } from '@genesislcap/foundation-forms';
+import {
+  controlWrapperTemplate,
+  type RendererControlProps,
+  type RendererEntry,
+} from '@genesislcap/foundation-forms';
 import { html } from '@genesislcap/web-core';
 import {
   mapStateToControlProps,
@@ -77,18 +81,15 @@ export function createReactRenderer(
      */
     mapper?: (state: JsonFormsState, ownProps: OwnPropsOfControl) => StatePropsOfControl;
     /**
-     * Whether to wrap the React component in the platform's <control-wrapper>,
+     * Whether to wrap the React component in the platform's control-wrapper template,
      * which provides consistent label rendering, error display, and accessibility.
      * Defaults to true. Set to false if your React component handles its own labels/errors.
      *
-     * Note: if your component has layout conflicts with control-wrapper's internal flex styles
-     * (e.g. a block-level combobox that shrinks to content width), prefer keeping this true
-     * and overriding via the exposed CSS part instead:
-     *
-     *   control-wrapper::part(wrapper) { display: block; }
+     * Note: if your component has layout conflicts with the wrapper's internal flex styles
+     * (e.g. a block-level combobox that shrinks to content width), you can target the
+     * wrapper's inner element directly in light DOM:
      *
-     * This avoids losing built-in label/error/accessibility while still allowing external styling.
-     * The `part="wrapper"` is exposed on the inner slot-hosting div of <control-wrapper>.
+     *   .foundation-control-wrapper { display: block; }
      */
     wrapWithControlWrapper?: boolean;
   },
@@ -129,9 +130,10 @@ export function createReactRenderer(
   const template = useWrapper
     ? html`
         <template>
-          <control-wrapper :control=${(x: any) => x.control} :json-forms=${(x: any) => x.jsonforms}>
-            ${innerTemplate(name)}
-          </control-wrapper>
+          ${controlWrapperTemplate({
+            prefix: 'zero',
+            innerTemplate: innerTemplate(name) as any,
+          })}
         </template>
       `
     : html`