envoc-form 5.0.3 → 5.0.6

package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap

@@ -1,195 +1,195 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MultiStringSelectGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-multiple envoc-form-select-group envoc-form-group"
-    >
-      <div
-        id="favoritecolors-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="favoriteColors"
-      >
-        Favorite Color
-      </label>
-      <div
-        class="envoc-form-select-group css-b62m3t-container"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-5-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="react-select__control css-13cymwt-control"
-        >
-          <div
-            class="react-select__value-container react-select__value-container--is-multi css-16674sh-Component"
-          >
-            <div
-              class="react-select__placeholder css-1jqq78o-placeholder"
-              id="react-select-5-placeholder"
-            >
-              Select...
-            </div>
-            <div
-              class="react-select__input-container css-d9r47t-Component"
-              data-value=""
-            >
-              <input
-                aria-autocomplete="list"
-                aria-describedby="react-select-5-placeholder"
-                aria-expanded="false"
-                aria-haspopup="true"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                class="react-select__input"
-                id="favoriteColors"
-                role="combobox"
-                spellcheck="false"
-                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="react-select__indicators css-ny0e4k-Component"
-          >
-            <span
-              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
-            >
-              <svg
-                aria-hidden="true"
-                class="css-tj5bde-Svg"
-                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>
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
-
-exports[`SingleStringSelectGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-select-group envoc-form-group"
-    >
-      <div
-        id="favoritecolor-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="favoriteColor"
-      >
-        Favorite Color
-      </label>
-      <div
-        class="envoc-form-select-group css-b62m3t-container"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-3-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="react-select__control css-13cymwt-control"
-        >
-          <div
-            class="react-select__value-container css-16674sh-Component"
-          >
-            <div
-              class="react-select__placeholder css-1jqq78o-placeholder"
-              id="react-select-3-placeholder"
-            >
-              Select...
-            </div>
-            <div
-              class="react-select__input-container css-d9r47t-Component"
-              data-value=""
-            >
-              <input
-                aria-autocomplete="list"
-                aria-describedby="react-select-3-placeholder"
-                aria-expanded="false"
-                aria-haspopup="true"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                class="react-select__input"
-                id="favoriteColor"
-                role="combobox"
-                spellcheck="false"
-                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="react-select__indicators css-ny0e4k-Component"
-          >
-            <span
-              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
-            >
-              <svg
-                aria-hidden="true"
-                class="css-tj5bde-Svg"
-                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>
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiStringSelectGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="envoc-form-multiple envoc-form-select-group envoc-form-group"
+    >
+      <div
+        id="favoritecolors-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="favoriteColors"
+      >
+        Favorite Color
+      </label>
+      <div
+        class="envoc-form-select-group css-b62m3t-container"
+      >
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-5-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class="react-select__control css-13cymwt-control"
+        >
+          <div
+            class="react-select__value-container react-select__value-container--is-multi css-16674sh-Component"
+          >
+            <div
+              class="react-select__placeholder css-1jqq78o-placeholder"
+              id="react-select-5-placeholder"
+            >
+              Select...
+            </div>
+            <div
+              class="react-select__input-container css-d9r47t-Component"
+              data-value=""
+            >
+              <input
+                aria-autocomplete="list"
+                aria-describedby="react-select-5-placeholder"
+                aria-expanded="false"
+                aria-haspopup="true"
+                autocapitalize="none"
+                autocomplete="off"
+                autocorrect="off"
+                class="react-select__input"
+                id="favoriteColors"
+                role="combobox"
+                spellcheck="false"
+                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                tabindex="0"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+          <div
+            class="react-select__indicators css-ny0e4k-Component"
+          >
+            <span
+              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
+            />
+            <div
+              aria-hidden="true"
+              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
+            >
+              <svg
+                aria-hidden="true"
+                class="css-tj5bde-Svg"
+                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>
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;
+
+exports[`SingleStringSelectGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="envoc-form-select-group envoc-form-group"
+    >
+      <div
+        id="favoritecolor-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="favoriteColor"
+      >
+        Favorite Color
+      </label>
+      <div
+        class="envoc-form-select-group css-b62m3t-container"
+      >
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-3-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class="react-select__control css-13cymwt-control"
+        >
+          <div
+            class="react-select__value-container css-16674sh-Component"
+          >
+            <div
+              class="react-select__placeholder css-1jqq78o-placeholder"
+              id="react-select-3-placeholder"
+            >
+              Select...
+            </div>
+            <div
+              class="react-select__input-container css-d9r47t-Component"
+              data-value=""
+            >
+              <input
+                aria-autocomplete="list"
+                aria-describedby="react-select-3-placeholder"
+                aria-expanded="false"
+                aria-haspopup="true"
+                autocapitalize="none"
+                autocomplete="off"
+                autocorrect="off"
+                class="react-select__input"
+                id="favoriteColor"
+                role="combobox"
+                spellcheck="false"
+                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                tabindex="0"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+          <div
+            class="react-select__indicators css-ny0e4k-Component"
+          >
+            <span
+              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
+            />
+            <div
+              aria-hidden="true"
+              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
+            >
+              <svg
+                aria-hidden="true"
+                class="css-tj5bde-Svg"
+                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>
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/StandardFormActions.tsx

@@ -1,41 +1,41 @@
-import { MouseEventHandler } from 'react';
-import classNames from 'classnames';
-import { useFormikContext } from 'formik';
-import SubmitFormButton from './SubmitFormButton';
-import { FormDefaults } from './FormDefaults';
-
-export interface StandardFormActionsProps {
-  /** Allow the form to be submitted without any changes. By default this is not allowed. */
-  allowPristineSubmit?: boolean;
-  /** The cancel button's `onClick`.
-   * @defaultValue `window.history.back()`
-   */
-  handleCancel?: MouseEventHandler<HTMLButtonElement>;
-}
-
-/** Standard submit and cancel buttons. */
-export default function StandardFormActions({
-  allowPristineSubmit,
-  handleCancel,
-}: StandardFormActionsProps) {
-  const { isSubmitting } = useFormikContext();
-
-  return (
-    <>
-      <SubmitFormButton allowPristineSubmit={allowPristineSubmit} />
-      &nbsp;
-      <button
-        className={classNames(
-          FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'
-        )}
-        type="button"
-        disabled={isSubmitting}
-        onClick={handleCancel || goBack}>
-        Cancel
-      </button>
-    </>
-  );
-  function goBack() {
-    window.history.back();
-  }
-}
+import { MouseEventHandler } from 'react';
+import { clsx } from 'clsx';
+import { useFormikContext } from 'formik';
+import { FormDefaults } from './FormDefaults';
+import SubmitFormButton from './SubmitFormButton';
+
+export interface StandardFormActionsProps {
+  /** Allow the form to be submitted without any changes. By default this is not allowed. */
+  allowPristineSubmit?: boolean;
+  /** The cancel button's `onClick`.
+   * @defaultValue `window.history.back()`
+   */
+  handleCancel?: MouseEventHandler<HTMLButtonElement>;
+}
+
+/** Standard submit and cancel buttons. */
+export default function StandardFormActions({
+  allowPristineSubmit,
+  handleCancel,
+}: StandardFormActionsProps) {
+  const { isSubmitting } = useFormikContext();
+
+  return (
+    <>
+      <SubmitFormButton allowPristineSubmit={allowPristineSubmit} />
+      &nbsp;
+      <button
+        className={clsx(
+          FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'
+        )}
+        type="button"
+        disabled={isSubmitting}
+        onClick={handleCancel || goBack}>
+        Cancel
+      </button>
+    </>
+  );
+  function goBack() {
+    window.history.back();
+  }
+}

package/src/SubmitFormButton.tsx

@@ -1,54 +1,54 @@
-import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
-import { useFormikContext } from 'formik';
-import { FormDefaults } from './FormDefaults';
-
-export interface SubmitFormButtonProps
-  extends Omit<React.HTMLProps<HTMLButtonElement>, 'type'> {
-  /** Allow the form to be submitted without any changes. By default this is not allowed. */
-  allowPristineSubmit?: boolean;
-  /** Text to display on the button. Default text is 'Submit'. */
-  children?: React.ReactNode;
-}
-
-function SubmitFormButton(
-  {
-    allowPristineSubmit,
-    children,
-    disabled,
-    title,
-    className,
-    ...props
-  }: SubmitFormButtonProps,
-  ref: LegacyRef<HTMLButtonElement>
-) {
-  const { isSubmitting, dirty } = useFormikContext();
-  const preventSubmit = (!dirty && !allowPristineSubmit) || isSubmitting;
-  const buttonName = typeof children === 'string' ? children : 'Submit';
-  return (
-    <button
-      {...props}
-      ref={ref}
-      type="submit"
-      disabled={preventSubmit || disabled}
-      aria-label={buttonName}
-      title={
-        title || isSubmitting
-          ? 'Loading, please wait...'
-          : preventSubmit
-          ? "You haven't made any changes"
-          : ''
-      }
-      className={classNames(
-        FormDefaults.cssClassPrefix + 'submit-form-button',
-        className
-      )}>
-      {children || 'Submit'}
-    </button>
-  );
-}
-
-/** Generic submit button for forms. */
-export default React.forwardRef(
-  SubmitFormButton
-) as React.FunctionComponent<SubmitFormButtonProps>;
+import React, { LegacyRef } from 'react';
+import { clsx } from 'clsx';
+import { useFormikContext } from 'formik';
+import { FormDefaults } from './FormDefaults';
+
+export interface SubmitFormButtonProps
+  extends Omit<React.HTMLProps<HTMLButtonElement>, 'type'> {
+  /** Allow the form to be submitted without any changes. By default this is not allowed. */
+  allowPristineSubmit?: boolean;
+  /** Text to display on the button. Default text is 'Submit'. */
+  children?: React.ReactNode;
+}
+
+function SubmitFormButton(
+  {
+    allowPristineSubmit,
+    children,
+    disabled,
+    title,
+    className,
+    ...props
+  }: SubmitFormButtonProps,
+  ref: LegacyRef<HTMLButtonElement>
+) {
+  const { isSubmitting, dirty } = useFormikContext();
+  const preventSubmit = (!dirty && !allowPristineSubmit) || isSubmitting;
+  const buttonName = typeof children === 'string' ? children : 'Submit';
+  return (
+    <button
+      {...props}
+      ref={ref}
+      type="submit"
+      disabled={preventSubmit || disabled}
+      aria-label={buttonName}
+      title={
+        title || isSubmitting
+          ? 'Loading, please wait...'
+          : preventSubmit
+          ? "You haven't made any changes"
+          : ''
+      }
+      className={clsx(
+        FormDefaults.cssClassPrefix + 'submit-form-button',
+        className
+      )}>
+      {children || 'Submit'}
+    </button>
+  );
+}
+
+/** Generic submit button for forms. */
+export default React.forwardRef(
+  SubmitFormButton
+) as React.FunctionComponent<SubmitFormButtonProps>;