npm - @k-int/stripes-kint-components - Versions diffs - 5.8.1 → 5.8.3 - Mend

@k-int/stripes-kint-components 5.8.1 → 5.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,17 @@
+## [5.8.3](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.8.2...v5.8.3) (2024-10-23)
+### Bug Fixes
+* ERM-3391--NumberField doesnt update display value from form state changes ([cb44d06](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/cb44d063aed221cb544204b8b5d9df6dc313e9c2))
+## [5.8.2](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.8.1...v5.8.2) (2024-09-11)
+### Bug Fixes
+* NumberField blur ([54ed21f](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/54ed21f60e89ec2035ea2b42c1f9b158c657c0be))
 ## [5.8.1](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.8.0...v5.8.1) (2024-07-22)

package/es/lib/CustomProperties/Config/CustomPropertiesLookup.test.js CHANGED Viewed

@@ -13,7 +13,7 @@ jest.mock('../../SearchField', () => () => /*#__PURE__*/(0, _jsxRuntime.jsx)("di
 describe('CustomPropertiesLookup', () => {
   let renderComponent;
   beforeEach(() => {
-    renderComponent = (0, _renderWithKintHarness.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+    renderComponent = (0, _renderWithKintHarness.default)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesLookup.default, {
         contextFilterOptions: [{
           'value': '',

package/es/lib/CustomProperties/Config/CustomPropertiesSettings.js CHANGED Viewed

@@ -174,7 +174,7 @@ const CustomPropertiesSettings = _ref => {
         } = _ref2;
         const actionsArray = [];
         if (editCondition) {
-          actionsArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          actionsArray.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
             buttonStyle: "dropdownItem",
             marginBottom0: true,
             onClick: () => setMode(EDITING),
@@ -188,7 +188,7 @@ const CustomPropertiesSettings = _ref => {
           }, `${customProperty.name}-action-edit`));
         }
         if (deleteCondition) {
-          actionsArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          actionsArray.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
             buttonStyle: "dropdownItem",
             marginBottom0: true,
             onClick: () => {

package/es/lib/CustomProperties/Config/CustomPropertiesSettings.test.js CHANGED Viewed

@@ -17,7 +17,7 @@ jest.mock('./CustomPropertiesLookup', () => () => /*#__PURE__*/(0, _jsxRuntime.j
 describe('CustomPropertiesSettings', () => {
   let renderComponent;
   beforeEach(() => {
-    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesSettings.default, {
         contextFilterOptions: [{
           'value': '',

package/es/lib/CustomProperties/Config/CustomPropertyForm.test.js CHANGED Viewed

@@ -22,7 +22,7 @@ jest.mock('../../hooks');
 describe('CustomPropertyForm', () => {
   let renderComponent;
   beforeEach(() => {
-    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
       initialValues: initialValues,
       onSubmit: onSubmit,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertyForm.default, {

package/es/lib/CustomProperties/Config/CustomPropertyView.test.js CHANGED Viewed

@@ -11,7 +11,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 jest.mock('../../hooks');
 describe('CustomPropertyView', () => {
   beforeEach(() => {
-    (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+    (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertyView.default, {
         customProperty: _customProperties.default?.find(cp => cp.name === 'Eligible authors')
       })

package/es/lib/CustomProperties/Edit/CustomPropertiesEdit.test.js CHANGED Viewed

@@ -13,7 +13,7 @@ jest.mock('./CustomPropertiesEditCtx', () => () => /*#__PURE__*/(0, _jsxRuntime.
 describe('CustomPropertiesEdit', () => {
   let renderComponent;
   beforeEach(() => {
-    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesEdit.default, {
         contexts: ['isNull', 'OpenAccess'],
         customPropertiesEndpoint: "erm/custprops",

package/es/lib/CustomProperties/Edit/CustomPropertiesEditCtx.test.js CHANGED Viewed

@@ -14,7 +14,7 @@ jest.mock('../../hooks');
 describe('CustomPropertiesEditCtx', () => {
   let renderComponent;
   beforeEach(() => {
-    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesEditCtx.default, {
         ctx: "OpenAccess",
         customPropertiesEndpoint: "erm/custprops",

package/es/lib/CustomProperties/Edit/CustomPropertiesListField.test.js CHANGED Viewed

@@ -16,7 +16,7 @@ jest.mock('./CustomPropertyFormCard', () => () => /*#__PURE__*/(0, _jsxRuntime.j
 describe('CustomPropertiesListField', () => {
   let renderComponent;
   beforeEach(() => {
-    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
       initialValues: _testResources.initialValues,
       onSubmit: onSubmit,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesListField.default, {

package/es/lib/CustomProperties/Edit/CustomPropertyField.test.js CHANGED Viewed

@@ -30,7 +30,7 @@ describe('CustomPropertyField', () => {
   let renderComponent;
   describe('CustomPropertyField', () => {
     beforeEach(() => {
-      renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
         initialValues: _testResources.initialValues,
         onSubmit: onSubmit,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertyField.default, {
@@ -82,7 +82,7 @@ describe('CustomPropertyField', () => {
   });
   describe('Decimal field', () => {
     beforeEach(() => {
-      renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
         initialValues: _testResources.initialValues,
         onSubmit: onSubmit,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertyField.default, {
@@ -100,7 +100,7 @@ describe('CustomPropertyField', () => {
   });
   describe('Integer field', () => {
     beforeEach(() => {
-      renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
         initialValues: _testResources.initialValues,
         onSubmit: onSubmit,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertyField.default, {
@@ -120,7 +120,7 @@ describe('CustomPropertyField', () => {
   });
   describe('Refdata multi-select field', () => {
     beforeEach(() => {
-      renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
         initialValues: _testResources.initialValues,
         onSubmit: onSubmit,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertyField.default, {
@@ -147,7 +147,7 @@ describe('CustomPropertyField', () => {
   });
   describe('Date field', () => {
     beforeEach(() => {
-      renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
         initialValues: _testResources.initialValues,
         onSubmit: onSubmit,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertyField.default, {

package/es/lib/CustomProperties/Edit/CustomPropertyFormCard.test.js CHANGED Viewed

@@ -18,7 +18,7 @@ const setCustomProperties = jest.fn();
 describe('CustomPropertyFormCard', () => {
   let renderComponent;
   beforeEach(() => {
-    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertyFormCard.default, {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertyFormCard.default, {
       availableCustomProperties: _customProperties.availableCustomProperties,
       customProperties: _customProperties.default,
       customProperty: customProperty,

package/es/lib/CustomProperties/Filter/CustomPropertiesFilter.test.js CHANGED Viewed

@@ -16,7 +16,7 @@ jest.mock('./CustomPropertiesFilterForm', () => () => /*#__PURE__*/(0, _jsxRunti
 describe('CustomPropertiesFilter', () => {
   let renderComponent;
   beforeEach(() => {
-    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesFilter.default, {
         activeFilters: _testResources.activeFilters,
         customPropertiesEndpoint: "erm/custprops",

package/es/lib/CustomProperties/Filter/CustomPropertiesFilterField.test.js CHANGED Viewed

@@ -14,7 +14,7 @@ jest.mock('../../hooks');
 const onSubmit = jest.fn();
 let renderComponent;
 describe('CustomPropertiesFilterField', () => {
-  renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+  renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
       initialValues: {
         filters: _testResources.data.filters

package/es/lib/CustomProperties/Filter/CustomPropertiesFilterFieldArray.test.js CHANGED Viewed

@@ -16,7 +16,7 @@ const onSubmit = jest.fn();
 let renderComponent;
 describe('CustomPropertiesFilterFieldArray', () => {
   beforeEach(() => {
-    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
       onSubmit: onSubmit,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
         component: _CustomPropertiesFilterFieldArray.default,

package/es/lib/CustomProperties/Filter/CustomPropertiesFilterForm.test.js CHANGED Viewed

@@ -15,7 +15,7 @@ const onSubmit = jest.fn();
 describe('CustomPropertyFiltersForm', () => {
   let renderComponent;
   beforeEach(() => {
-    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesFilterForm.default, {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesFilterForm.default, {
       onSubmit: onSubmit,
       ..._testResources.data
     }));

package/es/lib/CustomProperties/Filter/CustomPropertiesRule.test.js CHANGED Viewed

@@ -13,7 +13,7 @@ jest.mock('../../hooks');
 const clearRuleValue = () => {};
 describe('CustomPropertiesRule', () => {
   beforeEach(() => {
-    (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+    (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
         onSubmit: onSubmit,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesRule.default, {

package/es/lib/CustomProperties/View/CustomPropertiesView.test.js CHANGED Viewed

@@ -15,7 +15,7 @@ jest.mock('./CustomPropertiesViewCtx', () => () => /*#__PURE__*/(0, _jsxRuntime.
 describe('CustomPropertiesView', () => {
   let renderComponent;
   beforeEach(() => {
-    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesView.default, {
         contexts: _testResources.contexts,
         customProperties: _testResources.customProperties,

package/es/lib/CustomProperties/View/CustomPropertiesViewCtx.test.js CHANGED Viewed

@@ -15,7 +15,7 @@ jest.mock('./CustomPropertyCard', () => () => /*#__PURE__*/(0, _jsxRuntime.jsx)(
 describe('CustomPropertiesViewCtx', () => {
   let renderComponent;
   beforeEach(() => {
-    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesViewCtx.default, {
         ..._testResources.data
       })

package/es/lib/EditableSettingsList/EditableSettingsListFieldArray.test.js CHANGED Viewed

@@ -44,7 +44,7 @@ describe('EditableSettingsListFieldArray', () => {
   describe('with empty initial values', () => {
     let renderComponent;
     beforeEach(async () => {
-      renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
         initialValues: {},
         onSubmit: onSubmit,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
@@ -63,7 +63,7 @@ describe('EditableSettingsListFieldArray', () => {
   describe('with initial value set', () => {
     let renderComponent;
     beforeEach(async () => {
-      renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
         initialValues: {
           settings
         },
@@ -84,7 +84,7 @@ describe('EditableSettingsListFieldArray', () => {
   describe('with multiple initial values set', () => {
     let renderComponent;
     beforeEach(async () => {
-      renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
         initialValues: {
           settings: multipleSettings
         },

package/es/lib/EditableSettingsList/SettingField/EditSettingValue.test.js CHANGED Viewed

@@ -79,7 +79,7 @@ describe('EditSettingValue', () => {
     describe('with no initial value', () => {
       let renderComponent;
       beforeEach(() => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {},
           onSubmit: onSubmit,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
@@ -102,7 +102,7 @@ describe('EditSettingValue', () => {
     describe('with initial value', () => {
       let renderComponent;
       beforeEach(() => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {
             test: {
               value: stringSetting.value
@@ -134,7 +134,7 @@ describe('EditSettingValue', () => {
     describe('with no initial value for refdata with <4 options', () => {
       let renderComponent;
       beforeEach(() => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {},
           onSubmit: onSubmit,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
@@ -178,7 +178,7 @@ describe('EditSettingValue', () => {
     describe('with initial value for refdata with <4 options', () => {
       let renderComponent;
       beforeEach(() => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {
             test: {
               value: refdataSetting.value
@@ -226,7 +226,7 @@ describe('EditSettingValue', () => {
     describe('with no initial value for refdata with >4 options', () => {
       let renderComponent;
       beforeEach(() => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {},
           onSubmit: onSubmit,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
@@ -273,7 +273,7 @@ describe('EditSettingValue', () => {
     describe('with initial value for refdata with >4 options', () => {
       let renderComponent;
       beforeEach(() => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {
             test: {
               value: refdataSetting.value
@@ -326,7 +326,7 @@ describe('EditSettingValue', () => {
     describe('with no initial value', () => {
       let renderComponent;
       beforeEach(() => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {},
           onSubmit: onSubmit,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
@@ -372,7 +372,7 @@ describe('EditSettingValue', () => {
     describe('with initial value', () => {
       let renderComponent;
       beforeEach(() => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {
             test: {
               value: templateSetting.value

package/es/lib/EditableSettingsList/SettingField/RenderSettingValue.test.js CHANGED Viewed

@@ -108,7 +108,7 @@ describe('RenderSettingValue', () => {
     describe('render a string setting', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: stringSetting,
           input: {
             name: 'test'
@@ -125,7 +125,7 @@ describe('RenderSettingValue', () => {
     describe('render a string setting without a value', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: stringSettingNoValue,
           input: {
             name: 'test'
@@ -142,7 +142,7 @@ describe('RenderSettingValue', () => {
     describe('render a string setting without a value or default', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: stringSettingNoValueOrDefault,
           input: {
             name: 'test'
@@ -161,7 +161,7 @@ describe('RenderSettingValue', () => {
     describe('render a refdata setting', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: refdataSetting,
           input: {
             name: 'test'
@@ -179,7 +179,7 @@ describe('RenderSettingValue', () => {
     describe('render a refdata setting without a value', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: refdataSettingNoValue,
           input: {
             name: 'test'
@@ -197,7 +197,7 @@ describe('RenderSettingValue', () => {
     describe('render a refdata setting without a value or default', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: refdataSettingNoValueOrDefault,
           input: {
             name: 'test'
@@ -217,7 +217,7 @@ describe('RenderSettingValue', () => {
     describe('render a password setting', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: passwordSetting,
           input: {
             name: 'test'
@@ -234,7 +234,7 @@ describe('RenderSettingValue', () => {
     describe('render a password setting without a value', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: passwordSettingNoValue,
           input: {
             name: 'test'
@@ -251,7 +251,7 @@ describe('RenderSettingValue', () => {
     describe('render a password setting without a value or default', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: passwordSettingNoValueOrDefault,
           input: {
             name: 'test'
@@ -270,7 +270,7 @@ describe('RenderSettingValue', () => {
     describe('render a template setting', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: templateSetting,
           input: {
             name: 'test'
@@ -288,7 +288,7 @@ describe('RenderSettingValue', () => {
     describe('render a template setting without a value', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: templateSettingNoValue,
           input: {
             name: 'test'
@@ -306,7 +306,7 @@ describe('RenderSettingValue', () => {
     describe('render a template setting without a value or default', () => {
       let renderComponent;
       beforeEach(async () => {
-        renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
+        renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderSettingValue.default, {
           currentSetting: templateSettingNoValueOrDefault,
           input: {
             name: 'test'

package/es/lib/EditableSettingsList/SettingField/SettingField.test.js CHANGED Viewed

@@ -27,7 +27,7 @@ const setting = {
 describe('SettingField', () => {
   let renderComponent;
   beforeEach(async () => {
-    renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+    renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
       initialValues: {},
       onSubmit: onSubmit,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {

package/es/lib/NumberField/NumberField.js CHANGED Viewed

@@ -4,14 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
 var _noop = _interopRequireDefault(require("lodash/noop"));
 var _components = require("@folio/stripes/components");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const NumberField = props => {
   const {
+    onBlur: passedOnBlur = _noop.default,
     onChange: passedOnChange = _noop.default,
     input,
     value,
@@ -30,13 +31,18 @@ const NumberField = props => {
   // Allow direct control of field
   (0, _react.useEffect)(() => {
-    if (value && numValue !== value) {
-      setNumValue(value);
+    const valueToUse = value ?? input.value;
+    if (!valueToUse && numValue) {
+      // Make sure to empty out if it's cleared. Treating '' as empty instead of undefined
+      setNumValue('');
+    }
+    if (valueToUse && numValue !== valueToUse) {
+      setNumValue(valueToUse);
     }
-    if (numValue && forceControl !== numValue) {
+    if (forceControl !== numValue) {
       setForceControl(numValue);
     }
-  }, [forceControl, numValue, value]);
+  }, [forceControl, numValue, value, input]);
   const handleChange = e => {
     // Actually set the value in the form
     if (input?.onChange) {
@@ -54,7 +60,7 @@ const NumberField = props => {
   const handleUserChange = e => {
     const parsedValue = parseFloat(e.target.value);
-    // ReturnValue needed for contorlled components
+    // ReturnValue needed for controlled components
     if (parsedValue || parsedValue === 0) {
       setNumValue(parsedValue);
       changeField(parsedValue);
@@ -68,6 +74,13 @@ const NumberField = props => {
       ref: userInputRef,
       ...rest,
       // Keep an eye on this
+      onBlur: event => {
+        // Make sure blur propogates to input
+        if (input.onBlur) {
+          input.onBlur(event);
+        }
+        passedOnBlur(event);
+      },
       onChange: handleUserChange,
       type: "number",
       value: forceControl
@@ -75,6 +88,7 @@ const NumberField = props => {
       ref: inputRef,
       ...input,
       hidden: true,
+      id: input?.name,
       onChange: handleChange,
       type: "number",
       value: numValue
@@ -82,9 +96,12 @@ const NumberField = props => {
   });
 };
 NumberField.propTypes = {
+  onBlur: _propTypes.default.func,
   onChange: _propTypes.default.func,
   input: _propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
     onChange: _propTypes.default.func.isRequired,
+    onBlur: _propTypes.default.func,
     value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   }),
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])

package/es/lib/NumberField/NumberField.test.js ADDED Viewed

@@ -0,0 +1,200 @@
+"use strict";
+var _react = require("react");
+var _reactFinalForm = require("react-final-form");
+var _userEvent = _interopRequireDefault(require("@folio/jest-config-stripes/testing-library/user-event"));
+var _react2 = require("@folio/jest-config-stripes/testing-library/react");
+var _stripesErmTesting = require("@folio/stripes-erm-testing");
+var _components = require("@folio/stripes/components");
+var _NumberField = _interopRequireDefault(require("./NumberField"));
+var _helpers = require("../../../test/jest/helpers");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const onSubmit = jest.fn();
+const NUMBER_FIELD_LABEL = 'TEST NUMBER FIELD';
+const NUMBER_FIELD_ID = 'number-field-test';
+const NUMBER_FIELD_INPUT_ID = 'input-id-test';
+const RESET_BUTTON_LABEL = 'RESET NUMBER FIELD';
+// We need to use jest selectors instead of interactors as the TextField interactor
+// can't handle the double-text-field nature of NumberField
+const getTextField = () => {
+  // Spinbutton because it's a "number" type textField...
+  return _react2.screen.getByRole('spinbutton', {
+    name: NUMBER_FIELD_LABEL
+  });
+};
+const submitForm = async () => {
+  await (0, _react2.waitFor)(async () => {
+    await (0, _stripesErmTesting.Button)('Submit').click();
+  });
+};
+const SpecialResetButton = () => {
+  const {
+    change
+  } = (0, _reactFinalForm.useForm)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+    onClick: () => change(NUMBER_FIELD_INPUT_ID, undefined),
+    children: RESET_BUTTON_LABEL
+  });
+};
+const NonControlledComponent = () => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpecialResetButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+      component: _NumberField.default,
+      id: NUMBER_FIELD_ID,
+      label: NUMBER_FIELD_LABEL,
+      name: NUMBER_FIELD_INPUT_ID
+    })]
+  });
+};
+const ControlledComponent = () => {
+  const [value, setValue] = (0, _react.useState)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpecialResetButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+      component: _NumberField.default,
+      id: NUMBER_FIELD_ID,
+      label: NUMBER_FIELD_LABEL,
+      name: NUMBER_FIELD_INPUT_ID,
+      onChange: e => setValue(e.target.value),
+      value: value
+    })]
+  });
+};
+// EXAMPLE nesting repeated tests with describe.each or test.each might speed up some of our test writing
+describe.each([['Non-Controlled', /*#__PURE__*/(0, _jsxRuntime.jsx)(NonControlledComponent, {})], ['Controlled', /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlledComponent, {})]])('NumberField', (controlType, component) => {
+  let _renderComponent;
+  let textField;
+  describe(`Regular usage (${controlType})`, () => {
+    beforeEach(async () => {
+      onSubmit.mockClear();
+      _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        initialValues: {},
+        onSubmit: onSubmit,
+        children: component
+      }));
+      textField = getTextField();
+    });
+    it('renders text field as expected', () => {
+      expect(textField).toBeInTheDocument();
+    });
+    describe.each([['non-numeric characters', 'sdhukjasklfs', '', {}], ['numeric characters', '12345', '12345', {
+      [NUMBER_FIELD_INPUT_ID]: '12345'
+    }], ['scientific notation', '1e5', '100000', {
+      [NUMBER_FIELD_INPUT_ID]: '100000'
+    }], ['negative numbers', '-100', '-100', {
+      [NUMBER_FIELD_INPUT_ID]: '-100'
+    }]])('Typing', (characterType, typedChars, expectedDisplay, expectedSubmit) => {
+      describe(`typing ${characterType}`, () => {
+        beforeEach(async () => {
+          await (0, _react2.waitFor)(async () => {
+            await _userEvent.default.type(textField, typedChars);
+          });
+        });
+        it('does not render typed characters', async () => {
+          expect(textField).toHaveDisplayValue(expectedDisplay);
+        });
+        describe('submitting the form', () => {
+          beforeEach(submitForm);
+          it('submits with expected values', () => {
+            expect(onSubmit.mock.calls[0][0]).toEqual(expectedSubmit);
+          });
+        });
+      });
+    });
+  });
+  describe.each([['numeric initialvalues', {
+    [NUMBER_FIELD_INPUT_ID]: '7654321'
+  }, '7654321', {
+    [NUMBER_FIELD_INPUT_ID]: '7654321'
+  }], ['regular scientific initialvalue NOTE: scientific value parsing does NOT work from initialValues', {
+    [NUMBER_FIELD_INPUT_ID]: '3e7'
+  }, '3e7', {
+    [NUMBER_FIELD_INPUT_ID]: '3e7'
+  }], ['negative initialvalue', {
+    [NUMBER_FIELD_INPUT_ID]: '-100'
+  }, '-100', {
+    [NUMBER_FIELD_INPUT_ID]: '-100'
+  }]])(`Initial values (${controlType})`, (describeTitle, initialValues, displayValue, submitValue) => {
+    describe(describeTitle, () => {
+      beforeEach(async () => {
+        onSubmit.mockClear();
+        _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+          initialValues: initialValues,
+          onSubmit: onSubmit,
+          children: component
+        }));
+        textField = getTextField();
+      });
+      it('renders initial value', async () => {
+        expect(textField).toHaveDisplayValue(displayValue);
+      });
+      describe('submitting the form', () => {
+        beforeEach(submitForm);
+        it('submits with expected values', () => {
+          expect(onSubmit.mock.calls[0][0]).toEqual(submitValue);
+        });
+      });
+    });
+  });
+  describe.each([['Clear after typing', async () => {
+    onSubmit.mockClear();
+    _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      initialValues: {},
+      onSubmit: onSubmit,
+      children: component
+    }));
+    textField = getTextField();
+    await (0, _react2.waitFor)(async () => {
+      await _userEvent.default.type(textField, '32786843');
+    });
+  }], ['Clear from initialValues', async () => {
+    onSubmit.mockClear();
+    _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      initialValues: {
+        [NUMBER_FIELD_INPUT_ID]: '32786843'
+      },
+      onSubmit: onSubmit,
+      children: component
+    }));
+    textField = getTextField();
+  }]])(`ERM-3391: state change underneath component (${controlType})`, (clearType, beforeEachFunc) => {
+    describe(clearType, () => {
+      beforeEach(beforeEachFunc);
+      it('renders text field', () => {
+        expect(textField).toBeInTheDocument();
+      });
+      it('renders special reset button', async () => {
+        await (0, _stripesErmTesting.Button)(RESET_BUTTON_LABEL).exists();
+      });
+      describe.each([['Control', false, '32786843', {
+        [NUMBER_FIELD_INPUT_ID]: '32786843'
+      }], ['After reset', true, '', {}]])('Test reset', (describeTitle, clearField, expectedValue, expectedSubmit) => {
+        describe(describeTitle, () => {
+          beforeEach(async () => {
+            onSubmit.mockClear();
+            if (clearField) {
+              await (0, _react2.waitFor)(async () => {
+                await (0, _stripesErmTesting.Button)(RESET_BUTTON_LABEL).click();
+              });
+            }
+          });
+          it(`renders text field with display value: ${expectedValue}`, async () => {
+            await (0, _react2.waitFor)(() => {
+              expect(textField).toHaveDisplayValue(expectedValue);
+            });
+          });
+          describe('submitting', () => {
+            describe('submitting the form', () => {
+              beforeEach(submitForm);
+              it('submits with expected values', () => {
+                expect(onSubmit.mock.calls[0][0]).toEqual(expectedSubmit);
+              });
+            });
+          });
+        });
+      });
+    });
+  });
+});

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.8.1",
+  "version": "5.8.3",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/lib/NumberField/NumberField.js CHANGED Viewed

@@ -1,9 +1,10 @@
+import PropTypes from 'prop-types';
 import {
   useEffect,
   useRef,
   useState
 } from 'react';
-import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
 import {
@@ -14,6 +15,7 @@ import {
 const NumberField = (props) => {
   const {
+    onBlur: passedOnBlur = noop,
     onChange: passedOnChange = noop,
     input,
     value,
@@ -35,14 +37,21 @@ const NumberField = (props) => {
   // Allow direct control of field
   useEffect(() => {
-    if (value && numValue !== value) {
-      setNumValue(value);
+    const valueToUse = value ?? input.value;
+    if (!valueToUse && numValue) {
+      // Make sure to empty out if it's cleared. Treating '' as empty instead of undefined
+      setNumValue('');
     }
-    if (numValue && forceControl !== numValue) {
+    if (valueToUse && numValue !== valueToUse) {
+      setNumValue(valueToUse);
+    }
+    if (forceControl !== numValue) {
       setForceControl(numValue);
     }
-  }, [forceControl, numValue, value]);
+  }, [forceControl, numValue, value, input]);
   const handleChange = (e) => {
     // Actually set the value in the form
@@ -59,12 +68,10 @@ const NumberField = (props) => {
     }
   };
   const handleUserChange = (e) => {
     const parsedValue = parseFloat(e.target.value);
-    // ReturnValue needed for contorlled components
+    // ReturnValue needed for controlled components
     if (parsedValue || parsedValue === 0) {
       setNumValue(parsedValue);
       changeField(parsedValue);
@@ -79,6 +86,13 @@ const NumberField = (props) => {
       <TextField
         ref={userInputRef}
         {...rest} // Keep an eye on this
+        onBlur={(event) => {
+          // Make sure blur propogates to input
+          if (input.onBlur) {
+            input.onBlur(event);
+          }
+          passedOnBlur(event);
+        }}
         onChange={handleUserChange}
         type="number"
         value={forceControl}
@@ -87,6 +101,7 @@ const NumberField = (props) => {
         ref={inputRef}
         {...input}
         hidden
+        id={input?.name}
         onChange={handleChange}
         type="number"
         value={numValue}
@@ -96,9 +111,12 @@ const NumberField = (props) => {
 };
 NumberField.propTypes = {
+  onBlur: PropTypes.func,
   onChange: PropTypes.func,
   input: PropTypes.shape({
+    name: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
     value: PropTypes.oneOfType([
       PropTypes.number,
       PropTypes.string

package/src/lib/NumberField/NumberField.test.js ADDED Viewed

@@ -0,0 +1,258 @@
+import { useState } from 'react';
+import { Field, useForm } from 'react-final-form';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
+import { screen, waitFor } from '@folio/jest-config-stripes/testing-library/react';
+import { Button, TestForm, TextField } from '@folio/stripes-erm-testing';
+import { Button as StripesButton } from '@folio/stripes/components';
+import NumberField from './NumberField';
+import { renderWithKintHarness } from '../../../test/jest/helpers';
+const onSubmit = jest.fn();
+const NUMBER_FIELD_LABEL = 'TEST NUMBER FIELD';
+const NUMBER_FIELD_ID = 'number-field-test';
+const NUMBER_FIELD_INPUT_ID = 'input-id-test';
+const RESET_BUTTON_LABEL = 'RESET NUMBER FIELD';
+// We need to use jest selectors instead of interactors as the TextField interactor
+// can't handle the double-text-field nature of NumberField
+const getTextField = () => {
+  // Spinbutton because it's a "number" type textField...
+  return screen.getByRole('spinbutton', { name: NUMBER_FIELD_LABEL });
+};
+const submitForm = async () => {
+  await waitFor(async () => {
+    await Button('Submit').click();
+  });
+};
+const SpecialResetButton = () => {
+  const { change } = useForm();
+  return (
+    <StripesButton
+      onClick={() => change(NUMBER_FIELD_INPUT_ID, undefined)}
+    >
+      {RESET_BUTTON_LABEL}
+    </StripesButton>
+  );
+};
+const NonControlledComponent = () => {
+  return (
+    <>
+      <SpecialResetButton />
+      <Field
+        component={NumberField}
+        id={NUMBER_FIELD_ID}
+        label={NUMBER_FIELD_LABEL}
+        name={NUMBER_FIELD_INPUT_ID}
+      />
+    </>
+  );
+};
+const ControlledComponent = () => {
+  const [value, setValue] = useState();
+  return (
+    <>
+      <SpecialResetButton />
+      <Field
+        component={NumberField}
+        id={NUMBER_FIELD_ID}
+        label={NUMBER_FIELD_LABEL}
+        name={NUMBER_FIELD_INPUT_ID}
+        onChange={e => setValue(e.target.value)}
+        value={value}
+      />
+    </>
+  );
+};
+// EXAMPLE nesting repeated tests with describe.each or test.each might speed up some of our test writing
+describe.each([
+  ['Non-Controlled', <NonControlledComponent />],
+  ['Controlled', <ControlledComponent />],
+])('NumberField', (controlType, component) => {
+  let _renderComponent;
+  let textField;
+  describe(`Regular usage (${controlType})`, () => {
+    beforeEach(async () => {
+      onSubmit.mockClear();
+      _renderComponent = renderWithKintHarness(
+        <TestForm
+          initialValues={{}}
+          onSubmit={onSubmit}
+        >
+          {component}
+        </TestForm>
+      );
+      textField = getTextField();
+    });
+    it('renders text field as expected', () => {
+      expect(textField).toBeInTheDocument();
+    });
+    describe.each([
+      ['non-numeric characters', 'sdhukjasklfs', '', {}],
+      ['numeric characters', '12345', '12345', { [NUMBER_FIELD_INPUT_ID]: '12345' }],
+      ['scientific notation', '1e5', '100000', { [NUMBER_FIELD_INPUT_ID]: '100000' }],
+      ['negative numbers', '-100', '-100', { [NUMBER_FIELD_INPUT_ID]: '-100' }],
+    ])('Typing', (characterType, typedChars, expectedDisplay, expectedSubmit) => {
+      describe(`typing ${characterType}`, () => {
+        beforeEach(async () => {
+          await waitFor(async () => {
+            await userEvent.type(textField, typedChars);
+          });
+        });
+        it('does not render typed characters', async () => {
+          expect(textField).toHaveDisplayValue(expectedDisplay);
+        });
+        describe('submitting the form', () => {
+          beforeEach(submitForm);
+          it('submits with expected values', () => {
+            expect(onSubmit.mock.calls[0][0]).toEqual(expectedSubmit);
+          });
+        });
+      });
+    });
+  });
+  describe.each([
+    ['numeric initialvalues', { [NUMBER_FIELD_INPUT_ID]: '7654321' }, '7654321', { [NUMBER_FIELD_INPUT_ID]: '7654321' }],
+    ['regular scientific initialvalue NOTE: scientific value parsing does NOT work from initialValues', { [NUMBER_FIELD_INPUT_ID]: '3e7' }, '3e7', { [NUMBER_FIELD_INPUT_ID]: '3e7' }],
+    ['negative initialvalue', { [NUMBER_FIELD_INPUT_ID]: '-100' }, '-100', { [NUMBER_FIELD_INPUT_ID]: '-100' }],
+  ])(`Initial values (${controlType})`, (describeTitle, initialValues, displayValue, submitValue) => {
+    describe(describeTitle, () => {
+      beforeEach(async () => {
+        onSubmit.mockClear();
+        _renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={initialValues}
+            onSubmit={onSubmit}
+          >
+            {component}
+          </TestForm>
+        );
+        textField = getTextField();
+      });
+      it('renders initial value', async () => {
+        expect(textField).toHaveDisplayValue(displayValue);
+      });
+      describe('submitting the form', () => {
+        beforeEach(submitForm);
+        it('submits with expected values', () => {
+          expect(onSubmit.mock.calls[0][0]).toEqual(submitValue);
+        });
+      });
+    });
+  });
+  describe.each([
+    [
+      'Clear after typing',
+      async () => {
+        onSubmit.mockClear();
+        _renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{}}
+            onSubmit={onSubmit}
+          >
+            {component}
+          </TestForm>
+        );
+        textField = getTextField();
+        await waitFor(async () => {
+          await userEvent.type(textField, '32786843');
+        });
+      }
+    ],
+    [
+      'Clear from initialValues',
+      async () => {
+        onSubmit.mockClear();
+        _renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{ [NUMBER_FIELD_INPUT_ID]: '32786843' }}
+            onSubmit={onSubmit}
+          >
+            {component}
+          </TestForm>
+        );
+        textField = getTextField();
+      }
+    ]
+  ])(`ERM-3391: state change underneath component (${controlType})`, (clearType, beforeEachFunc) => {
+    describe(clearType, () => {
+      beforeEach(beforeEachFunc);
+      it('renders text field', () => {
+        expect(textField).toBeInTheDocument();
+      });
+      it('renders special reset button', async () => {
+        await Button(RESET_BUTTON_LABEL).exists();
+      });
+      describe.each([
+        [
+          'Control',
+          false,
+          '32786843',
+          { [NUMBER_FIELD_INPUT_ID]: '32786843' }
+        ],
+        [
+          'After reset',
+          true,
+          '',
+          {}
+        ]
+      ])('Test reset', (describeTitle, clearField, expectedValue, expectedSubmit) => {
+        describe(describeTitle, () => {
+          beforeEach(async () => {
+            onSubmit.mockClear();
+            if (clearField) {
+              await waitFor(async () => {
+                await Button(RESET_BUTTON_LABEL).click();
+              });
+            }
+          });
+          it(`renders text field with display value: ${expectedValue}`, async () => {
+            await waitFor(() => {
+              expect(textField).toHaveDisplayValue(expectedValue);
+            });
+          });
+          describe('submitting', () => {
+            describe('submitting the form', () => {
+              beforeEach(submitForm);
+              it('submits with expected values', () => {
+                expect(onSubmit.mock.calls[0][0]).toEqual(expectedSubmit);
+              });
+            });
+          });
+        });
+      });
+    });
+  });
+});