@digigov/form 0.8.3 → 0.8.5-alpha

package/esm/inputs/Radio/__stories__/Default.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: 'string',
+    name: "string",
+    type: "choice:single",
+    required: true,
+    label: {
+      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
+    },
+    extra: {
+      options: [{
+        label: {
+          primary: 'Ελλάδα'
+        },
+        value: 'greece'
+      }, {
+        label: {
+          primary: 'Κύπρος'
+        },
+        value: 'cyprus'
+      }, {
+        label: {
+          primary: 'Χώρα της Ευρωπαϊκής Ένωσης'
+        },
+        value: 'eu'
+      }, {
+        label: {
+          primary: 'Ηνωμένες Πολιτείες της Αμερικής'
+        },
+        value: 'usa'
+      }]
+    }
+  }), _ref);
+};
+export default Default;

package/esm/inputs/Radio/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "control", "extra", "disabled"];
+var _excluded = ["name", "control", "register", "extra", "disabled"];
 import React from 'react';
 import Radio from '@digigov/react-core/Radio';
 import RadioItem from '@digigov/react-core/RadioItem';
@@ -10,6 +10,7 @@ import Hint from '@digigov/react-core/Hint';
 export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
   var name = _ref.name,
       control = _ref.control,
+      register = _ref.register,
       _ref$extra = _ref.extra,
       options = _ref$extra.options,
       className = _ref$extra.className,
@@ -35,7 +36,7 @@ export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
         selected = _ref2.selected;
     return /*#__PURE__*/React.createElement("div", {
       key: "".concat(name, ".").concat(v)
-    }, /*#__PURE__*/React.createElement(RadioItem, _extends({
+    }, /*#__PURE__*/React.createElement(RadioItem, _extends({}, register(name), {
       value: v,
       disabled: disabled || optionDisabled
     }, _extends({}, props, {

package/esm/inputs/Select/Select.stories.js

@@ -0,0 +1,6 @@
+import Select from '@digigov/form/inputs/Select';
+export default {
+  title: 'Digigov Form/inputs/Select',
+  component: Select
+};
+export * from '@digigov/form/inputs/Select/__stories__/Default';

package/esm/inputs/Select/__stories__/Default.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: 'string',
+    name: "string",
+    type: "choice:single",
+    required: true,
+    label: {
+      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
+    },
+    extra: {
+      component: 'Select',
+      options: [{
+        label: {
+          primary: ''
+        },
+        value: ''
+      }, {
+        label: {
+          primary: 'Ελλάδα'
+        },
+        value: 'greece'
+      }, {
+        label: {
+          primary: 'Κύπρος'
+        },
+        value: 'cyprus'
+      }, {
+        label: {
+          primary: 'Χώρα της Ευρωπαϊκής Ένωσης'
+        },
+        value: 'eu'
+      }, {
+        label: {
+          primary: 'Ηνωμένες Πολιτείες της Αμερικής'
+        },
+        value: 'usa'
+      }]
+    }
+  }), _ref);
+};
+export default Default;

package/esm/installation.mdx

@@ -0,0 +1,72 @@
+---
+id: Installation
+title: Installing Digigov Form
+sidebar_label: Installation
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+import LeadText from "@site/src/components/LeadText";
+
+<LeadText>
+This page will help you install Digigov Form depending on the framework that you
+use and the application architecture.
+</LeadText>
+
+We assume that your stack uses some of the following tools.
+
+* React v16 or later
+* Nextjs or create-react-app to run your code
+* Digigov CSS, as a CSS import or as Tailwind plugin 
+
+## Using create-digigov-app
+
+We highly recommend using `create-digigov-app`. Our scaffolder was created to save development teams time and effort. This way
+everything you need is already configured.
+
+ If you choose to use our scaffolder tool, make sure you follow this
+[guide](/docs/building-apps) first, if you haven't already done so.
+
+Then you just install the `@digigov/form` package from NPM.
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+    <CodeBlock>
+      npm install @digigov/form --save
+    </CodeBlock>
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock>
+      yarn add @digigov/form
+    </CodeBlock>
+  </TabItem>
+</Tabs>
+
+## Using custom configuration
+
+This method is not recommended and you should proceed at your own risk. For
+Digigov Form to work properly, it is essential to do some configuration.
+
+* A working React application, ideally [Nextjs](https://nextjs.org/) or [Create
+  React App](https://create-react-app.dev/)
+* You should already have [installed and configured Digigov
+  CSS](https://guide.services.gov.gr/docs/installation)
+
+If you meet these prerequisites, now it is time to install the dependencies.
+
+Assuming that you have not used any of the Digigov libraries before, go ahead
+and install `@digigov/form` and it's dependencies.
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+    <CodeBlock>
+      npm install @digigov/form @digigov/ui @digigov/react-core --save
+    </CodeBlock>
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock>
+      yarn add @digigov/form @digigov/ui @digigov/react-core
+    </CodeBlock>
+  </TabItem>
+</Tabs>

package/esm/registry.js

@@ -0,0 +1,129 @@
+import * as _digigov_form_Field_FieldBase from '@digigov/form/Field/FieldBase';
+import * as _digigov_form_Field_FieldConditional from '@digigov/form/Field/FieldConditional';
+import * as _digigov_form_Field_FieldContainer from '@digigov/form/Field/FieldContainer';
+import * as _digigov_form_Field from '@digigov/form/Field';
+import * as _digigov_form_Field_types from '@digigov/form/Field/types';
+import * as _digigov_form_Field_utils from '@digigov/form/Field/utils';
+import * as _digigov_form_FieldArray from '@digigov/form/FieldArray';
+import * as _digigov_form_FieldObject from '@digigov/form/FieldObject';
+import * as _digigov_form_Fieldset_FieldsetWithContext from '@digigov/form/Fieldset/FieldsetWithContext';
+import * as _digigov_form_Fieldset from '@digigov/form/Fieldset';
+import * as _digigov_form_Fieldset_types from '@digigov/form/Fieldset/types';
+import * as _digigov_form_FormBuilder_FormBuilder from '@digigov/form/FormBuilder/FormBuilder';
+import * as _digigov_form_FormBuilder from '@digigov/form/FormBuilder';
+import * as _digigov_form_FormContext from '@digigov/form/FormContext';
+import * as _digigov_form from '@digigov/form';
+import * as _digigov_form_inputs_AutoComplete from '@digigov/form/inputs/AutoComplete';
+import * as _digigov_form_inputs_Checkboxes from '@digigov/form/inputs/Checkboxes';
+import * as _digigov_form_inputs_DateInput from '@digigov/form/inputs/DateInput';
+import * as _digigov_form_inputs_FileInput from '@digigov/form/inputs/FileInput';
+import * as _digigov_form_inputs from '@digigov/form/inputs';
+import * as _digigov_form_inputs_Input from '@digigov/form/inputs/Input';
+import * as _digigov_form_inputs_Label from '@digigov/form/inputs/Label';
+import * as _digigov_form_inputs_Radio from '@digigov/form/inputs/Radio';
+import * as _digigov_form_inputs_Select from '@digigov/form/inputs/Select';
+import * as _digigov_form_internal from '@digigov/form/internal';
+import * as _digigov_form_MultiplicityField_add_objects from '@digigov/form/MultiplicityField/add-objects';
+import * as _digigov_form_MultiplicityField from '@digigov/form/MultiplicityField';
+import * as _digigov_form_Questions_getNextStep from '@digigov/form/Questions/getNextStep';
+import * as _digigov_form_Questions from '@digigov/form/Questions';
+import * as _digigov_form_Questions_Questions from '@digigov/form/Questions/Questions';
+import * as _digigov_form_Questions_QuestionsContext from '@digigov/form/Questions/QuestionsContext';
+import * as _digigov_form_Questions_Step_getAddMoreFields from '@digigov/form/Questions/Step/getAddMoreFields';
+import * as _digigov_form_Questions_Step from '@digigov/form/Questions/Step';
+import * as _digigov_form_Questions_Step_ReviewStep from '@digigov/form/Questions/Step/ReviewStep';
+import * as _digigov_form_Questions_Step_Step from '@digigov/form/Questions/Step/Step';
+import * as _digigov_form_Questions_Step_StepArrayReview from '@digigov/form/Questions/Step/StepArrayReview';
+import * as _digigov_form_Questions_Step_StepContext from '@digigov/form/Questions/Step/StepContext';
+import * as _digigov_form_Questions_Step_StepDescription from '@digigov/form/Questions/Step/StepDescription';
+import * as _digigov_form_Questions_Step_StepForm from '@digigov/form/Questions/Step/StepForm';
+import * as _digigov_form_Questions_Step_StepQuote from '@digigov/form/Questions/Step/StepQuote';
+import * as _digigov_form_Questions_Step_StepTitle from '@digigov/form/Questions/Step/StepTitle';
+import * as _digigov_form_Questions_Step_types from '@digigov/form/Questions/Step/types';
+import * as _digigov_form_Questions_types from '@digigov/form/Questions/types';
+import * as _digigov_form_types from '@digigov/form/types';
+import * as _digigov_form_utils from '@digigov/form/utils';
+import * as _digigov_form_validators from '@digigov/form/validators';
+import * as _digigov_form_validators_types from '@digigov/form/validators/types';
+import * as _digigov_form_validators_utils_afm from '@digigov/form/validators/utils/afm';
+import * as _digigov_form_validators_utils_file from '@digigov/form/validators/utils/file';
+import * as _digigov_form_validators_utils_iban from '@digigov/form/validators/utils/iban';
+import * as _digigov_form_validators_utils from '@digigov/form/validators/utils';
+import * as _digigov_form_validators_utils_int from '@digigov/form/validators/utils/int';
+import * as _digigov_form_validators_utils_number from '@digigov/form/validators/utils/number';
+import * as _digigov_form_validators_utils_phone from '@digigov/form/validators/utils/phone';
+import * as _digigov_form_validators_utils_postal_code from '@digigov/form/validators/utils/postal_code';
+import * as _digigov_form_validators_utils_uuid4 from '@digigov/form/validators/utils/uuid4';
+
+function lazyImport(pkgImport) {
+  return new Proxy({}, {
+    get: function get(_target, name) {
+      if (name === '__esModule' || name === 'default') {
+        return pkgImport["default"];
+      } else if (name === '*') {
+        return pkgImport;
+      } else {
+        return pkgImport[name];
+      }
+    }
+  });
+}
+
+export default {
+  '@digigov/form/Field/FieldBase': lazyImport(_digigov_form_Field_FieldBase),
+  '@digigov/form/Field/FieldConditional': lazyImport(_digigov_form_Field_FieldConditional),
+  '@digigov/form/Field/FieldContainer': lazyImport(_digigov_form_Field_FieldContainer),
+  '@digigov/form/Field': lazyImport(_digigov_form_Field),
+  '@digigov/form/Field/types': lazyImport(_digigov_form_Field_types),
+  '@digigov/form/Field/utils': lazyImport(_digigov_form_Field_utils),
+  '@digigov/form/FieldArray': lazyImport(_digigov_form_FieldArray),
+  '@digigov/form/FieldObject': lazyImport(_digigov_form_FieldObject),
+  '@digigov/form/Fieldset/FieldsetWithContext': lazyImport(_digigov_form_Fieldset_FieldsetWithContext),
+  '@digigov/form/Fieldset': lazyImport(_digigov_form_Fieldset),
+  '@digigov/form/Fieldset/types': lazyImport(_digigov_form_Fieldset_types),
+  '@digigov/form/FormBuilder/FormBuilder': lazyImport(_digigov_form_FormBuilder_FormBuilder),
+  '@digigov/form/FormBuilder': lazyImport(_digigov_form_FormBuilder),
+  '@digigov/form/FormContext': lazyImport(_digigov_form_FormContext),
+  '@digigov/form': lazyImport(_digigov_form),
+  '@digigov/form/inputs/AutoComplete': lazyImport(_digigov_form_inputs_AutoComplete),
+  '@digigov/form/inputs/Checkboxes': lazyImport(_digigov_form_inputs_Checkboxes),
+  '@digigov/form/inputs/DateInput': lazyImport(_digigov_form_inputs_DateInput),
+  '@digigov/form/inputs/FileInput': lazyImport(_digigov_form_inputs_FileInput),
+  '@digigov/form/inputs': lazyImport(_digigov_form_inputs),
+  '@digigov/form/inputs/Input': lazyImport(_digigov_form_inputs_Input),
+  '@digigov/form/inputs/Label': lazyImport(_digigov_form_inputs_Label),
+  '@digigov/form/inputs/Radio': lazyImport(_digigov_form_inputs_Radio),
+  '@digigov/form/inputs/Select': lazyImport(_digigov_form_inputs_Select),
+  '@digigov/form/internal': lazyImport(_digigov_form_internal),
+  '@digigov/form/MultiplicityField/add-objects': lazyImport(_digigov_form_MultiplicityField_add_objects),
+  '@digigov/form/MultiplicityField': lazyImport(_digigov_form_MultiplicityField),
+  '@digigov/form/Questions/getNextStep': lazyImport(_digigov_form_Questions_getNextStep),
+  '@digigov/form/Questions': lazyImport(_digigov_form_Questions),
+  '@digigov/form/Questions/Questions': lazyImport(_digigov_form_Questions_Questions),
+  '@digigov/form/Questions/QuestionsContext': lazyImport(_digigov_form_Questions_QuestionsContext),
+  '@digigov/form/Questions/Step/getAddMoreFields': lazyImport(_digigov_form_Questions_Step_getAddMoreFields),
+  '@digigov/form/Questions/Step': lazyImport(_digigov_form_Questions_Step),
+  '@digigov/form/Questions/Step/ReviewStep': lazyImport(_digigov_form_Questions_Step_ReviewStep),
+  '@digigov/form/Questions/Step/Step': lazyImport(_digigov_form_Questions_Step_Step),
+  '@digigov/form/Questions/Step/StepArrayReview': lazyImport(_digigov_form_Questions_Step_StepArrayReview),
+  '@digigov/form/Questions/Step/StepContext': lazyImport(_digigov_form_Questions_Step_StepContext),
+  '@digigov/form/Questions/Step/StepDescription': lazyImport(_digigov_form_Questions_Step_StepDescription),
+  '@digigov/form/Questions/Step/StepForm': lazyImport(_digigov_form_Questions_Step_StepForm),
+  '@digigov/form/Questions/Step/StepQuote': lazyImport(_digigov_form_Questions_Step_StepQuote),
+  '@digigov/form/Questions/Step/StepTitle': lazyImport(_digigov_form_Questions_Step_StepTitle),
+  '@digigov/form/Questions/Step/types': lazyImport(_digigov_form_Questions_Step_types),
+  '@digigov/form/Questions/types': lazyImport(_digigov_form_Questions_types),
+  '@digigov/form/types': lazyImport(_digigov_form_types),
+  '@digigov/form/utils': lazyImport(_digigov_form_utils),
+  '@digigov/form/validators': lazyImport(_digigov_form_validators),
+  '@digigov/form/validators/types': lazyImport(_digigov_form_validators_types),
+  '@digigov/form/validators/utils/afm': lazyImport(_digigov_form_validators_utils_afm),
+  '@digigov/form/validators/utils/file': lazyImport(_digigov_form_validators_utils_file),
+  '@digigov/form/validators/utils/iban': lazyImport(_digigov_form_validators_utils_iban),
+  '@digigov/form/validators/utils': lazyImport(_digigov_form_validators_utils),
+  '@digigov/form/validators/utils/int': lazyImport(_digigov_form_validators_utils_int),
+  '@digigov/form/validators/utils/number': lazyImport(_digigov_form_validators_utils_number),
+  '@digigov/form/validators/utils/phone': lazyImport(_digigov_form_validators_utils_phone),
+  '@digigov/form/validators/utils/postal_code': lazyImport(_digigov_form_validators_utils_postal_code),
+  '@digigov/form/validators/utils/uuid4': lazyImport(_digigov_form_validators_utils_uuid4)
+};

package/index.mdx

@@ -1,206 +1,44 @@
 ---
-title: Form
-parent: docs/ui/components
+id: Introduction
+title: Digigov Form
+sidebar_label: Introduction to Digigov Form
 ---
 
-import FormBuilder from '@digigov/form/';
+import LeadText from "@site/src/components/LeadText";
 
-export const fields = [
-  {
-    key: 'custom_object.attribute1',
-    type: 'string',
-    required: true,
-    label: {
-      primary: 'Custom object Attribute 1',
-    },
-    layout: {
-      xs: 5,
-      sm: 6,
-    },
-  },
-  {
-    key: 'custom_object.attribute2',
-    type: 'int',
-    required: true,
-    label: {
-      primary: 'Custom object Attribute 2',
-    },
-    layout: {
-      xs: 5,
-      sm: 6,
-    },
-  },
-  {
-    key: 'phone',
-    label: {
-      primary: 'Mobile phone',
-      secondary: 'A valid mobile number, eg. +306988848888',
-    },
-    required: true,
-    type: 'mobile_phone',
-  },
-  {
-    key: 'choice_single',
-    label: { primary: 'Is this true or not' },
-    type: 'choice:single',
-    extra: {
-      options: [
-        {
-          label: { primary: 'Yes' },
-          value: 'yes',
-        },
-        {
-          label: { primary: 'No', secondary: 'Explanation about no option' },
-          value: 'no',
-        },
-      ],
-    },
-  },
-  {
-    key: 'choice_single_notitle',
-    type: 'choice:single',
-    editable: false,
-    extra: {
-      options: [
-        {
-          label: { primary: 'One' },
-          value: '1',
-        },
-        {
-          label: { primary: 'Two' },
-          value: '2',
-        },
-      ],
-    },
-  },
-  {
-    key: 'choice_multiple',
-    label: { primary: 'Select multiple choices' },
-    type: 'choice:multiple',
-    condition: {
-      choice_single: {
-        is: 'no',
-        then: {
-          enabled: true,
-          required: true,
-        },
-        else: {
-          enabled: false,
-          required: false,
-        },
-      },
-    },
-    extra: {
-      options: [
-        {
-          label: { primary: 'Choice 1', secondary: 'Choice 1 explanation' },
-          value: 'choice_1',
-        },
-        {
-          label: { primary: 'Choice 2' },
-          value: 'choice_2',
-        },
-      ],
-    },
-  },
-  {
-    key: 'choice_single_select',
-    label: { primary: 'Select one choice' },
-    type: 'choice:single',
-    extra: {
-      options: [
-        {
-          label: { primary: 'Choice 1', secondary: 'Choice 1 explanation' },
-          value: 'choice_1',
-        },
-        {
-          label: { primary: 'Choice 2 lenghty explanation without reason' },
-          value: 'choice_2',
-        },
-        {
-          label: { primary: 'Choice 3 ' },
-          value: 'choice_3',
-        },
-      ],
-      component: 'Select',
-    },
-  },
-  {
-    key: 'number',
-    label: { primary: 'A positive number' },
-    required: true,
-    width: '100px',
-    type: 'int',
-    condition: {
-      choice_single: {
-        is: 'no',
-        then: {
-          display: true,
-          required: true,
-        },
-        else: {
-          display: false,
-          required: false,
-        },
-      },
-    },
-  },
-  {
-    key: 'file',
-    label: { primary: 'A file upload field' },
-    required: false,
-    extra: {
-      accept: '.pdf,.jpeg,.png',
-      multiple: true,
-      maxSize: 1000,
-    },
-    width: '100px',
-    type: 'file',
-  },
-];
-export const fieldsets = [
-  {
-    key: 'group1',
-    label: {
-      primary: 'This is group 1',
-      secondary: 'And some more info',
-    },
-    body: `and here is the text
-    that describes more for this`,
-    fields: ['custom_object.attribute1', 'custom_object.attribute2'],
-  },
-  {
-    key: 'rest',
-    fields: fields
-      .map(({ key }) => key)
-      .filter((key) => !key.startsWith('custom_object')),
-  },
-];
-export const initialValues = {
-  phone: '6988888888',
-  choice_multiple: ['choice_2'],
-  choice_single: 'yes',
-  choice_single_select: 'choice_3',
-};
+<LeadText>Digigov Form is an off-the-shelf solution for managing web forms using Reactjs. It supports flexible and multi-step forms and easy-to-use validation. This page will guide you through everything you need to create accessible and
+dynamic forms that can handle all sorts of user inputs.</LeadText>
+ 
+<img src="/img/form.svg" style={{margin: '3rem 0', maxWidth: '450px', width: '60%'}}/>
 
-## Example
+## Before we start
 
-<FormBuilder
-  fields={fields}
-  fieldsets={fieldsets}
-  onSubmit={(data) => {
-    console.log(data);
-  }}
-  initial={initialValues}
-  auto={true}
->
-  {/* <Fieldset>
-    <FieldsetLabel>This is a fieldset</FieldsetLabel>
-    {fields.map((field) => (
-      <Field key={field.key} name={field.key} />
-    ))}
-  </Fieldset> */}
-  <button type="submit">Submit</button>
-</FormBuilder>
+Forms are essential for any modern application. We have done the heavy lifting of
+creating a library that will help you increase the productivity and the quality
+of your forms. You can choose from a variety of input types and validations and
+describe how form fields behave and restrict data input.
 
-## API
+Finally, we also offer an easy way to spread your forms across multiple pages or
+steps and still be able to gather data in a single serialized object that you
+will be able to save via an JSON API.
+
+## Overview 
+
+The `@digigov/form` NPM package contains React components and validators. The
+library uses basic, semantically correct HTML5 input fields.
+
+It adds dynamic control, interactivity and validations to the core input
+components implemented in `@digigov/react-core`. Styling is provided by
+`@digigov/css` library following the [GOV.GR design
+system](https://guide.services.gov.gr).
+
+Digigov Form uses two main libraries internally. The first is [React Hook
+Form](https://www.react-hook-form.com/) which helps us manage the form state and
+perform actions and mutations on it. The second is
+[Yup](https://github.com/jquense/yup) and it is used to validate form data. It
+interfaces with React Hook Form right out of the box, but also enables us to
+define custom validation types such as AMKA, AFM etc.
+
+Some basic functionalites of `@digigov/form` will be presented in the following
+sections and also we are going to guide you through some more advanced topics
+such as internationalisation, custom data validation etc.

package/inputs/AutoComplete/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { AutoCompleteProps as UIAutoCompleteProps } from '@digigov/ui/admin/AutoComplete';
+import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { ControlledFieldProps } from '@digigov/form/Field/types';
+export interface AutoCompleteExtra extends Omit<UIAutoCompleteProps, 'source' | 'id' | 'templates' | 'defaultValue' | 'onConfirm' | 'dropdownArrow'> {
+    options: Array<FieldOptionProps>;
+}
+export interface AutoCompleteProps extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'extra'> {
+    extra: AutoCompleteExtra;
+    value: string;
+    onChange: (v: string) => void;
+}
+export declare const AutoComplete: React.FC<AutoCompleteProps>;
+export default AutoComplete;

package/inputs/AutoComplete/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AutoComplete = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete"));
+
+var _reactCore = require("@digigov/react-core");
+
+var _excluded = ["name", "extra", "onChange", "value"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var AutoComplete = function AutoComplete(_ref) {
+  var name = _ref.name,
+      options = _ref.extra.options,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var suggest = (0, _react.useCallback)(function suggest(query, syncResults) {
+    syncResults(query ? options.filter(function (option) {
+      var _option$label, _option$label2;
+
+      return "".concat(option.value, " ").concat(((_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.primary) || '', " ").concat(((_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.secondary) || '').toLowerCase().indexOf(query.toLowerCase()) !== -1;
+    }) : []);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], (0, _extends2["default"])({
+    source: suggest,
+    onConfirm: function onConfirm(value) {
+      onChange(value.value);
+    },
+    templates: {
+      suggestion: function suggestion(_ref2) {
+        var label = _ref2.label,
+            value = _ref2.value;
+        return /*#__PURE__*/_react["default"].createElement("div", null, label && label.primary && label.primary || value, label && label.secondary && /*#__PURE__*/_react["default"].createElement(_reactCore.Hint, null, label.secondary));
+      },
+      inputValue: function inputValue(option) {
+        if (!option) {
+          return '';
+        }
+
+        return option.label.primary || option.value;
+      }
+    }
+  }, props, {
+    id: "".concat(name, "-id"),
+    defaultValue: value
+  }));
+};
+
+exports.AutoComplete = AutoComplete;
+var _default = AutoComplete;
+exports["default"] = _default;