@genesislcap/foundation-forms 14.424.1 → 14.425.0

package/dist/react.cjs

@@ -5,7 +5,6 @@
 
 'use strict';
 
-const { provideReactWrapper } = require('@microsoft/fast-react-wrapper');
 const React = require('react');
 const { Filters: FiltersWC } = require('./esm/filters/filters.js');
 const { Form: FormWC } = require('./esm/form.js');
@@ -18,46 +17,143 @@ const { StepperWrapper: StepperWrapperWC } = require('./esm/jsonforms/renderers/
 const { VerticalCategorizationWrapper: VerticalCategorizationWrapperWC } = require('./esm/jsonforms/renderers/VerticalCategorizationWrapperRenderer.js');
 const { DispatchRenderer: DispatchRendererWC } = require('./esm/jsonforms/renderers/dispatch-renderer.js');
 
-const { wrap } = provideReactWrapper(React);
+function _mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') ref(value);
+      else if (ref != null) ref.current = value;
+    }
+  };
+}
 
-const Form = wrap(FormWC, {
-  events: {
-    onSubmitFailure: 'submit-failure',
-    onSubmitSuccess: 'submit-success',
-    onSubmitPartialSuccess: 'submit-partial-success',
-    onRowStatusChanged: 'row-status-changed',
-    onBulkSubmitComplete: 'bulk-submit-complete',
-    onRowSubmitFailure: 'row-submit-failure',
-    onRowSubmitSuccess: 'row-submit-success',
-    onDataChange: 'data-change',
-    onCsvParseError: 'csv-parse-error',
-    onCsvImported: 'csv-imported',
-    onCsvTemplateError: 'csv-template-error',
-    onCsvTemplateDownloaded: 'csv-template-downloaded',
-  },
+const Form = React.forwardRef(function Form(props, ref) {
+  const { onSubmitFailure, onSubmitSuccess, onSubmitPartialSuccess, onRowStatusChanged, onBulkSubmitComplete, onRowSubmitFailure, onRowSubmitSuccess, onDataChange, onCsvParseError, onCsvImported, onCsvTemplateError, onCsvTemplateDownloaded, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSubmitFailureRef = React.useRef(onSubmitFailure);
+  _onSubmitFailureRef.current = onSubmitFailure;
+  const _onSubmitSuccessRef = React.useRef(onSubmitSuccess);
+  _onSubmitSuccessRef.current = onSubmitSuccess;
+  const _onSubmitPartialSuccessRef = React.useRef(onSubmitPartialSuccess);
+  _onSubmitPartialSuccessRef.current = onSubmitPartialSuccess;
+  const _onRowStatusChangedRef = React.useRef(onRowStatusChanged);
+  _onRowStatusChangedRef.current = onRowStatusChanged;
+  const _onBulkSubmitCompleteRef = React.useRef(onBulkSubmitComplete);
+  _onBulkSubmitCompleteRef.current = onBulkSubmitComplete;
+  const _onRowSubmitFailureRef = React.useRef(onRowSubmitFailure);
+  _onRowSubmitFailureRef.current = onRowSubmitFailure;
+  const _onRowSubmitSuccessRef = React.useRef(onRowSubmitSuccess);
+  _onRowSubmitSuccessRef.current = onRowSubmitSuccess;
+  const _onDataChangeRef = React.useRef(onDataChange);
+  _onDataChangeRef.current = onDataChange;
+  const _onCsvParseErrorRef = React.useRef(onCsvParseError);
+  _onCsvParseErrorRef.current = onCsvParseError;
+  const _onCsvImportedRef = React.useRef(onCsvImported);
+  _onCsvImportedRef.current = onCsvImported;
+  const _onCsvTemplateErrorRef = React.useRef(onCsvTemplateError);
+  _onCsvTemplateErrorRef.current = onCsvTemplateError;
+  const _onCsvTemplateDownloadedRef = React.useRef(onCsvTemplateDownloaded);
+  _onCsvTemplateDownloadedRef.current = onCsvTemplateDownloaded;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSubmitFailureFn = (e) => _onSubmitFailureRef.current?.(e);
+    el.addEventListener('submit-failure', _onSubmitFailureFn);
+    const _onSubmitSuccessFn = (e) => _onSubmitSuccessRef.current?.(e);
+    el.addEventListener('submit-success', _onSubmitSuccessFn);
+    const _onSubmitPartialSuccessFn = (e) => _onSubmitPartialSuccessRef.current?.(e);
+    el.addEventListener('submit-partial-success', _onSubmitPartialSuccessFn);
+    const _onRowStatusChangedFn = (e) => _onRowStatusChangedRef.current?.(e);
+    el.addEventListener('row-status-changed', _onRowStatusChangedFn);
+    const _onBulkSubmitCompleteFn = (e) => _onBulkSubmitCompleteRef.current?.(e);
+    el.addEventListener('bulk-submit-complete', _onBulkSubmitCompleteFn);
+    const _onRowSubmitFailureFn = (e) => _onRowSubmitFailureRef.current?.(e);
+    el.addEventListener('row-submit-failure', _onRowSubmitFailureFn);
+    const _onRowSubmitSuccessFn = (e) => _onRowSubmitSuccessRef.current?.(e);
+    el.addEventListener('row-submit-success', _onRowSubmitSuccessFn);
+    const _onDataChangeFn = (e) => _onDataChangeRef.current?.(e);
+    el.addEventListener('data-change', _onDataChangeFn);
+    const _onCsvParseErrorFn = (e) => _onCsvParseErrorRef.current?.(e);
+    el.addEventListener('csv-parse-error', _onCsvParseErrorFn);
+    const _onCsvImportedFn = (e) => _onCsvImportedRef.current?.(e);
+    el.addEventListener('csv-imported', _onCsvImportedFn);
+    const _onCsvTemplateErrorFn = (e) => _onCsvTemplateErrorRef.current?.(e);
+    el.addEventListener('csv-template-error', _onCsvTemplateErrorFn);
+    const _onCsvTemplateDownloadedFn = (e) => _onCsvTemplateDownloadedRef.current?.(e);
+    el.addEventListener('csv-template-downloaded', _onCsvTemplateDownloadedFn);
+    return () => {
+      el.removeEventListener('submit-failure', _onSubmitFailureFn);
+      el.removeEventListener('submit-success', _onSubmitSuccessFn);
+      el.removeEventListener('submit-partial-success', _onSubmitPartialSuccessFn);
+      el.removeEventListener('row-status-changed', _onRowStatusChangedFn);
+      el.removeEventListener('bulk-submit-complete', _onBulkSubmitCompleteFn);
+      el.removeEventListener('row-submit-failure', _onRowSubmitFailureFn);
+      el.removeEventListener('row-submit-success', _onRowSubmitSuccessFn);
+      el.removeEventListener('data-change', _onDataChangeFn);
+      el.removeEventListener('csv-parse-error', _onCsvParseErrorFn);
+      el.removeEventListener('csv-imported', _onCsvImportedFn);
+      el.removeEventListener('csv-template-error', _onCsvTemplateErrorFn);
+      el.removeEventListener('csv-template-downloaded', _onCsvTemplateDownloadedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(FormWC) ?? 'foundation-form', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const Filters = wrap(FiltersWC);
+const Filters = React.forwardRef(function Filters(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(FiltersWC) ?? 'foundation-filters', { ...rest, ref }, children);
+});
 
-const JSONForms = wrap(JSONFormsWC, {
-  events: {
-    onDataChange: 'data-change',
-  },
+const JSONForms = React.forwardRef(function JSONForms(props, ref) {
+  const { onDataChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onDataChangeRef = React.useRef(onDataChange);
+  _onDataChangeRef.current = onDataChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onDataChangeFn = (e) => _onDataChangeRef.current?.(e);
+    el.addEventListener('data-change', _onDataChangeFn);
+    return () => {
+      el.removeEventListener('data-change', _onDataChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(JSONFormsWC) ?? 'json-forms', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const ArrayListWrapper = wrap(ArrayListWrapperWC);
+const ArrayListWrapper = React.forwardRef(function ArrayListWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ArrayListWrapperWC) ?? 'array-list-wrapper', { ...rest, ref }, children);
+});
 
-const CategorizationWrapper = wrap(CategorizationWrapperWC);
+const CategorizationWrapper = React.forwardRef(function CategorizationWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(CategorizationWrapperWC) ?? 'categorization-wrapper', { ...rest, ref }, children);
+});
 
-const ControlWrapper = wrap(ControlWrapperWC);
+const ControlWrapper = React.forwardRef(function ControlWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ControlWrapperWC) ?? 'control-wrapper', { ...rest, ref }, children);
+});
 
-const LayoutWrapper = wrap(LayoutWrapperWC);
+const LayoutWrapper = React.forwardRef(function LayoutWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(LayoutWrapperWC) ?? 'layout-wrapper', { ...rest, ref }, children);
+});
 
-const StepperWrapper = wrap(StepperWrapperWC);
+const StepperWrapper = React.forwardRef(function StepperWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(StepperWrapperWC) ?? 'stepper-wrapper', { ...rest, ref }, children);
+});
 
-const VerticalCategorizationWrapper = wrap(VerticalCategorizationWrapperWC);
+const VerticalCategorizationWrapper = React.forwardRef(function VerticalCategorizationWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(VerticalCategorizationWrapperWC) ?? 'vertical-categorization-wrapper', { ...rest, ref }, children);
+});
 
-const DispatchRenderer = wrap(DispatchRendererWC);
+const DispatchRenderer = React.forwardRef(function DispatchRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DispatchRendererWC) ?? 'dispatch-renderer', { ...rest, ref }, children);
+});
 
 module.exports = {
   Form,

package/dist/react.mjs

@@ -3,7 +3,6 @@
  * Generated from custom-elements manifest.
  */
 
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
 import React from 'react';
 import { Filters as FiltersWC } from './esm/filters/filters.js';
 import { Form as FormWC } from './esm/form.js';
@@ -16,43 +15,140 @@ import { StepperWrapper as StepperWrapperWC } from './esm/jsonforms/renderers/St
 import { VerticalCategorizationWrapper as VerticalCategorizationWrapperWC } from './esm/jsonforms/renderers/VerticalCategorizationWrapperRenderer.js';
 import { DispatchRenderer as DispatchRendererWC } from './esm/jsonforms/renderers/dispatch-renderer.js';
 
-const { wrap } = provideReactWrapper(React);
+function _mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') ref(value);
+      else if (ref != null) ref.current = value;
+    }
+  };
+}
 
-export const Form = wrap(FormWC, {
-  events: {
-    onSubmitFailure: 'submit-failure',
-    onSubmitSuccess: 'submit-success',
-    onSubmitPartialSuccess: 'submit-partial-success',
-    onRowStatusChanged: 'row-status-changed',
-    onBulkSubmitComplete: 'bulk-submit-complete',
-    onRowSubmitFailure: 'row-submit-failure',
-    onRowSubmitSuccess: 'row-submit-success',
-    onDataChange: 'data-change',
-    onCsvParseError: 'csv-parse-error',
-    onCsvImported: 'csv-imported',
-    onCsvTemplateError: 'csv-template-error',
-    onCsvTemplateDownloaded: 'csv-template-downloaded',
-  },
+export const Form = React.forwardRef(function Form(props, ref) {
+  const { onSubmitFailure, onSubmitSuccess, onSubmitPartialSuccess, onRowStatusChanged, onBulkSubmitComplete, onRowSubmitFailure, onRowSubmitSuccess, onDataChange, onCsvParseError, onCsvImported, onCsvTemplateError, onCsvTemplateDownloaded, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSubmitFailureRef = React.useRef(onSubmitFailure);
+  _onSubmitFailureRef.current = onSubmitFailure;
+  const _onSubmitSuccessRef = React.useRef(onSubmitSuccess);
+  _onSubmitSuccessRef.current = onSubmitSuccess;
+  const _onSubmitPartialSuccessRef = React.useRef(onSubmitPartialSuccess);
+  _onSubmitPartialSuccessRef.current = onSubmitPartialSuccess;
+  const _onRowStatusChangedRef = React.useRef(onRowStatusChanged);
+  _onRowStatusChangedRef.current = onRowStatusChanged;
+  const _onBulkSubmitCompleteRef = React.useRef(onBulkSubmitComplete);
+  _onBulkSubmitCompleteRef.current = onBulkSubmitComplete;
+  const _onRowSubmitFailureRef = React.useRef(onRowSubmitFailure);
+  _onRowSubmitFailureRef.current = onRowSubmitFailure;
+  const _onRowSubmitSuccessRef = React.useRef(onRowSubmitSuccess);
+  _onRowSubmitSuccessRef.current = onRowSubmitSuccess;
+  const _onDataChangeRef = React.useRef(onDataChange);
+  _onDataChangeRef.current = onDataChange;
+  const _onCsvParseErrorRef = React.useRef(onCsvParseError);
+  _onCsvParseErrorRef.current = onCsvParseError;
+  const _onCsvImportedRef = React.useRef(onCsvImported);
+  _onCsvImportedRef.current = onCsvImported;
+  const _onCsvTemplateErrorRef = React.useRef(onCsvTemplateError);
+  _onCsvTemplateErrorRef.current = onCsvTemplateError;
+  const _onCsvTemplateDownloadedRef = React.useRef(onCsvTemplateDownloaded);
+  _onCsvTemplateDownloadedRef.current = onCsvTemplateDownloaded;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSubmitFailureFn = (e) => _onSubmitFailureRef.current?.(e);
+    el.addEventListener('submit-failure', _onSubmitFailureFn);
+    const _onSubmitSuccessFn = (e) => _onSubmitSuccessRef.current?.(e);
+    el.addEventListener('submit-success', _onSubmitSuccessFn);
+    const _onSubmitPartialSuccessFn = (e) => _onSubmitPartialSuccessRef.current?.(e);
+    el.addEventListener('submit-partial-success', _onSubmitPartialSuccessFn);
+    const _onRowStatusChangedFn = (e) => _onRowStatusChangedRef.current?.(e);
+    el.addEventListener('row-status-changed', _onRowStatusChangedFn);
+    const _onBulkSubmitCompleteFn = (e) => _onBulkSubmitCompleteRef.current?.(e);
+    el.addEventListener('bulk-submit-complete', _onBulkSubmitCompleteFn);
+    const _onRowSubmitFailureFn = (e) => _onRowSubmitFailureRef.current?.(e);
+    el.addEventListener('row-submit-failure', _onRowSubmitFailureFn);
+    const _onRowSubmitSuccessFn = (e) => _onRowSubmitSuccessRef.current?.(e);
+    el.addEventListener('row-submit-success', _onRowSubmitSuccessFn);
+    const _onDataChangeFn = (e) => _onDataChangeRef.current?.(e);
+    el.addEventListener('data-change', _onDataChangeFn);
+    const _onCsvParseErrorFn = (e) => _onCsvParseErrorRef.current?.(e);
+    el.addEventListener('csv-parse-error', _onCsvParseErrorFn);
+    const _onCsvImportedFn = (e) => _onCsvImportedRef.current?.(e);
+    el.addEventListener('csv-imported', _onCsvImportedFn);
+    const _onCsvTemplateErrorFn = (e) => _onCsvTemplateErrorRef.current?.(e);
+    el.addEventListener('csv-template-error', _onCsvTemplateErrorFn);
+    const _onCsvTemplateDownloadedFn = (e) => _onCsvTemplateDownloadedRef.current?.(e);
+    el.addEventListener('csv-template-downloaded', _onCsvTemplateDownloadedFn);
+    return () => {
+      el.removeEventListener('submit-failure', _onSubmitFailureFn);
+      el.removeEventListener('submit-success', _onSubmitSuccessFn);
+      el.removeEventListener('submit-partial-success', _onSubmitPartialSuccessFn);
+      el.removeEventListener('row-status-changed', _onRowStatusChangedFn);
+      el.removeEventListener('bulk-submit-complete', _onBulkSubmitCompleteFn);
+      el.removeEventListener('row-submit-failure', _onRowSubmitFailureFn);
+      el.removeEventListener('row-submit-success', _onRowSubmitSuccessFn);
+      el.removeEventListener('data-change', _onDataChangeFn);
+      el.removeEventListener('csv-parse-error', _onCsvParseErrorFn);
+      el.removeEventListener('csv-imported', _onCsvImportedFn);
+      el.removeEventListener('csv-template-error', _onCsvTemplateErrorFn);
+      el.removeEventListener('csv-template-downloaded', _onCsvTemplateDownloadedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(FormWC) ?? 'foundation-form', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const Filters = wrap(FiltersWC);
+export const Filters = React.forwardRef(function Filters(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(FiltersWC) ?? 'foundation-filters', { ...rest, ref }, children);
+});
 
-export const JSONForms = wrap(JSONFormsWC, {
-  events: {
-    onDataChange: 'data-change',
-  },
+export const JSONForms = React.forwardRef(function JSONForms(props, ref) {
+  const { onDataChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onDataChangeRef = React.useRef(onDataChange);
+  _onDataChangeRef.current = onDataChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onDataChangeFn = (e) => _onDataChangeRef.current?.(e);
+    el.addEventListener('data-change', _onDataChangeFn);
+    return () => {
+      el.removeEventListener('data-change', _onDataChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(JSONFormsWC) ?? 'json-forms', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const ArrayListWrapper = wrap(ArrayListWrapperWC);
+export const ArrayListWrapper = React.forwardRef(function ArrayListWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ArrayListWrapperWC) ?? 'array-list-wrapper', { ...rest, ref }, children);
+});
 
-export const CategorizationWrapper = wrap(CategorizationWrapperWC);
+export const CategorizationWrapper = React.forwardRef(function CategorizationWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(CategorizationWrapperWC) ?? 'categorization-wrapper', { ...rest, ref }, children);
+});
 
-export const ControlWrapper = wrap(ControlWrapperWC);
+export const ControlWrapper = React.forwardRef(function ControlWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ControlWrapperWC) ?? 'control-wrapper', { ...rest, ref }, children);
+});
 
-export const LayoutWrapper = wrap(LayoutWrapperWC);
+export const LayoutWrapper = React.forwardRef(function LayoutWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(LayoutWrapperWC) ?? 'layout-wrapper', { ...rest, ref }, children);
+});
 
-export const StepperWrapper = wrap(StepperWrapperWC);
+export const StepperWrapper = React.forwardRef(function StepperWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(StepperWrapperWC) ?? 'stepper-wrapper', { ...rest, ref }, children);
+});
 
-export const VerticalCategorizationWrapper = wrap(VerticalCategorizationWrapperWC);
+export const VerticalCategorizationWrapper = React.forwardRef(function VerticalCategorizationWrapper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(VerticalCategorizationWrapperWC) ?? 'vertical-categorization-wrapper', { ...rest, ref }, children);
+});
 
-export const DispatchRenderer = wrap(DispatchRendererWC);
+export const DispatchRenderer = React.forwardRef(function DispatchRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DispatchRendererWC) ?? 'dispatch-renderer', { ...rest, ref }, children);
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-forms",
   "description": "Genesis Foundation Forms",
-  "version": "14.424.1",
+  "version": "14.425.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -55,23 +55,23 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.424.1",
-    "@genesislcap/genx": "14.424.1",
-    "@genesislcap/rollup-builder": "14.424.1",
-    "@genesislcap/ts-builder": "14.424.1",
-    "@genesislcap/uvu-playwright-builder": "14.424.1",
-    "@genesislcap/vite-builder": "14.424.1",
-    "@genesislcap/webpack-builder": "14.424.1",
+    "@genesislcap/foundation-testing": "14.425.0",
+    "@genesislcap/genx": "14.425.0",
+    "@genesislcap/rollup-builder": "14.425.0",
+    "@genesislcap/ts-builder": "14.425.0",
+    "@genesislcap/uvu-playwright-builder": "14.425.0",
+    "@genesislcap/vite-builder": "14.425.0",
+    "@genesislcap/webpack-builder": "14.425.0",
     "@types/json-schema": "^7.0.11",
     "@types/papaparse": "^5.3.14"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.424.1",
-    "@genesislcap/foundation-criteria": "14.424.1",
-    "@genesislcap/foundation-logger": "14.424.1",
-    "@genesislcap/foundation-notifications": "14.424.1",
-    "@genesislcap/foundation-ui": "14.424.1",
-    "@genesislcap/foundation-utils": "14.424.1",
+    "@genesislcap/foundation-comms": "14.425.0",
+    "@genesislcap/foundation-criteria": "14.425.0",
+    "@genesislcap/foundation-logger": "14.425.0",
+    "@genesislcap/foundation-notifications": "14.425.0",
+    "@genesislcap/foundation-ui": "14.425.0",
+    "@genesislcap/foundation-utils": "14.425.0",
     "@json-schema-tools/dereferencer": "^1.6.1",
     "@jsonforms/core": "^3.2.1",
     "@microsoft/fast-components": "2.30.6",
@@ -93,8 +93,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "peerDependencies": {
-    "@microsoft/fast-react-wrapper": ">=0.3.0"
-  },
-  "gitHead": "04bb18a6f0b26506a9d87ab252ce9e2329219a5e"
+  "gitHead": "c49bb94fbc3a74e84f18c7445398af116e1a58bb"
 }