@genesislcap/foundation-react-utils 14.427.2-alpha-e0ffaad.0 → 14.428.1-GENC-1247.1

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 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  }"
+                "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  }"
               }
             }
           ],

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

@@ -1,4 +1,4 @@
-import { type RendererControlProps, type RendererEntry } from '@genesislcap/foundation-forms';
+import type { RendererControlProps, RendererEntry } from '@genesislcap/foundation-forms';
 import { type JsonFormsState, type OwnPropsOfControl, type RankedTester, type StatePropsOfControl } from '@jsonforms/core';
 import type { ComponentType } from 'react';
 /**
@@ -66,15 +66,18 @@ 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 template,
+     * Whether to wrap the React component in the platform's <control-wrapper>,
      * 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 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:
+     * 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:
      *
-     *   .foundation-control-wrapper { display: block; }
+     *   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>.
      */
     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,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"}
+{"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"}

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

@@ -1,4 +1,3 @@
-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';
@@ -84,10 +83,9 @@ export function createReactRenderer(Component, options) {
     const template = useWrapper
         ? html `
         <template>
-          ${controlWrapperTemplate({
-            prefix: 'zero',
-            innerTemplate: innerTemplate(name),
-        })}
+          <control-wrapper :control=${(x) => x.control} :json-forms=${(x) => x.jsonforms}>
+            ${innerTemplate(name)}
+          </control-wrapper>
         </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 { RendererEntry } from '@genesislcap/foundation-forms';
+import type { RendererEntry } from '@genesislcap/foundation-forms';
 import { StatePropsOfControl } from '@jsonforms/core';
 
 /**
@@ -73,15 +73,18 @@ 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 template,
+     * Whether to wrap the React component in the platform's <control-wrapper>,
      * 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 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:
+     * 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:
      *
-     *   .foundation-control-wrapper { display: block; }
+     *   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>.
      */
     wrapWithControlWrapper?: boolean;
 }): RendererEntry;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-react-utils",
   "description": "Genesis Foundation React Utils",
-  "version": "14.427.2-alpha-e0ffaad.0",
+  "version": "14.428.1-GENC-1247.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -29,23 +29,23 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.427.2-alpha-e0ffaad.0",
-    "@genesislcap/genx": "14.427.2-alpha-e0ffaad.0",
-    "@genesislcap/rollup-builder": "14.427.2-alpha-e0ffaad.0",
-    "@genesislcap/ts-builder": "14.427.2-alpha-e0ffaad.0",
-    "@genesislcap/uvu-playwright-builder": "14.427.2-alpha-e0ffaad.0",
-    "@genesislcap/vite-builder": "14.427.2-alpha-e0ffaad.0",
-    "@genesislcap/webpack-builder": "14.427.2-alpha-e0ffaad.0"
+    "@genesislcap/foundation-testing": "14.428.1-GENC-1247.1",
+    "@genesislcap/genx": "14.428.1-GENC-1247.1",
+    "@genesislcap/rollup-builder": "14.428.1-GENC-1247.1",
+    "@genesislcap/ts-builder": "14.428.1-GENC-1247.1",
+    "@genesislcap/uvu-playwright-builder": "14.428.1-GENC-1247.1",
+    "@genesislcap/vite-builder": "14.428.1-GENC-1247.1",
+    "@genesislcap/webpack-builder": "14.428.1-GENC-1247.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-forms": "14.427.2-alpha-e0ffaad.0",
-    "@genesislcap/foundation-layout": "14.427.2-alpha-e0ffaad.0",
-    "@genesislcap/foundation-logger": "14.427.2-alpha-e0ffaad.0",
-    "@genesislcap/web-core": "14.427.2-alpha-e0ffaad.0",
+    "@genesislcap/foundation-forms": "14.428.1-GENC-1247.1",
+    "@genesislcap/foundation-layout": "14.428.1-GENC-1247.1",
+    "@genesislcap/foundation-logger": "14.428.1-GENC-1247.1",
+    "@genesislcap/web-core": "14.428.1-GENC-1247.1",
     "@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": "189e38590abb21df6ac6c641d58b758f5eba8eca"
+  "gitHead": "d2d211b558ad53c005906df9ff7be6969fa35b98"
 }

package/src/create-react-renderer.ts

@@ -1,8 +1,4 @@
-import {
-  controlWrapperTemplate,
-  type RendererControlProps,
-  type RendererEntry,
-} from '@genesislcap/foundation-forms';
+import type { RendererControlProps, RendererEntry } from '@genesislcap/foundation-forms';
 import { html } from '@genesislcap/web-core';
 import {
   mapStateToControlProps,
@@ -81,15 +77,18 @@ export function createReactRenderer(
      */
     mapper?: (state: JsonFormsState, ownProps: OwnPropsOfControl) => StatePropsOfControl;
     /**
-     * Whether to wrap the React component in the platform's control-wrapper template,
+     * Whether to wrap the React component in the platform's <control-wrapper>,
      * 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 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:
+     * 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; }
      *
-     *   .foundation-control-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>.
      */
     wrapWithControlWrapper?: boolean;
   },
@@ -130,10 +129,9 @@ export function createReactRenderer(
   const template = useWrapper
     ? html`
         <template>
-          ${controlWrapperTemplate({
-            prefix: 'zero',
-            innerTemplate: innerTemplate(name) as any,
-          })}
+          <control-wrapper :control=${(x: any) => x.control} :json-forms=${(x: any) => x.jsonforms}>
+            ${innerTemplate(name)}
+          </control-wrapper>
         </template>
       `
     : html`