@digigov/form 1.2.0-a7ffb5dc → 2.0.0-462194bf

package/inputs/Input/index.mdx

@@ -1,8 +1,95 @@
 ---
 title: Input
-parent: docs/ui/components
 ---
+ 
+# Input
+
+
+
+The input element of type `string` is used to create interactive controls for web-based forms in order to accept data from the user; 
+a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="Default.tsx"
+/>
+
+### Boolean
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="Boolean.tsx"
+/>
+### AFM
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="AFM.tsx"
+/>
+
+### IBAN
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="IBAN.tsx"
+/>
+
+### Integer
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="Default.tsx"
+/>
+
+### Landline number
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="LandlineNumber.tsx"
+/>
+
+### Mobile phone 
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="MobilePhone.tsx"
+/>
+
+### Phone number
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="PhoneNumber.tsx"
+/>
+
+### Postal code 
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="PostalCode.tsx"
+/>
+
+### Text with character limit 
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="TextWithCharacterLimit.tsx"
+/>
+
+
 
-## Example
 
-<Input type="text" />

package/inputs/OtpInput/index.d.ts

@@ -1,6 +1,13 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const RE_DIGIT: RegExp;
 export declare const REMOVE_SPACES: RegExp;
+export declare function useOtp(onChange: any, maxLength: any): {
+    otpValues: string[];
+    handleOtpChange: (e: React.ChangeEvent<HTMLInputElement>, idx: number) => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>, idx: number) => void;
+    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
+};
 export declare const OtpInput: ({ name, maxLength, ...props }: {
     [x: string]: any;
     name: any;

package/inputs/OtpInput/index.js

@@ -8,7 +8,7 @@ import React, { useState, useCallback } from 'react';
 import SingleCharacterInputs, { SingleCharacterInput } from '@digigov/ui/form/SingleCharacterInputs';
 export var RE_DIGIT = new RegExp(/^\d+$/);
 export var REMOVE_SPACES = new RegExp(/\s+/g);
-function useOtp(onChange, maxLength) {
+export function useOtp(onChange, maxLength) {
   var _useState = useState(Array(maxLength).fill('')),
     _useState2 = _slicedToArray(_useState, 2),
     otpValues = _useState2[0],

package/inputs/OtpInput/index.mdx

@@ -0,0 +1,23 @@
+---
+title: OTP Input
+---
+ 
+# OTP input
+
+
+
+A one-time password (OTP) input element of type `otp`, also known as a one-time PIN, one-time authorization code (OTAC) or dynamic password, is a password that is valid for only one login session or transaction, 
+on a computer system or other digital device.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/OtpInput"
+  story="Default.tsx"
+/>
+
+
+

package/inputs/Radio/__stories__/Conditional/index.js

@@ -89,4 +89,5 @@ export var Conditional = function Conditional() {
     },
     fields: fields
   }, _ref, _ref2);
-};
+};
+export default Conditional;

package/inputs/Radio/__stories__/Conditional.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const Conditional: () => JSX.Element;
+export default Conditional;

package/inputs/Radio/index.js

@@ -5,7 +5,7 @@ var _excluded = ["name", "control", "register", "extra", "disabled"],
 import React from 'react';
 import { useWatch } from 'react-hook-form';
 import { Field } from '@digigov/form';
-import { RadioConditional } from '@digigov/react-core';
+import { RadioConditional } from '@digigov/react-core/RadioConditional';
 import Hint from '@digigov/react-core/Hint';
 import RadioContainer from '@digigov/react-core/RadioContainer';
 import RadioItem from '@digigov/react-core/RadioItem';

package/inputs/Radio/index.mdx

@@ -0,0 +1,33 @@
+---
+title: Radio
+---
+ 
+# Radio
+Input element of type `radio` are generally used in radio groups—collections of radio buttons describing a set of related options.
+Radios are used to let a user select one option of a limited number of choices.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Radio"
+  story="Default.tsx"
+/>
+
+### Conditional
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Radio"
+  story="Conditional.tsx"
+/>
+
+### With divider
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Radio"
+  story="WithDivider.tsx"
+/>

package/inputs/Select/index.mdx

@@ -0,0 +1,17 @@
+---
+title: Select
+---
+ 
+# Select
+
+The select element represents a control that provides a menu of options.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Select"
+  story="Default.tsx"
+/>

package/lazy.d.ts

@@ -8,7 +8,7 @@ declare namespace _default {
     let FieldsetWithContext: import("react").LazyExoticComponent<import("react").FC<{
         name: string;
     }>>;
-    let Fieldset: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<Pick<import("@digigov/ui").FieldsetProps, "onBlur" | "onChange" | "onSubmit" | "key" | "name" | "defaultValue" | "as" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "hidden" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "form" | "slot" | "style" | "title" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled"> & import("react").RefAttributes<HTMLFieldSetElement>>>;
+    let Fieldset: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<Pick<import("@digigov/ui").FieldsetProps, "onBlur" | "onChange" | "onSubmit" | "key" | "name" | "defaultValue" | "as" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "p" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "hidden" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "form" | "slot" | "style" | "title" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled"> & import("react").RefAttributes<HTMLFieldSetElement>>>;
     let FieldsetBody: import("react").LazyExoticComponent<import("react").FC<import("./Fieldset/types").FieldsetBodyProps>>;
     let FieldsetCaption: import("react").LazyExoticComponent<import("react").FC<import("./Fieldset/types").FieldsetCaptionProps>>;
     let FieldsetLabel: import("react").LazyExoticComponent<import("react").FC<import("./Fieldset/types").FieldsetLabelProps>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/form",
-  "version": "1.2.0-a7ffb5dc",
+  "version": "2.0.0-462194bf",
   "description": "@digigov form builder",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -15,11 +15,11 @@
     "dayjs": "1.10.4",
     "@hookform/resolvers": "2.9.6",
     "publint": "0.1.8",
-    "@digigov/react-icons": "1.2.0-a7ffb5dc"
+    "@digigov/react-icons": "2.0.0-462194bf"
   },
   "peerDependencies": {
-    "@digigov/ui": "1.2.0-a7ffb5dc",
-    "@digigov/react-core": "1.3.0-a7ffb5dc",
+    "@digigov/ui": "2.0.0-462194bf",
+    "@digigov/react-core": "2.0.0-462194bf",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/src/Field/FieldBase.tsx

@@ -41,6 +41,7 @@ export const FieldBase: React.FC<FieldBaseProps> = (props) => {
             return (
               <Component
                 {...field}
+                ref={undefined}
                 defaultValue={defaultValue}
                 extra={extra}
                 error={!!error}

package/src/Field/utils.ts

@@ -1,4 +1,4 @@
-import { lazy, useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import {
   CalculatedField,
   FieldComponentRegistry,
@@ -15,11 +15,9 @@ import Input from '@digigov/form/inputs/Input';
 import OtpInput from '@digigov/form/inputs/OtpInput';
 import Radio from '@digigov/form/inputs/Radio';
 import Select from '@digigov/form/inputs/Select';
+import AutoCompleteInput from '@digigov/form/inputs/AutoCompleteInput';
 import { FieldSpec } from '@digigov/form/types';
 
-const AutoCompleteInput = lazy(() =>
-  import('@digigov/form/inputs/AutoCompleteInput')
-);
 
 const FIELD_COMPONENTS: FieldComponentRegistry = {
   text: {
@@ -66,6 +64,7 @@ const ALTERNATIVE_COMPONENTS: FieldComponentRegistry = {
   AutoComplete: {
     component: AutoCompleteInput,
     controlled: true,
+    wrapper: 'fieldset'
   },
 };
 
@@ -93,6 +92,7 @@ export function calculateField(
       ALTERNATIVE_COMPONENTS[field.extra.component]?.controlled || false;
     calculatedField.component =
       ALTERNATIVE_COMPONENTS[field.extra.component].component;
+      calculatedField.wrapper = ALTERNATIVE_COMPONENTS[field.extra.component].wrapper;
   } else if (
     !field.component &&
     field.type &&

package/src/FieldObject/index.tsx

@@ -5,7 +5,7 @@ import { CalculatedField, FieldProps } from '@digigov/form/Field/types';
 import { calculateField } from '@digigov/form/Field/utils';
 import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
 import { FieldSpec } from '@digigov/form/types';
-import { FieldsetLegend } from '@digigov/react-core';
+import { FieldsetLegend } from '@digigov/react-core/FieldsetLegend';
 import { useTranslation } from '@digigov/ui/i18n';
 
 export interface FieldObjectProps extends Omit<FieldProps, 'key'> {

package/src/MultiplicityField/__stories__/PreviewDisplay.tsx

@@ -83,7 +83,7 @@ export const PreviewDisplay = () => (
         <Card variant="border" borderColor="dark">
           <CardHeading>Συνυπογράφοντας 1</CardHeading>
           <CardContent>
-            <SummaryList>
+            <SummaryList noLastBorder marginBottom={0}>
               {fields &&
                 fields.map((field, index) => {
                   return (
@@ -99,7 +99,7 @@ export const PreviewDisplay = () => (
         <Card variant="border" borderColor="dark">
           <CardHeading>Συνυπογράφοντας 2</CardHeading>
           <CardContent>
-            <SummaryList>
+            <SummaryList noLastBorder marginBottom={0}>
               {fields &&
                 fields.map((field, index) => {
                   return (

package/src/MultiplicityField/index.tsx

@@ -5,14 +5,13 @@ import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import FieldObject from '@digigov/form/FieldObject';
 import AddObjects from '@digigov/form/MultiplicityField/add-objects';
-import {
-  Card,
-  CardContent,
-  CardAction,
-  Button,
-  Heading,
-  CardHeading,
-} from '@digigov/react-core';
+import { Card } from '@digigov/react-core/Card';
+import { CardContent } from '@digigov/react-core/CardContent';
+import { CardAction } from '@digigov/react-core/CardAction';
+import { Button } from '@digigov/react-core/Button';
+import { Heading } from '@digigov/react-core/Heading';
+import { CardHeading } from '@digigov/react-core/CardHeading';
+
 
 export interface MultiplicityProps
   extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {

package/src/inputs/AutoCompleteInput/AutoComplete.stories.js

@@ -5,3 +5,4 @@ export default {
   displayName: 'AutoCompleteInput',
 };
 export * from '@digigov/form/inputs/AutoCompleteInput/__stories__/Default';
+export * from '@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple';

package/src/inputs/AutoCompleteInput/__stories__/Default.tsx

@@ -1,13 +1,21 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import { Field } from '@digigov/form/Field';
 import FormBuilder from '@digigov/form/FormBuilder';
 import { FieldSpec } from '@digigov/form/types';
-import { results } from '@digigov/ui/form/AutoComplete/utils';
 import Button from '@digigov/ui/form/Button';
+
+const results = [
+  'Αμερική',
+  'Ασία',
+  'Αυστραλία',
+  'Αφρική',
+  'Ευρώπη',
+];
+
 const fields: FieldSpec[] = [
   {
     key: 'autocomplete',
-    label: { primary: 'An autocomplete field' },
+    label: { primary: 'Επιλέξτε ήπειρο' },
     required: true,
     type: 'choice:single',
     extra: {
@@ -16,7 +24,7 @@ const fields: FieldSpec[] = [
         return {
           label: {
             primary: r,
-            secondary: `Country: ${r}`,
+            secondary: `'Ηπειρος: ${r}`,
           },
           value: r.toLowerCase(),
         };
@@ -28,18 +36,19 @@ const fields: FieldSpec[] = [
 const initialValues = {};
 
 export const Default = () => (
-  <Suspense fallback={<div>loading</div>}>
-    <FormBuilder
-      fields={fields}
-      onSubmit={(data) => {
-        console.log(data);
-      }}
-      initial={initialValues}
-    >
-      {fields.map((field) => (
-        <Field key={field.key} name={field.key} />
-      ))}
-      <Button type="submit">Submit</Button>
-    </FormBuilder>
-  </Suspense>
+
+  <FormBuilder
+    fields={fields}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+    initial={initialValues}
+  >
+    {fields.map((field) => (
+      <Field key={field.key} name={field.key} />
+    ))}
+    <Button type="submit">Submit</Button>
+  </FormBuilder>
+
 );
+export default Default;

package/src/inputs/AutoCompleteInput/__stories__/Multiple.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Field } from '@digigov/form/Field';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { FieldSpec } from '@digigov/form/types';
+import Button from '@digigov/ui/form/Button';
+
+const results = [
+  'Αμερική',
+  'Ασία',
+  'Αυστραλία',
+  'Αφρική',
+  'Ευρώπη',
+];
+
+const fields: FieldSpec[] = [
+  {
+    key: 'autocomplete',
+    label: { primary: 'Επιλέξτε ήπειρο' },
+    required: true,
+    type: 'choice:multiple',
+    extra: {
+      component: 'AutoComplete',
+      multiple: true,
+      options: results.map((r) => {
+        return {
+          label: {
+            primary: r,
+            secondary: `Ήπειρος: ${r}`,
+          },
+          value: r.toLowerCase(),
+        };
+      }),
+    },
+  },
+];
+
+const initialValues = {};
+
+export const Multiple = () => (
+  <FormBuilder
+    fields={fields}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+    initial={initialValues}
+  >
+    {fields.map((field) => (
+      <Field key={field.key} name={field.key} />
+    ))}
+    <Button type="submit">Submit</Button>
+  </FormBuilder>
+);
+
+export default Multiple;

package/src/inputs/AutoCompleteInput/index.mdx

@@ -0,0 +1,29 @@
+---
+title: AutoComplete Input 
+---
+ 
+# AutoComplete input
+
+AutoCompleteInput element is an enhanced version of text input that shows suggested 
+options as the users type and also let them select an option from the list.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/AutoCompleteInput"
+  story="Default.tsx"
+/>
+
+### Display multiple values
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/AutoCompleteInput"
+  story="Multiple.tsx"
+/>
+
+
+

package/src/inputs/AutoCompleteInput/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { Hint } from '@digigov/react-core';
+import { Hint } from '@digigov/react-core/Hint';
 import UIAutoComplete, {
   AutoCompleteProps as UIAutoCompleteProps,
 } from '@digigov/ui/form/AutoComplete';
@@ -23,14 +23,15 @@ export interface AutoCompleteInputProps
   extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'extra'> {
   extra: AutoCompleteInputExtra;
   value: string;
-  onChange: (v: string) => void;
+  onChange: (v: string | string[] | undefined) => void;
 }
 
 export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   name,
-  extra: { options },
+  extra: { options, multiple },
   onChange,
   value,
+  error,
   ...props
 }) => {
   const suggest = useCallback(function suggest(
@@ -40,24 +41,29 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
     syncResults(
       query
         ? options.filter(function (option) {
-            return (
-              `${option.value} ${option.label?.primary || ''} ${
-                option.label?.secondary || ''
+          return (
+            `${option.value} ${option.label?.primary || ''} ${option.label?.secondary || ''
               }`
-                .toLowerCase()
-                .indexOf(query.toLowerCase()) !== -1
-            );
-          })
-        : []
+              .toLowerCase()
+              .indexOf(query.toLowerCase()) !== -1
+          );
+        })
+        : options
     );
   },
-  []);
+    [options]);
 
   return (
     <UIAutoComplete
+      multiple={multiple}
       source={suggest}
       onConfirm={(value) => {
-        onChange(value.value);
+        if (Array.isArray(value)) {
+          const selectedValues = value.map(item => item.value);
+          selectedValues.length > 0 ? onChange(selectedValues) : onChange(undefined);
+        } else {
+          onChange(value.value);
+        }
       }}
       templates={{
         suggestion({ label, value }) {
@@ -75,11 +81,15 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
           return option.label.primary || option.value;
         },
       }}
-      {...props}
+      {...{
+        ...props,
+        reset: undefined,
+        required: undefined,
+      }}
       id={`${name}-id`}
       defaultValue={value}
     />
   );
 };
 
-export default AutoCompleteInput;
+export default AutoCompleteInput;

package/src/inputs/Checkboxes/__stories__/Conditional.tsx

@@ -6,7 +6,6 @@ const fields: FieldSpec[] = [
   {
     key: 'landline',
     type: 'phone_number',
-
     label: {
       secondary: 'Εισάγετε το νούμερο του σταθερού σας τηλεφώνου.',
     },
@@ -24,7 +23,6 @@ const fields: FieldSpec[] = [
   {
     key: 'mobile_phone',
     type: 'mobile_phone',
-
     label: {
       secondary: 'Εισάγετε το νούμερο του κινητού σας τηλεφώνου.',
     },
@@ -41,7 +39,6 @@ const fields: FieldSpec[] = [
   },
   {
     key: 'email',
-
     type: 'email',
     label: {
       secondary: 'Εισάγετε την διεύθυνση του ηλεκτρονικού σας ταχυδρομείου.',
@@ -98,3 +95,5 @@ export const Conditional = () => (
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );
+
+export default Conditional;