envoc-form 5.0.7 → 5.0.8

package/README.md

@@ -77,6 +77,7 @@ packages/envoc-form/src/AddressInput/AddressInput.tsx:15
 - [disabled](#disabled)
 - [helpText](#helptext)
 - [input](#input)
+- [isClearable](#isclearable)
 - [label](#label)
 - [meta](#meta)
 - [options](#options)
@@ -147,6 +148,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
 
 ___
 
+#### isClearable
+
+• `Optional` **isClearable**: `boolean`
+
+allows the select value to be cleared
+
+##### Inherited from
+
+Omit.isClearable
+
+##### Defined in
+
+packages/envoc-form/src/Select/SelectGroup.tsx:40
+
+___
+
 #### label
 
 • `Optional` **label**: `string`
@@ -1627,6 +1644,7 @@ packages/envoc-form/src/Input/MoneyInputGroup.tsx:12
 - [disabled](#disabled)
 - [helpText](#helptext)
 - [input](#input)
+- [isClearable](#isclearable)
 - [label](#label)
 - [meta](#meta)
 - [options](#options)
@@ -1697,6 +1715,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
 
 ___
 
+#### isClearable
+
+• `Optional` **isClearable**: `boolean`
+
+allows the select value to be cleared
+
+##### Inherited from
+
+[SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
+
+##### Defined in
+
+packages/envoc-form/src/Select/SelectGroup.tsx:40
+
+___
+
 #### label
 
 • `Optional` **label**: `string`
@@ -1792,6 +1826,7 @@ packages/envoc-form/src/Group.tsx:21
 - [disabled](#disabled)
 - [helpText](#helptext)
 - [input](#input)
+- [isClearable](#isclearable)
 - [label](#label)
 - [meta](#meta)
 - [options](#options)
@@ -1862,6 +1897,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
 
 ___
 
+#### isClearable
+
+• `Optional` **isClearable**: `boolean`
+
+allows the select value to be cleared
+
+##### Inherited from
+
+[SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
+
+##### Defined in
+
+packages/envoc-form/src/Select/SelectGroup.tsx:40
+
+___
+
 #### label
 
 • `Optional` **label**: `string`
@@ -2321,6 +2372,7 @@ Defines what is injected by a Field wrapper of some TRenderComponent
 - [disabled](#disabled)
 - [helpText](#helptext)
 - [input](#input)
+- [isClearable](#isclearable)
 - [label](#label)
 - [meta](#meta)
 - [multiple](#multiple)
@@ -2392,6 +2444,18 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
 
 ___
 
+#### isClearable
+
+• `Optional` **isClearable**: `boolean`
+
+allows the select value to be cleared
+
+##### Defined in
+
+packages/envoc-form/src/Select/SelectGroup.tsx:40
+
+___
+
 #### label
 
 • `Optional` **label**: `string`
@@ -2505,6 +2569,7 @@ packages/envoc-form/src/Group.tsx:21
 - [disabled](#disabled)
 - [helpText](#helptext)
 - [input](#input)
+- [isClearable](#isclearable)
 - [label](#label)
 - [meta](#meta)
 - [options](#options)
@@ -2575,6 +2640,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
 
 ___
 
+#### isClearable
+
+• `Optional` **isClearable**: `boolean`
+
+allows the select value to be cleared
+
+##### Inherited from
+
+Omit.isClearable
+
+##### Defined in
+
+packages/envoc-form/src/Select/SelectGroup.tsx:40
+
+___
+
 #### label
 
 • `Optional` **label**: `string`
@@ -2799,6 +2880,7 @@ packages/envoc-form/src/Form/ServerErrorContext.ts:9
 - [disabled](#disabled)
 - [helpText](#helptext)
 - [input](#input)
+- [isClearable](#isclearable)
 - [label](#label)
 - [meta](#meta)
 - [options](#options)
@@ -2869,6 +2951,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
 
 ___
 
+#### isClearable
+
+• `Optional` **isClearable**: `boolean`
+
+allows the select value to be cleared
+
+##### Inherited from
+
+[SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
+
+##### Defined in
+
+packages/envoc-form/src/Select/SelectGroup.tsx:40
+
+___
+
 #### label
 
 • `Optional` **label**: `string`
@@ -2964,6 +3062,7 @@ packages/envoc-form/src/Group.tsx:21
 - [disabled](#disabled)
 - [helpText](#helptext)
 - [input](#input)
+- [isClearable](#isclearable)
 - [label](#label)
 - [meta](#meta)
 - [options](#options)
@@ -3034,6 +3133,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
 
 ___
 
+#### isClearable
+
+• `Optional` **isClearable**: `boolean`
+
+allows the select value to be cleared
+
+##### Inherited from
+
+[SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
+
+##### Defined in
+
+packages/envoc-form/src/Select/SelectGroup.tsx:40
+
+___
+
 #### label
 
 • `Optional` **label**: `string`
@@ -4627,7 +4742,7 @@ Generic select dropdown. Uses [react-select](https://react-select.com/home).
 
 #### Defined in
 
-packages/envoc-form/src/Select/SelectGroup.tsx:43
+packages/envoc-form/src/Select/SelectGroup.tsx:45
 
 ___
 

package/es/Select/SelectGroup.d.ts

@@ -21,7 +21,9 @@ export interface SelectGroupProps<TValue> extends InjectedFieldProps<TValue | un
     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;
 }
 /** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
-export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
+export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, isClearable, label, helpText, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

package/es/Select/SelectGroup.js

@@ -29,7 +29,7 @@ import Group from '../Group';
 /** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
 export default function SelectGroup(_a) {
     var _b;
-    var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder"]);
+    var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, isClearable = _a.isClearable, label = _a.label, helpText = _a.helpText, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder", "isClearable", "label", "helpText"]);
     var effectiveOptions = !options
         ? []
         : Array.isArray(options)
@@ -43,17 +43,17 @@ export default function SelectGroup(_a) {
                     ? options.resp
                     : [];
     var isLoading = (options && 'loading' in options && options.loading) || false;
-    return (_jsx(Group, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: clsx(className, (_b = {},
+    return (_jsx(Group, { input: input, meta: meta, label: label, helpText: helpText, required: required, disabled: disabled, className: clsx(className, (_b = {},
             _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple,
             _b[FormDefaults.cssClassPrefix + 'loading'] = isLoading,
-            _b), FormDefaults.cssClassPrefix + 'select-group'), children: _jsx(ReactSelect, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
+            _b), FormDefaults.cssClassPrefix + 'select-group'), children: _jsx(ReactSelect, __assign({}, rest, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
                 if (multiple === true) {
                     input.onChange(e === null || e === void 0 ? void 0 : e.map(function (x) { return x.value; }));
                 }
                 else {
                     input.onChange(e === null || e === void 0 ? void 0 : e.value);
                 }
-            }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: clsx(className, FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
+            }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: clsx(className, FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder, isClearable: isClearable })) }));
     function getValue() {
         if (multiple) {
             return effectiveOptions.filter(function (o) {

package/lib/Select/SelectGroup.d.ts

@@ -21,7 +21,9 @@ export interface SelectGroupProps<TValue> extends InjectedFieldProps<TValue | un
     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;
 }
 /** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
-export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
+export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, isClearable, label, helpText, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Select/SelectGroup.js

@@ -34,7 +34,7 @@ var Group_1 = __importDefault(require("../Group"));
 /** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
 function SelectGroup(_a) {
     var _b;
-    var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder"]);
+    var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, isClearable = _a.isClearable, label = _a.label, helpText = _a.helpText, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder", "isClearable", "label", "helpText"]);
     var effectiveOptions = !options
         ? []
         : Array.isArray(options)
@@ -48,17 +48,17 @@ function SelectGroup(_a) {
                     ? options.resp
                     : [];
     var isLoading = (options && 'loading' in options && options.loading) || false;
-    return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: (0, clsx_1.clsx)(className, (_b = {},
+    return ((0, jsx_runtime_1.jsx)(Group_1.default, { input: input, meta: meta, label: label, helpText: helpText, required: required, disabled: disabled, className: (0, clsx_1.clsx)(className, (_b = {},
             _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'multiple'] = multiple,
             _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'loading'] = isLoading,
-            _b), FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), children: (0, jsx_runtime_1.jsx)(react_select_1.default, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
+            _b), FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), children: (0, jsx_runtime_1.jsx)(react_select_1.default, __assign({}, rest, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
                 if (multiple === true) {
                     input.onChange(e === null || e === void 0 ? void 0 : e.map(function (x) { return x.value; }));
                 }
                 else {
                     input.onChange(e === null || e === void 0 ? void 0 : e.value);
                 }
-            }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
+            }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder, isClearable: isClearable })) }));
     function getValue() {
         if (multiple) {
             return effectiveOptions.filter(function (o) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "envoc-form",
-  "version": "5.0.7",
+  "version": "5.0.8",
   "description": "Envoc form components",
   "keywords": [
     "react-component",
@@ -37,7 +37,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "date-fns": "^2.22.1",
-    "envoc-request": "^5.0.7",
+    "envoc-request": "^5.0.8",
     "lru-cache": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-date-picker": "^8.2.0",

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

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

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"