@genesislcap/foundation-forms 14.423.0 → 14.424.0-react-dom-rendering.1

package/dist/esm/jsonforms/renderers/VerticalCategorizationWrapperRenderer.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { attr, css, customElement, html, repeat, when, } from '@microsoft/fast-element';
-import { CategorizationWrapper, tabControlIconStyles } from './CategorizationWrapperRenderer';
+import { CategorizationWrapper } from './CategorizationWrapperRenderer';
 export const VerticalCategorizationWrapperRendererTemplate = (prefix = 'zero') => html `
   <template>
     <${prefix}-tabs class="tabs-container" orientation="vertical">
@@ -37,12 +37,12 @@ export const VerticalCategorizationWrapperRendererTemplate = (prefix = 'zero') =
   </template>
 `;
 const styles = css `
-  :host {
+  vertical-categorization-wrapper {
     display: block;
     height: var(--vertical-categorization-height, auto);
     overflow: hidden;
   }
-  .tabs-container::part(tablist) {
+  vertical-categorization-wrapper .tabs-container::part(tablist) {
     display: flex;
     flex-direction: column;
     height: auto;
@@ -55,11 +55,11 @@ const styles = css `
     padding: 0;
   }
 
-  .tabs-container .tab-control {
+  vertical-categorization-wrapper .tabs-container .tab-control {
     padding: 0 calc((8 + var(--design-unit) * 2 * var(--density)) * 1px);
   }
 
-  .tab-label {
+  vertical-categorization-wrapper .tab-label {
     display: flex;
     align-items: center;
     width: 100%;
@@ -68,20 +68,23 @@ const styles = css `
     border-radius: 0 3px 3px 0;
   }
 
-  .tab-control[aria-selected='true'] .tab-label {
+  vertical-categorization-wrapper .tab-control[aria-selected='true'] .tab-label {
     border-left-color: var(--accent-fill-rest);
     background: var(--neutral-fill-active);
   }
 
-  ${tabControlIconStyles}
+  vertical-categorization-wrapper .tab-control-icon {
+    margin-left: 3px;
+    color: #f9644d;
+  }
 
-  .tabs-container::part(tabpanel) {
+  vertical-categorization-wrapper .tabs-container::part(tabpanel) {
     border: none;
     overflow-y: auto;
     height: 100%;
   }
 
-  .tab-panel-control {
+  vertical-categorization-wrapper .tab-panel-control {
     border: none;
     padding-left: 16px;
   }
@@ -108,6 +111,7 @@ VerticalCategorizationWrapper = __decorate([
     customElement({
         name: 'vertical-categorization-wrapper',
         styles,
+        shadowOptions: null,
         template: html `
     ${(x) => VerticalCategorizationWrapperRendererTemplate(x.form.prefix)}
   `,

package/dist/esm/jsonforms/renderers/dispatch-renderer.js

@@ -94,6 +94,7 @@ DispatchRenderer = __decorate([
         name: 'dispatch-renderer',
         template: template,
         styles: styles,
+        shadowOptions: null,
     })
 ], DispatchRenderer);
 export { DispatchRenderer };

package/dist/foundation-forms.api.json

@@ -562,6 +562,62 @@
             "endIndex": 6
           }
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@genesislcap/foundation-forms!controlWrapperTemplate:function(1)",
+          "docComment": "/**\n * Light-DOM-friendly control wrapper that replaces the former `<control-wrapper>` custom element. Renders label, error/description slots, and composes a provided inner control template inline within the renderer's template so that bindings stay on the `DispatchRenderer` source.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "controlWrapperTemplate: (options: "
+            },
+            {
+              "kind": "Reference",
+              "text": "ControlWrapperOptions",
+              "canonicalReference": "@genesislcap/foundation-forms!~ControlWrapperOptions:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ") => "
+            },
+            {
+              "kind": "Reference",
+              "text": "ViewTemplate",
+              "canonicalReference": "@microsoft/fast-element!ViewTemplate:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "DispatchRenderer",
+              "canonicalReference": "@genesislcap/foundation-forms!~DispatchRenderer:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            }
+          ],
+          "fileUrlPath": "src/jsonforms/renderers/ControlWrapperRenderer.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 3,
+            "endIndex": 7
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "options",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "controlWrapperTemplate"
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@genesislcap/foundation-forms!CsvMappingResult:interface",
@@ -2617,6 +2673,62 @@
             "endIndex": 2
           }
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@genesislcap/foundation-forms!layoutWrapperTemplate:function(1)",
+          "docComment": "/**\n * Light-DOM-friendly layout wrapper that replaces the former `<layout-wrapper>` custom element. Renders the (optional) control label and, when the control is visible, composes the provided inner template inline so that bindings stay on the `DispatchRenderer` source.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "layoutWrapperTemplate: (options: "
+            },
+            {
+              "kind": "Reference",
+              "text": "LayoutWrapperOptions",
+              "canonicalReference": "@genesislcap/foundation-forms!~LayoutWrapperOptions:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ") => "
+            },
+            {
+              "kind": "Reference",
+              "text": "ViewTemplate",
+              "canonicalReference": "@microsoft/fast-element!ViewTemplate:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "DispatchRenderer",
+              "canonicalReference": "@genesislcap/foundation-forms!~DispatchRenderer:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            }
+          ],
+          "fileUrlPath": "src/jsonforms/renderers/LayoutRenderer.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 3,
+            "endIndex": 7
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "options",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "layoutWrapperTemplate"
+        },
         {
           "kind": "Function",
           "canonicalReference": "@genesislcap/foundation-forms!mapCsvToSchema:function(1)",
@@ -2907,7 +3019,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n    autocomplete?: string;\n    prefix?: string;\n    suffix?: string;\n    hideAffixFromScreenReader?: boolean;\n}"
+              "text": ";\n    autocomplete?: string;\n    prefix?: string;\n    suffix?: string;\n    hideAffixFromScreenReader?: boolean;\n    liveUpdate?: boolean;\n}"
             },
             {
               "kind": "Content",
@@ -3532,7 +3644,7 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    isPassword?: boolean;\n    textarea?: boolean;\n    autocomplete?: string;\n    textTransform?: 'none' | 'uppercase' | 'lowercase' | ((value: string) => string);\n    suffix?: string;\n    prefix?: string;\n    hideAffixFromScreenReader?: boolean;\n}"
+              "text": "{\n    isPassword?: boolean;\n    textarea?: boolean;\n    autocomplete?: string;\n    textTransform?: 'none' | 'uppercase' | 'lowercase' | ((value: string) => string);\n    suffix?: string;\n    prefix?: string;\n    hideAffixFromScreenReader?: boolean;\n    liveUpdate?: boolean;\n}"
             },
             {
               "kind": "Content",

package/dist/foundation-forms.d.ts

@@ -353,6 +353,39 @@ export declare type ConnectedRenderersOptions = {
     labelRowFormatter?: (any: any) => string;
 };
 
+declare interface ControlWrapperOptions {
+    /**
+     * Inner control template (e.g. a text-field, combobox, checkbox) to render inside
+     * the wrapper's `.foundation-control-wrapper` block. Must be authored against the
+     * `DispatchRenderer` source so its bindings resolve through the enclosing template.
+     */
+    innerTemplate: ViewTemplate<DispatchRenderer>;
+    /** Design system prefix forwarded to nested icon components (tooltip). */
+    prefix: string;
+    /** When true, the label is visually hidden but still announced to screen readers. */
+    hideLabel?: boolean;
+}
+
+/**
+ * Styles formerly scoped to the <control-wrapper> element. After the light-DOM
+ * refactor these are composed into `foundationFormStyles` so they reach every
+ * rendered control. Exported for consumers that render controls outside of
+ * `foundation-form` and need the same wrapper styling.
+ *
+ * @internal
+ */
+export declare const controlWrapperStyles: ElementStyles;
+
+/**
+ * Light-DOM-friendly control wrapper that replaces the former `<control-wrapper>`
+ * custom element. Renders label, error/description slots, and composes a provided
+ * inner control template inline within the renderer's template so that bindings
+ * stay on the `DispatchRenderer` source.
+ *
+ * @public
+ */
+export declare const controlWrapperTemplate: (options: ControlWrapperOptions) => ViewTemplate<DispatchRenderer>;
+
 /**
  * Creates a expressions/criteria from given payload
  * @internal
@@ -1330,15 +1363,7 @@ declare const Form_base: (new (...args: any[]) => {
     slot: string;
     readonly tagName: string;
     attachShadow(init: ShadowRootInit): ShadowRoot;
-    checkVisibility(options
-    /**
-    * Initializes the data with default empty items for bulk insert mode.
-    * @internal
-    */
-    ? /**
-    * Initializes the data with default empty items for bulk insert mode.
-    * @internal
-    */: CheckVisibilityOptions): boolean;
+    checkVisibility(options?: CheckVisibilityOptions): boolean;
     closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K];
     closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K];
     closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K];
@@ -1627,7 +1652,9 @@ declare const Form_base: (new (...args: any[]) => {
     nonce?: string;
     tabIndex: number;
     blur(): void;
-    focus(options?: FocusOptions): void;
+    focus(options? /**
+    * @internal
+    */: FocusOptions): void;
 }) & typeof FoundationElement;
 
 /** @internal */
@@ -1724,6 +1751,26 @@ export { Layout }
 
 export declare const LayoutVerticalCategorizationRendererEntry: any;
 
+declare interface LayoutWrapperOptions {
+    /**
+     * Inner template to render inside the wrapper. Must be authored against the
+     * `DispatchRenderer` source so bindings resolve through the enclosing template.
+     */
+    innerTemplate: ViewTemplate<DispatchRenderer>;
+    /** When true, suppresses the auto-rendered label above the inner content. */
+    hideLabel?: boolean;
+}
+
+/**
+ * Light-DOM-friendly layout wrapper that replaces the former `<layout-wrapper>`
+ * custom element. Renders the (optional) control label and, when the control is
+ * visible, composes the provided inner template inline so that bindings stay on
+ * the `DispatchRenderer` source.
+ *
+ * @public
+ */
+export declare const layoutWrapperTemplate: (options: LayoutWrapperOptions) => ViewTemplate<DispatchRenderer>;
+
 /** @internal */
 export declare const logger: Logger;
 
@@ -1878,6 +1925,12 @@ export declare type NumberRendererOptions = {
      * @public
      */
     hideAffixFromScreenReader?: boolean;
+    /**
+     * When true, the form data is updated on every input event (as the user types)
+     * rather than only on change/blur. Defaults to `false`.
+     * @public
+     */
+    liveUpdate?: boolean;
 };
 
 /**
@@ -2106,6 +2159,12 @@ export declare type StringRendererOptions = {
      * @public
      */
     hideAffixFromScreenReader?: boolean;
+    /**
+     * When true, the form data is updated on every input event (as the user types)
+     * rather than only on change/blur. Defaults to `false`.
+     * @public
+     */
+    liveUpdate?: boolean;
 };
 
 /**

package/dist/react.cjs

@@ -12,8 +12,6 @@ const { Form: FormWC } = require('./esm/form.js');
 const { JSONForms: JSONFormsWC } = require('./esm/jsonforms/json-forms.js');
 const { ArrayListWrapper: ArrayListWrapperWC } = require('./esm/jsonforms/renderers/ArrayListWrapperRenderer.js');
 const { CategorizationWrapper: CategorizationWrapperWC } = require('./esm/jsonforms/renderers/CategorizationWrapperRenderer.js');
-const { ControlWrapper: ControlWrapperWC } = require('./esm/jsonforms/renderers/ControlWrapperRenderer.js');
-const { LayoutWrapper: LayoutWrapperWC } = require('./esm/jsonforms/renderers/LayoutRenderer.js');
 const { StepperWrapper: StepperWrapperWC } = require('./esm/jsonforms/renderers/StepperWrapperRenderer.js');
 const { VerticalCategorizationWrapper: VerticalCategorizationWrapperWC } = require('./esm/jsonforms/renderers/VerticalCategorizationWrapperRenderer.js');
 const { DispatchRenderer: DispatchRendererWC } = require('./esm/jsonforms/renderers/dispatch-renderer.js');
@@ -49,10 +47,6 @@ const ArrayListWrapper = wrap(ArrayListWrapperWC);
 
 const CategorizationWrapper = wrap(CategorizationWrapperWC);
 
-const ControlWrapper = wrap(ControlWrapperWC);
-
-const LayoutWrapper = wrap(LayoutWrapperWC);
-
 const StepperWrapper = wrap(StepperWrapperWC);
 
 const VerticalCategorizationWrapper = wrap(VerticalCategorizationWrapperWC);
@@ -65,8 +59,6 @@ module.exports = {
   JSONForms,
   ArrayListWrapper,
   CategorizationWrapper,
-  ControlWrapper,
-  LayoutWrapper,
   StepperWrapper,
   VerticalCategorizationWrapper,
   DispatchRenderer,

package/dist/react.mjs

@@ -10,8 +10,6 @@ import { Form as FormWC } from './esm/form.js';
 import { JSONForms as JSONFormsWC } from './esm/jsonforms/json-forms.js';
 import { ArrayListWrapper as ArrayListWrapperWC } from './esm/jsonforms/renderers/ArrayListWrapperRenderer.js';
 import { CategorizationWrapper as CategorizationWrapperWC } from './esm/jsonforms/renderers/CategorizationWrapperRenderer.js';
-import { ControlWrapper as ControlWrapperWC } from './esm/jsonforms/renderers/ControlWrapperRenderer.js';
-import { LayoutWrapper as LayoutWrapperWC } from './esm/jsonforms/renderers/LayoutRenderer.js';
 import { StepperWrapper as StepperWrapperWC } from './esm/jsonforms/renderers/StepperWrapperRenderer.js';
 import { VerticalCategorizationWrapper as VerticalCategorizationWrapperWC } from './esm/jsonforms/renderers/VerticalCategorizationWrapperRenderer.js';
 import { DispatchRenderer as DispatchRendererWC } from './esm/jsonforms/renderers/dispatch-renderer.js';
@@ -47,10 +45,6 @@ export const ArrayListWrapper = wrap(ArrayListWrapperWC);
 
 export const CategorizationWrapper = wrap(CategorizationWrapperWC);
 
-export const ControlWrapper = wrap(ControlWrapperWC);
-
-export const LayoutWrapper = wrap(LayoutWrapperWC);
-
 export const StepperWrapper = wrap(StepperWrapperWC);
 
 export const VerticalCategorizationWrapper = wrap(VerticalCategorizationWrapperWC);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-forms",
   "description": "Genesis Foundation Forms",
-  "version": "14.423.0",
+  "version": "14.424.0-react-dom-rendering.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -55,23 +55,23 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.423.0",
-    "@genesislcap/genx": "14.423.0",
-    "@genesislcap/rollup-builder": "14.423.0",
-    "@genesislcap/ts-builder": "14.423.0",
-    "@genesislcap/uvu-playwright-builder": "14.423.0",
-    "@genesislcap/vite-builder": "14.423.0",
-    "@genesislcap/webpack-builder": "14.423.0",
+    "@genesislcap/foundation-testing": "14.424.0-react-dom-rendering.1",
+    "@genesislcap/genx": "14.424.0-react-dom-rendering.1",
+    "@genesislcap/rollup-builder": "14.424.0-react-dom-rendering.1",
+    "@genesislcap/ts-builder": "14.424.0-react-dom-rendering.1",
+    "@genesislcap/uvu-playwright-builder": "14.424.0-react-dom-rendering.1",
+    "@genesislcap/vite-builder": "14.424.0-react-dom-rendering.1",
+    "@genesislcap/webpack-builder": "14.424.0-react-dom-rendering.1",
     "@types/json-schema": "^7.0.11",
     "@types/papaparse": "^5.3.14"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.423.0",
-    "@genesislcap/foundation-criteria": "14.423.0",
-    "@genesislcap/foundation-logger": "14.423.0",
-    "@genesislcap/foundation-notifications": "14.423.0",
-    "@genesislcap/foundation-ui": "14.423.0",
-    "@genesislcap/foundation-utils": "14.423.0",
+    "@genesislcap/foundation-comms": "14.424.0-react-dom-rendering.1",
+    "@genesislcap/foundation-criteria": "14.424.0-react-dom-rendering.1",
+    "@genesislcap/foundation-logger": "14.424.0-react-dom-rendering.1",
+    "@genesislcap/foundation-notifications": "14.424.0-react-dom-rendering.1",
+    "@genesislcap/foundation-ui": "14.424.0-react-dom-rendering.1",
+    "@genesislcap/foundation-utils": "14.424.0-react-dom-rendering.1",
     "@json-schema-tools/dereferencer": "^1.6.1",
     "@jsonforms/core": "^3.2.1",
     "@microsoft/fast-components": "2.30.6",
@@ -96,5 +96,5 @@
   "peerDependencies": {
     "@microsoft/fast-react-wrapper": ">=0.3.0"
   },
-  "gitHead": "ed1a188a19674ed48b3805cc907304148f1daf14"
+  "gitHead": "473707e03212a5dfd5eb534b224cedef9d06a145"
 }