@digigov/form 0.8.2 → 0.8.4

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 # Change Log - @digigov/form
 
-This log was last generated on Tue, 13 Sep 2022 13:10:16 GMT and should not be manually modified.
+This log was last generated on Wed, 21 Sep 2022 14:27:06 GMT and should not be manually modified.
+
+## 0.8.4
+Wed, 21 Sep 2022 14:27:06 GMT
+
+### Patches
+
+- add autocomplete as a select alternative
+- Update storybook example for AutoCompleteField
+- Fix bug in Radio input after refactoring the FieldBase API
+
+## 0.8.3
+Wed, 14 Sep 2022 12:03:44 GMT
+
+### Patches
+
+- fix inputs with updated props
 
 ## 0.8.2
 Tue, 13 Sep 2022 13:10:16 GMT

package/Field/FieldBase.js

@@ -86,6 +86,7 @@ var FieldBase = function FieldBase(props) {
     required: required,
     disabled: editable === false
   }, componentProps)) : /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, register(name), {
+    register: register,
     control: control,
     error: !!error,
     extra: extra,

package/Field/utils.js

@@ -27,6 +27,8 @@ var _DateInput = _interopRequireDefault(require("@digigov/form/inputs/DateInput"
 
 var _FormContext = require("@digigov/form/FormContext");
 
+var _AutoComplete = _interopRequireDefault(require("@digigov/form/inputs/AutoComplete"));
+
 var FIELD_COMPONENTS = {
   text: {
     component: _Input["default"]
@@ -58,6 +60,10 @@ var ALTERNATIVE_COMPONENTS = {
   Select: {
     component: _Select["default"],
     controlled: false
+  },
+  AutoComplete: {
+    component: _AutoComplete["default"],
+    controlled: true
   }
 };
 

package/{libs/form/src/Form.stories.d.ts → Form.stories.d.ts}

@@ -3,3 +3,4 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/form/__stories__/IntField";
+export * from "@digigov/form/__stories__/AutoCompleteField";

package/Form.stories.js

@@ -19,6 +19,20 @@ Object.keys(_IntField).forEach(function (key) {
     }
   });
 });
+
+var _AutoCompleteField = require("@digigov/form/__stories__/AutoCompleteField");
+
+Object.keys(_AutoCompleteField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AutoCompleteField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AutoCompleteField[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov Form'
 };

package/__stories__/AutoCompleteField.d.ts

@@ -0,0 +1 @@
+export declare const AutoCompleteField: () => JSX.Element;

package/__stories__/AutoCompleteField.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutoCompleteField = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
+
+var _Field = require("@digigov/form/Field");
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+var _utils = require("@digigov/ui/admin/AutoComplete/__stories__/utils");
+
+var fields = [{
+  key: 'autocomplete',
+  label: {
+    primary: 'An autocomplete field'
+  },
+  required: true,
+  type: 'choice:single',
+  extra: {
+    component: 'AutoComplete',
+    options: _utils.results.map(function (r) {
+      return {
+        label: {
+          primary: r,
+          secondary: "Country: ".concat(r)
+        },
+        value: r.toLowerCase()
+      };
+    })
+  }
+}];
+var initialValues = {};
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  type: "submit"
+}, "Submit");
+
+var AutoCompleteField = function AutoCompleteField() {
+  return /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
+    fields: fields,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    initial: initialValues
+  }, fields.map(function (field) {
+    return /*#__PURE__*/_react["default"].createElement(_Field.Field, {
+      key: field.key,
+      name: field.key
+    });
+  }), _ref);
+};
+
+exports.AutoCompleteField = AutoCompleteField;

package/__stories__/IntField.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,13 +9,11 @@ exports.IntField = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _form = _interopRequireWildcard(require("@digigov/form/"));
-
-var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
 
-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); }
+var _Field = require("@digigov/form/Field");
 
-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 _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
 
 var fields = [{
   key: 'number_required',
@@ -43,14 +39,14 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
 }, "Submit");
 
 var IntField = function IntField() {
-  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
     fields: fields,
     onSubmit: function onSubmit(data) {
       console.log(data);
     },
     initial: initialValues
   }, fields.map(function (field) {
-    return /*#__PURE__*/_react["default"].createElement(_form.Field, {
+    return /*#__PURE__*/_react["default"].createElement(_Field.Field, {
       key: field.key,
       name: field.key
     });

package/es/Field/FieldBase.js

@@ -71,6 +71,7 @@ export var FieldBase = function FieldBase(props) {
     required: required,
     disabled: editable === false
   }, componentProps)) : /*#__PURE__*/React.createElement(Component, _extends({}, register(name), {
+    register: register,
     control: control,
     error: !!error,
     extra: extra,

package/es/Field/utils.js

@@ -7,6 +7,7 @@ import Select from '@digigov/form/inputs/Select';
 import FileInput from '@digigov/form/inputs/FileInput';
 import DateInput from '@digigov/form/inputs/DateInput';
 import { FormContext } from '@digigov/form/FormContext';
+import AutoComplete from '@digigov/form/inputs/AutoComplete';
 var FIELD_COMPONENTS = {
   text: {
     component: Input
@@ -38,6 +39,10 @@ var ALTERNATIVE_COMPONENTS = {
   Select: {
     component: Select,
     controlled: false
+  },
+  AutoComplete: {
+    component: AutoComplete,
+    controlled: true
   }
 };
 export function calculateField(children, field, componentRegistry) {

package/es/Form.stories.js

@@ -1,4 +1,5 @@
 export default {
   title: 'Digigov Form'
 };
-export * from '@digigov/form/__stories__/IntField';
+export * from '@digigov/form/__stories__/IntField';
+export * from '@digigov/form/__stories__/AutoCompleteField';

package/es/__stories__/AutoCompleteField.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { Field } from '@digigov/form/Field';
+import Button from '@digigov/ui/core/Button';
+import { results } from '@digigov/ui/admin/AutoComplete/__stories__/utils';
+var fields = [{
+  key: 'autocomplete',
+  label: {
+    primary: 'An autocomplete field'
+  },
+  required: true,
+  type: 'choice:single',
+  extra: {
+    component: 'AutoComplete',
+    options: results.map(function (r) {
+      return {
+        label: {
+          primary: r,
+          secondary: "Country: ".concat(r)
+        },
+        value: r.toLowerCase()
+      };
+    })
+  }
+}];
+var initialValues = {};
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "Submit");
+
+export var AutoCompleteField = function AutoCompleteField() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    fields: fields,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    initial: initialValues
+  }, fields.map(function (field) {
+    return /*#__PURE__*/React.createElement(Field, {
+      key: field.key,
+      name: field.key
+    });
+  }), _ref);
+};

package/es/__stories__/IntField.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import FormBuilder, { Field } from '@digigov/form/';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { Field } from '@digigov/form/Field';
 import Button from '@digigov/ui/core/Button';
 var fields = [{
   key: 'number_required',

package/es/inputs/AutoComplete/index.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "extra", "onChange", "value"];
+import React, { useCallback } from 'react';
+import UIAutoComplete from '@digigov/ui/admin/AutoComplete';
+import { Hint } from '@digigov/react-core';
+export var AutoComplete = function AutoComplete(_ref) {
+  var name = _ref.name,
+      options = _ref.extra.options,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var suggest = 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.createElement(UIAutoComplete, _extends({
+    source: suggest,
+    onConfirm: function onConfirm(value) {
+      onChange(value.value);
+    },
+    templates: {
+      suggestion: function suggestion(_ref2) {
+        var label = _ref2.label,
+            value = _ref2.value;
+        return /*#__PURE__*/React.createElement("div", null, label && label.primary && label.primary || value, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, label.secondary));
+      },
+      inputValue: function inputValue(option) {
+        if (!option) {
+          return '';
+        }
+
+        return option.label.primary || option.value;
+      }
+    }
+  }, props, {
+    id: "".concat(name, "-id"),
+    defaultValue: value
+  }));
+};
+export default AutoComplete;

package/es/inputs/Checkboxes/index.js

@@ -53,6 +53,7 @@ export var Checkboxes = function Checkboxes(_ref) {
       checked: value.includes(option.value),
       onChange: handleChange(option.value)
     }, option, _extends({}, props, {
+      reset: undefined,
       defaultValue: undefined,
       onBlur: undefined,
       required: undefined,

package/es/inputs/FileInput/index.js

@@ -2,15 +2,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "extra", "disabled", "reset", "onChange", "control"];
+var _excluded = ["name", "extra", "disabled", "reset", "onChange"];
 import React, { useState } from 'react';
-import clsx from 'clsx';
 import { useTranslation } from '@digigov/ui/app/i18n';
 import Paragraph from '@digigov/ui/typography/Paragraph';
 import CoreHint from '@digigov/react-core/Hint';
 import Button from '@digigov/ui/core/Button';
+import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
 import FileUpload from '@digigov/react-core/FileUpload';
-import Field from '@digigov/react-core/Field';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, ref) {
   var name = _ref.name,
@@ -19,7 +18,6 @@ export var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, re
       disabled = _ref.disabled,
       reset = _ref.reset,
       onChange = _ref.onChange,
-      control = _ref.control,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useTranslation = useTranslation(),
@@ -42,8 +40,8 @@ export var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, re
     onChange(e);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
-    className: clsx(extra.className, files && files.length > 0 && 'govgr-uploaded-file')
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FileUploadContainer, {
+    hasUploadedFile: files && files.length > 0
   }, files !== null && files !== void 0 && files.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paragraph, null, /*#__PURE__*/React.createElement("b", null, t('upload.file'), ":"), " ", "".concat(files.join(', ')))) : /*#__PURE__*/React.createElement(CoreHint, null, t('upload.no_file')), /*#__PURE__*/React.createElement(FileUpload, _extends({
     ref: ref,
     hasFiles: !!(files !== null && files !== void 0 && files.length),

package/es/inputs/Input/index.js

@@ -38,6 +38,7 @@ export var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref
       rows: rows,
       ref: ref
     }, _extends({}, props, {
+      reset: undefined,
       required: undefined,
       type: fieldType
     })));
@@ -48,6 +49,7 @@ export var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref
       className: className,
       ref: ref
     }, _extends({}, props, {
+      reset: undefined,
       required: undefined
     })));
   }

package/es/inputs/Radio/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["register", "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';
@@ -8,9 +8,9 @@ import { useTranslation } from '@digigov/ui/app/i18n';
 import { useWatch } from 'react-hook-form';
 import Hint from '@digigov/react-core/Hint';
 export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
-  var register = _ref.register,
-      name = _ref.name,
+  var name = _ref.name,
       control = _ref.control,
+      register = _ref.register,
       _ref$extra = _ref.extra,
       options = _ref$extra.options,
       className = _ref$extra.className,
@@ -40,6 +40,7 @@ export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
       value: v,
       disabled: disabled || optionDisabled
     }, _extends({}, props, {
+      reset: undefined,
       required: undefined,
       'aria-describedby': undefined,
       type: 'radio'

package/es/inputs/Select/index.js

@@ -18,6 +18,7 @@ export var Select = /*#__PURE__*/React.forwardRef(function WrappedSelect(_ref, r
     name: name,
     disabled: disabled
   }, _extends({}, props, {
+    reset: undefined,
     required: undefined
   })), options.map(function (_ref2) {
     var value = _ref2.value,

package/esm/Field/FieldBase.js

@@ -71,6 +71,7 @@ export var FieldBase = function FieldBase(props) {
     required: required,
     disabled: editable === false
   }, componentProps)) : /*#__PURE__*/React.createElement(Component, _extends({}, register(name), {
+    register: register,
     control: control,
     error: !!error,
     extra: extra,

package/esm/Field/utils.js

@@ -7,6 +7,7 @@ import Select from '@digigov/form/inputs/Select';
 import FileInput from '@digigov/form/inputs/FileInput';
 import DateInput from '@digigov/form/inputs/DateInput';
 import { FormContext } from '@digigov/form/FormContext';
+import AutoComplete from '@digigov/form/inputs/AutoComplete';
 var FIELD_COMPONENTS = {
   text: {
     component: Input
@@ -38,6 +39,10 @@ var ALTERNATIVE_COMPONENTS = {
   Select: {
     component: Select,
     controlled: false
+  },
+  AutoComplete: {
+    component: AutoComplete,
+    controlled: true
   }
 };
 export function calculateField(children, field, componentRegistry) {

package/esm/Form.stories.js

@@ -1,4 +1,5 @@
 export default {
   title: 'Digigov Form'
 };
-export * from '@digigov/form/__stories__/IntField';
+export * from '@digigov/form/__stories__/IntField';
+export * from '@digigov/form/__stories__/AutoCompleteField';

package/esm/__stories__/AutoCompleteField.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { Field } from '@digigov/form/Field';
+import Button from '@digigov/ui/core/Button';
+import { results } from '@digigov/ui/admin/AutoComplete/__stories__/utils';
+var fields = [{
+  key: 'autocomplete',
+  label: {
+    primary: 'An autocomplete field'
+  },
+  required: true,
+  type: 'choice:single',
+  extra: {
+    component: 'AutoComplete',
+    options: results.map(function (r) {
+      return {
+        label: {
+          primary: r,
+          secondary: "Country: ".concat(r)
+        },
+        value: r.toLowerCase()
+      };
+    })
+  }
+}];
+var initialValues = {};
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "Submit");
+
+export var AutoCompleteField = function AutoCompleteField() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    fields: fields,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    initial: initialValues
+  }, fields.map(function (field) {
+    return /*#__PURE__*/React.createElement(Field, {
+      key: field.key,
+      name: field.key
+    });
+  }), _ref);
+};

package/esm/__stories__/IntField.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import FormBuilder, { Field } from '@digigov/form/';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { Field } from '@digigov/form/Field';
 import Button from '@digigov/ui/core/Button';
 var fields = [{
   key: 'number_required',

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.8.2
+/** @license Digigov v0.8.4
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.