envoc-form 5.0.7 → 5.0.9

package/src/DateTimePicker/__snapshots__/DateTimePicker.test.tsx.snap

@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StringDateTimePickerGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="envoc-form-date-time-picker envoc-form-group"
+    >
+      <div
+        id="createddatetime-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="createdDateTime"
+      >
+        Created Date Time
+      </label>
+      <div
+        class="react-datetime-picker react-datetime-picker--closed react-datetime-picker--enabled envoc-form-date-time-picker"
+        id="createdDateTime"
+      >
+        <div
+          class="react-datetime-picker__wrapper"
+        >
+          <div
+            class="react-datetime-picker__inputGroup"
+          >
+            <input
+              hidden=""
+              max="2023-09-23T00:00"
+              min="2022-06-22T00:00"
+              name="datetime"
+              step="60"
+              style="visibility: hidden; position: absolute; z-index: -999;"
+              type="datetime-local"
+              value=""
+            />
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__month"
+              data-input="true"
+              inputmode="numeric"
+              max="12"
+              min="1"
+              name="month"
+              placeholder="mm"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__day"
+              data-input="true"
+              inputmode="numeric"
+              max="31"
+              min="1"
+              name="day"
+              placeholder="dd"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__year"
+              data-input="true"
+              inputmode="numeric"
+              max="2023"
+              min="2022"
+              name="year"
+              placeholder="yyyy"
+              step="1"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+               
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__hour"
+              data-input="true"
+              inputmode="numeric"
+              max="12"
+              min="1"
+              name="hour12"
+              placeholder="--"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+              :
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__minute"
+              data-input="true"
+              inputmode="numeric"
+              max="59"
+              min="0"
+              name="minute"
+              placeholder="--"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+               
+            </span>
+            <select
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__amPm"
+              data-input="true"
+              data-select="true"
+              name="amPm"
+            >
+              <option
+                value=""
+              >
+                --
+              </option>
+              <option
+                value="am"
+              >
+                AM
+              </option>
+              <option
+                value="pm"
+              >
+                PM
+              </option>
+            </select>
+          </div>
+          <button
+            class="react-datetime-picker__clear-button react-datetime-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-datetime-picker__clear-button__icon react-datetime-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
+            aria-expanded="false"
+            class="react-datetime-picker__calendar-button react-datetime-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-datetime-picker__calendar-button__icon react-datetime-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>
+`;

package/src/Input/InputGroup.tsx

@@ -32,6 +32,7 @@ function InputGroup<TValue>(
     onChange,
     value,
     icon,
+    type,
     ...rest
   }: InputGroupProps<TValue>,
   ref: LegacyRef<HTMLInputElement>
@@ -55,6 +56,8 @@ function InputGroup<TValue>(
         onChange={onChange}
         ref={ref}
         className={clsx(className, FormDefaults.cssClassPrefix + 'input-group')}
+        disabled={disabled}
+        type={disabled ? 'text' : type}
       />
     </Group>
   );

package/src/Select/SelectGroup.tsx

@@ -36,6 +36,8 @@ export interface SelectGroupProps<TValue>
   multiple: TValue extends Array<any> ? true : false;
   /** Text diplayed when no value is selected. */
   placeholder?: string;
+  /** allows the select value to be cleared */
+  isClearable?: boolean;
 }
 
 // TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
@@ -49,6 +51,9 @@ export default function SelectGroup<TValue>({
   options,
   multiple,
   placeholder,
+  isClearable,
+  label,
+  helpText,
   ...rest
 }: SelectGroupProps<TValue>) {
   const effectiveOptions: Partial<SelectOption<TValue>>[] = !options
@@ -69,9 +74,10 @@ export default function SelectGroup<TValue>({
 
   return (
     <Group
-      {...rest}
       input={input}
       meta={meta}
+      label={label}
+      helpText={helpText}
       required={required}
       disabled={disabled}
       className={clsx(
@@ -86,6 +92,7 @@ export default function SelectGroup<TValue>({
         Partial<SelectOption<TValue>>,
         TValue extends Array<any> ? true : false
       >
+        {...rest}
         inputId={input.id}
         isMulti={multiple}
         isDisabled={disabled}
@@ -108,6 +115,7 @@ export default function SelectGroup<TValue>({
         menuPortalTarget={document.body}
         menuPlacement="auto"
         placeholder={placeholder}
+        isClearable={isClearable}
       />
     </Group>
   );

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

@@ -20,6 +20,7 @@ exports[`BooleanSelectGroup has matching snapshot 1`] = `
       </label>
       <div
         class="envoc-form-select-group css-b62m3t-container"
+        id="allowLogin"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"

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

@@ -20,6 +20,7 @@ exports[`MultiNumberSelectGroup has matching snapshot 1`] = `
       </label>
       <div
         class="envoc-form-select-group css-b62m3t-container"
+        id="userRoles"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
@@ -117,6 +118,7 @@ exports[`SingleNumberSelectGroup has matching snapshot 1`] = `
       </label>
       <div
         class="envoc-form-select-group css-b62m3t-container"
+        id="favoriteNumber"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"

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

@@ -20,6 +20,7 @@ exports[`MultiStringSelectGroup has matching snapshot 1`] = `
       </label>
       <div
         class="envoc-form-select-group css-b62m3t-container"
+        id="favoriteColors"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
@@ -117,6 +118,7 @@ exports[`SingleStringSelectGroup has matching snapshot 1`] = `
       </label>
       <div
         class="envoc-form-select-group css-b62m3t-container"
+        id="favoriteColor"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"

package/src/__Tests__/FormTestBase.tsx

@@ -58,6 +58,7 @@ export interface PersonDto {
   favoriteColor?: string;
   favoriteColors?: string[];
   favoriteNames?: string[];
+  createdDateTime?: string;
   allowLogin?: boolean;
   userRoles?: number[];
   profileImage?: any;

package/src/index.ts

@@ -27,6 +27,13 @@ export type { StringDatePickerGroupProps } from './DatePicker/StringDatePickerGr
 export { default as StringDateOnlyPickerGroup } from './DatePicker/StringDateOnlyPickerGroup';
 export type { StringDateOnlyPickerGroupProps } from './DatePicker/StringDateOnlyPickerGroup';
 
+// DateTime
+export { default as DateTimePickerGroup } from './DateTimePicker/DateTimePickerGroup';
+export type { DateTimePickerGroupProps } from './DateTimePicker/DateTimePickerGroup';
+
+export { default as StringDateTimePickerGroup } from './DateTimePicker/StringDateTimePickerGroup';
+export type { StringDateTimePickerGroupProps } from './DateTimePicker/StringDateTimePickerGroup';
+
 // Field
 export { default as Field } from './Field/Field';
 export type { FieldProps } from './Field/Field';