npm - envoc-form - Versions diffs - 2.0.1-9 → 2.0.1 - Mend

envoc-form 2.0.1-9 → 2.0.1

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 (141) hide show

package/README.md +7 -7
package/dist/css/envoc-form-styles.css +7 -6
package/dist/css/envoc-form-styles.css.map +1 -1
package/es/AddressInput/AddressInput.js +7 -6
package/es/ConfirmBaseForm/ConfirmBaseForm.js +3 -2
package/es/ConfirmDeleteForm/ConfirmDeleteForm.js +2 -1
package/es/DatePickerInput/DatePickerInput.js +22 -5
package/es/FileInput/DefaultFileList.js +3 -2
package/es/FileInput/DropzoneFileInput.js +15 -12
package/es/FileInput/FileInput.js +31 -9
package/es/Form/Form.js +2 -1
package/es/FormGroupWrapper.js +2 -1
package/es/FormInput/FormInput.js +12 -6
package/es/FormInputArray/FormInputArray.js +39 -24
package/es/IconInput.js +2 -1
package/es/ReactSelectField/ReactSelectField.js +6 -3
package/es/SubmitFormButton.js +2 -1
package/es/__Tests__/FormTestBase.js +5 -2
package/es/normalizers.js +10 -5
package/es/useStandardFormInput.js +4 -2
package/lib/AddressInput/AddressInput.js +14 -8
package/lib/ConfirmBaseForm/ConfirmBaseForm.js +4 -2
package/lib/ConfirmDeleteForm/ConfirmDeleteForm.js +3 -1
package/lib/DatePickerInput/DatePickerInput.js +25 -5
package/lib/FileInput/DefaultFileList.js +3 -2
package/lib/FileInput/DropzoneFileInput.js +17 -12
package/lib/FileInput/FileInput.js +39 -10
package/lib/Form/Form.js +9 -3
package/lib/Form/FormBasedPreventNavigation.js +5 -1
package/lib/FormGroupWrapper.js +3 -1
package/lib/FormInput/FormInput.js +13 -6
package/lib/FormInputArray/FormInputArray.js +47 -26
package/lib/FormSection.js +5 -1
package/lib/IconInput.js +3 -1
package/lib/ReactSelectField/ReactSelectField.js +13 -5
package/lib/ReactSelectField/index.js +6 -2
package/lib/SubmitFormButton.js +3 -1
package/lib/__Tests__/FormTestBase.js +6 -2
package/lib/index.js +7 -3
package/lib/normalizers.js +10 -5
package/lib/useStandardFormInput.js +5 -2
package/lib/validators/index.js +5 -1
package/package.json +99 -93
package/src/AddressInput/AddesssInput.test.js +23 -23
package/src/AddressInput/AddressInput.js +73 -73
package/src/AddressInput/UsStates.js +53 -53
package/src/AddressInput/__snapshots__/AddesssInput.test.js.snap +207 -207
package/src/AddressInput/index.js +2 -2
package/src/BoolInput/BoolInput.js +7 -7
package/src/BoolInput/BoolInput.test.js +23 -23
package/src/BoolInput/InlineBoolInput.js +7 -7
package/src/BoolInput/__snapshots__/BoolInput.test.js.snap +89 -89
package/src/BoolInput/boolOptions.js +6 -6
package/src/BoolInput/index.js +4 -4
package/src/ConfirmBaseForm/ConfirmBaseForm.js +37 -37
package/src/ConfirmBaseForm/ConfirmBaseForm.test.js +14 -14
package/src/ConfirmBaseForm/__snapshots__/ConfirmBaseForm.test.js.snap +23 -23
package/src/ConfirmBaseForm/index.js +1 -1
package/src/ConfirmDeleteForm/ConfirmDeleteForm.js +39 -39
package/src/ConfirmDeleteForm/ConfirmDeleteForm.test.js +24 -24
package/src/ConfirmDeleteForm/__snapshots__/ConfirmDeleteForm.test.js.snap +25 -25
package/src/ConfirmDeleteForm/index.js +1 -1
package/src/DatePickerInput/DatePickerInput.js +58 -46
package/src/DatePickerInput/DatePickerInput.test.js +74 -74
package/src/DatePickerInput/__snapshots__/DatePickerInput.test.js.snap +134 -134
package/src/DatePickerInput/date-picker-input.scss +42 -42
package/src/DatePickerInput/index.js +3 -3
package/src/ErrorScrollTarget.js +6 -6
package/src/FileInput/DefaultFileList.js +39 -39
package/src/FileInput/DropzoneFileInput.js +56 -55
package/src/FileInput/DropzoneFileInput.test.js +24 -15
package/src/FileInput/FileInput.js +77 -49
package/src/FileInput/FileInput.test.js +24 -15
package/src/FileInput/__snapshots__/DropzoneFileInput.test.js.snap +57 -28
package/src/FileInput/__snapshots__/FileInput.test.js.snap +58 -22
package/src/FileInput/file-input.scss +57 -57
package/src/FileInput/index.js +4 -4
package/src/Form/FocusError.js +48 -48
package/src/Form/Form.js +139 -139
package/src/Form/Form.test.js +23 -23
package/src/Form/FormBasedPreventNavigation.js +25 -25
package/src/Form/ServerErrorContext.js +7 -7
package/src/Form/__snapshots__/Form.test.js.snap +9 -9
package/src/Form/index.js +3 -3
package/src/FormGroup.js +30 -30
package/src/FormGroupWrapper.js +28 -28
package/src/FormInput/FormInput.js +144 -144
package/src/FormInput/FormInput.test.js +66 -66
package/src/FormInput/__snapshots__/FormInput.test.js.snap +323 -316
package/src/FormInput/form-input.scss +9 -9
package/src/FormInput/index.js +2 -2
package/src/FormInputArray/FormInputArray.js +224 -210
package/src/FormInputArray/FormInputArray.test.js +108 -59
package/src/FormInputArray/__snapshots__/FormInputArray.test.js.snap +52 -40
package/src/FormInputArray/form-input-array.scss +13 -8
package/src/FormInputArray/index.js +2 -2
package/src/FormSection.js +13 -13
package/src/IconInput.js +31 -31
package/src/InlineFormInput/InlineFormInput.js +6 -6
package/src/InlineFormInput/InlineFormInput.test.js +23 -23
package/src/InlineFormInput/__snapshots__/InlineFormInput.test.js.snap +26 -26
package/src/InlineFormInput/index.js +3 -3
package/src/InlineFormInput/inline-form-input.scss +3 -3
package/src/MoneyInput/InlineMoneyInput.js +7 -7
package/src/MoneyInput/MoneyInput.js +7 -7
package/src/MoneyInput/MoneyInputs.test.js +43 -43
package/src/MoneyInput/__snapshots__/MoneyInputs.test.js.snap +81 -81
package/src/MoneyInput/index.js +4 -4
package/src/MoneyInput/money-input.scss +3 -3
package/src/MoneyInput/moneyInputProps.js +12 -12
package/src/NestedFormFieldContext.js +6 -6
package/src/ReactSelectField/ReactSelectField.js +122 -120
package/src/ReactSelectField/index.js +6 -6
package/src/ReactSelectField/react-select-field.scss +5 -5
package/src/StandardFormActions.js +27 -27
package/src/SubmitFormButton.js +28 -28
package/src/__Tests__/FormTestBase.js +14 -11
package/src/__Tests__/IconInput.test.js +23 -23
package/src/__Tests__/StandardFormActions.test.js +23 -23
package/src/__Tests__/SubmitFormButton.test.js +23 -23
package/src/__Tests__/__snapshots__/IconInput.test.js.snap +38 -38
package/src/__Tests__/__snapshots__/StandardFormActions.test.js.snap +25 -25
package/src/__Tests__/__snapshots__/SubmitFormButton.test.js.snap +18 -18
package/src/__Tests__/index.js +2 -2
package/src/_variables.scss +11 -11
package/src/index.js +33 -33
package/src/normalizers.js +42 -32
package/src/selectors.js +3 -3
package/src/styles.scss +7 -7
package/src/useStandardFormInput.js +118 -118
package/src/utils/index.js +3 -3
package/src/utils/objectContainsNonSerializableProperty.js +15 -15
package/src/utils/objectContainsNonSerializableProperty.test.js +49 -49
package/src/utils/objectToFormData.js +89 -89
package/src/utils/objectToFormData.test.js +76 -76
package/src/utils/typeChecks.js +18 -18
package/src/validators/index.js +2 -2
package/src/validators/validators.js +93 -93
package/src/validators/validators.test.js +79 -79
package/CHANGELOG.json +0 -95
package/CHANGELOG.md +0 -58

package/src/FormInput/__snapshots__/FormInput.test.js.snap CHANGED Viewed

@@ -1,316 +1,323 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`FormInput has matching checkbox snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="custom-checkbox custom-control"
-    >
-      <input
-        class="custom-control-input"
-        id="test"
-        name="test"
-        type="checkbox"
-        value=""
-      />
-      <label
-        class="custom-control-label"
-        for="test"
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;
-exports[`FormInput has matching datepicker snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="form-group"
-    >
-      <div
-        id="test-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="react-date-picker react-date-picker--closed react-date-picker--enabled form-control"
-      >
-        <div
-          class="react-date-picker__wrapper"
-        >
-          <div
-            class="react-date-picker__inputGroup"
-          >
-            <input
-              max="2021-09-23"
-              min="2020-09-23"
-              name="test"
-              style="visibility: hidden; position: absolute; z-index: -999;"
-              type="date"
-              value=""
-            />
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
-              data-input="true"
-              inputmode="numeric"
-              max="12"
-              min="1"
-              name="month"
-              placeholder="--"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-date-picker__inputGroup__divider"
-            >
-              /
-            </span>
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__day"
-              data-input="true"
-              inputmode="numeric"
-              max="31"
-              min="1"
-              name="day"
-              placeholder="--"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-date-picker__inputGroup__divider"
-            >
-              /
-            </span>
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__year"
-              data-input="true"
-              inputmode="numeric"
-              max="2021"
-              min="2020"
-              name="year"
-              placeholder="----"
-              step="1"
-              type="number"
-              value=""
-            />
-          </div>
-          <button
-            class="react-date-picker__clear-button react-date-picker__button"
-            type="button"
-          >
-            <svg
-              class="react-date-picker__clear-button__icon react-date-picker__button__icon"
-              height="19"
-              stroke="black"
-              stroke-width="2"
-              viewBox="0 0 19 19"
-              width="19"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <line
-                x1="4"
-                x2="15"
-                y1="4"
-                y2="15"
-              />
-              <line
-                x1="15"
-                x2="4"
-                y1="4"
-                y2="15"
-              />
-            </svg>
-          </button>
-          <button
-            class="react-date-picker__calendar-button react-date-picker__button"
-            type="button"
-          >
-            <svg
-              class="react-date-picker__calendar-button__icon react-date-picker__button__icon"
-              height="19"
-              stroke="black"
-              stroke-width="2"
-              viewBox="0 0 19 19"
-              width="19"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect
-                fill="none"
-                height="15"
-                width="15"
-                x="2"
-                y="2"
-              />
-              <line
-                x1="6"
-                x2="6"
-                y1="0"
-                y2="4"
-              />
-              <line
-                x1="13"
-                x2="13"
-                y1="0"
-                y2="4"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
-exports[`FormInput has matching file input snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="form-group"
-    >
-      <div
-        id="test-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="custom-file file-input  "
-      >
-        <input
-          class="custom-file-input"
-          id="test"
-          meta="[object Object]"
-          name="test"
-          type="file"
-        />
-        <label
-          class="custom-file-label"
-        >
-          <span>
-            Choose A File...
-          </span>
-        </label>
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
-exports[`FormInput has matching select snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="form-group"
-    >
-      <div
-        id="test-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="react-select-input css-2b097c-container"
-        id="test"
-      >
-        <div
-          class=" css-150ye8w-control"
-        >
-          <div
-            class=" css-lbak6p-Component"
-          >
-            <div
-              class=" css-1osw1h9-placeholder"
-            >
-              Select...
-            </div>
-            <div
-              class="css-lp83hw-Component"
-            >
-              <div
-                class=""
-                style="display: inline-block;"
-              >
-                <input
-                  aria-autocomplete="list"
-                  autocapitalize="none"
-                  autocomplete="off"
-                  autocorrect="off"
-                  id="react-select-2-input"
-                  spellcheck="false"
-                  style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                  tabindex="0"
-                  type="text"
-                  value=""
-                />
-                <div
-                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class=" css-ny0e4k-Component"
-          >
-            <span
-              class=" css-1sl80az-indicatorSeparator"
-            />
-            <div
-              aria-hidden="true"
-              class=" css-augegj-indicatorContainer"
-            >
-              <svg
-                aria-hidden="true"
-                class="css-7ezgaa-Component"
-                focusable="false"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <input
-          name="test"
-          type="hidden"
-          value=""
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
-exports[`FormInput has matching textarea snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="form-group"
-    >
-      <div
-        id="test-error-scroll-target"
-        style="display: none;"
-      />
-      <textarea
-        class="form-control"
-        id="test"
-        name="test"
-        type="textarea"
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`FormInput has matching checkbox snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="custom-checkbox custom-control"
+    >
+      <input
+        class="custom-control-input"
+        id="test"
+        name="test"
+        type="checkbox"
+        value=""
+      />
+      <label
+        class="custom-control-label"
+        for="test"
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;
+exports[`FormInput has matching datepicker snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="form-group"
+    >
+      <div
+        id="test-error-scroll-target"
+        style="display: none;"
+      />
+      <div
+        class="react-date-picker react-date-picker--closed react-date-picker--enabled form-control"
+      >
+        <div
+          class="react-date-picker__wrapper"
+        >
+          <div
+            class="react-date-picker__inputGroup"
+          >
+            <input
+              max="2021-09-23"
+              min="2020-09-23"
+              name="test"
+              style="visibility: hidden; position: absolute; z-index: -999;"
+              type="date"
+              value=""
+            />
+            <input
+              autocomplete="off"
+              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
+              data-input="true"
+              inputmode="numeric"
+              max="12"
+              min="1"
+              name="month"
+              placeholder="--"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-date-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__day"
+              data-input="true"
+              inputmode="numeric"
+              max="31"
+              min="1"
+              name="day"
+              placeholder="--"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-date-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__year"
+              data-input="true"
+              inputmode="numeric"
+              max="2021"
+              min="2020"
+              name="year"
+              placeholder="----"
+              step="1"
+              type="number"
+              value=""
+            />
+          </div>
+          <button
+            class="react-date-picker__clear-button react-date-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-date-picker__clear-button__icon react-date-picker__button__icon"
+              height="19"
+              stroke="black"
+              stroke-width="2"
+              viewBox="0 0 19 19"
+              width="19"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <line
+                x1="4"
+                x2="15"
+                y1="4"
+                y2="15"
+              />
+              <line
+                x1="15"
+                x2="4"
+                y1="4"
+                y2="15"
+              />
+            </svg>
+          </button>
+          <button
+            class="react-date-picker__calendar-button react-date-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-date-picker__calendar-button__icon react-date-picker__button__icon"
+              height="19"
+              stroke="black"
+              stroke-width="2"
+              viewBox="0 0 19 19"
+              width="19"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                fill="none"
+                height="15"
+                width="15"
+                x="2"
+                y="2"
+              />
+              <line
+                x1="6"
+                x2="6"
+                y1="0"
+                y2="4"
+              />
+              <line
+                x1="13"
+                x2="13"
+                y1="0"
+                y2="4"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;
+exports[`FormInput has matching file input snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="form-group"
+    >
+      <div
+        id="test-error-scroll-target"
+        style="display: none;"
+      />
+      <div
+        class="custom-file file-input  "
+      >
+        <div>
+          <input
+            class="custom-file-input"
+            id="test"
+            meta="[object Object]"
+            name="test"
+            type="file"
+          />
+        </div>
+        <label
+          class="custom-file-label"
+        >
+          <div>
+            <span>
+              Choose A File...
+            </span>
+          </div>
+        </label>
+      </div>
+      <ul
+        class="list-group"
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;
+exports[`FormInput has matching select snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="form-group"
+    >
+      <div
+        id="test-error-scroll-target"
+        style="display: none;"
+      />
+      <div
+        class="react-select-input css-2b097c-container"
+        id="test"
+      >
+        <div
+          class=" css-150ye8w-control"
+        >
+          <div
+            class=" css-lbak6p-Component"
+          >
+            <div
+              class=" css-1osw1h9-placeholder"
+            >
+              Select...
+            </div>
+            <div
+              class="css-lp83hw-Component"
+            >
+              <div
+                class=""
+                style="display: inline-block;"
+              >
+                <input
+                  aria-autocomplete="list"
+                  autocapitalize="none"
+                  autocomplete="off"
+                  autocorrect="off"
+                  id="react-select-2-input"
+                  spellcheck="false"
+                  style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
+                  tabindex="0"
+                  type="text"
+                  value=""
+                />
+                <div
+                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class=" css-ny0e4k-Component"
+          >
+            <span
+              class=" css-1sl80az-indicatorSeparator"
+            />
+            <div
+              aria-hidden="true"
+              class=" css-augegj-indicatorContainer"
+            >
+              <svg
+                aria-hidden="true"
+                class="css-7ezgaa-Component"
+                focusable="false"
+                height="20"
+                viewBox="0 0 20 20"
+                width="20"
+              >
+                <path
+                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <input
+          name="test"
+          type="hidden"
+          value=""
+        />
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;
+exports[`FormInput has matching textarea snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="form-group"
+    >
+      <div
+        id="test-error-scroll-target"
+        style="display: none;"
+      />
+      <textarea
+        class="form-control"
+        id="test"
+        name="test"
+        type="textarea"
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/FormInput/form-input.scss CHANGED Viewed

@@ -1,9 +1,9 @@
-.invalid-feedback {
-  display: block;
-}
-.form-group {
-  input[disabled] {
-    cursor: not-allowed;
-  }
-}
+.invalid-feedback {
+  display: block;
+}
+.form-group {
+  input[disabled] {
+    cursor: not-allowed;
+  }
+}

package/src/FormInput/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import FormInput from './FormInput';
-export default FormInput;
+import FormInput from './FormInput';
+export default FormInput;