@digigov/ui 0.21.2 → 0.23.0

package/core/Tabs/index.mdx

@@ -1,8 +1,16 @@
 ---
+id: tabs
 title: Tabs
-parent: docs/ui/components
 ---
 
+# Tabs
+ 
+
+
+```bash
 import Tabs from '@digigov/ui/core/Tabs';
+``` 
+
+## How to use
 
-## Examples
+<Story packageName="@digigov/ui" component="core/Tabs" story="Default.tsx" />

package/core/TextArea/index.mdx

@@ -0,0 +1,50 @@
+---
+id: text-area
+title: TextArea
+---
+
+
+# TextArea
+ 
+
+
+```bash
+import TextArea from '@digigov/ui/core/TextArea';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/TextArea" story="Default.tsx" />
+
+### Use appropriately-sized textareas
+
+<Story packageName="@digigov/ui" component="core/TextArea" story="WithDeclaredRows.tsx" />
+
+
+### If you’re asking more than one question on the page
+
+<Story packageName="@digigov/ui" component="core/TextArea" story="MultipleQuestions.tsx" />
+
+### Limiting the number of characters
+
+If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
+
+<Story packageName="@digigov/ui" component="core/TextArea" story="LimitedCharacters.tsx" />
+
+
+### Hint text
+
+Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
+
+<Story packageName="@digigov/ui" component="core/TextArea" story="WithHint.tsx" />
+
+
+### Error message
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/TextArea" story="WithErrorMessage.tsx" />
+
+### Disabled input
+
+<Story packageName="@digigov/ui" component="core/TextArea" story="DisabledInput.tsx" />

package/core/TextInput/index.mdx

@@ -0,0 +1,59 @@
+---
+id: text-input
+title: TextInput
+---
+
+
+# TextInput
+ 
+
+
+```bash
+import TextInput from '@digigov/ui/core/TextInput';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="Default.tsx" />
+
+### If you’re asking more than one question on the page
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="MultipleQuestions.tsx" />
+
+### Fixed width inputs
+
+Use fixed width inputs for content that has a specific, known length. Postcode inputs should be postcode-sized, telephone number inputs should be telephone number-sized.
+
+The widths are designed for specific character lengths and to be consistent across a range of browsers. They include extra padding to fit icons that some browsers might insert into the input (for example to show or generate a password).
+
+On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="FixedWidths.tsx" />
+
+### Fluid width inputs
+
+Fluid width inputs will resize with the viewport.
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="FluidWidths.tsx" />
+
+### Hint text
+
+Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="WithHint.tsx" />
+
+## Numbers
+
+### Asking for whole numbers
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="AskingForNumbers.tsx" />
+
+### Error message
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="WithErrorMessage.tsx" />
+
+### Disabled input
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="DisabledInput.tsx" />

package/core/VisuallyHidden/__stories__/Default.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,9 +15,19 @@ var _VisuallyHidden = _interopRequireDefault(require("@digigov/ui/core/VisuallyH
 
 var _typography = require("@digigov/ui/typography");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "The below element is visually hidden.");
+var _Button = _interopRequireWildcard(require("@digigov/ui/core/Button"));
+
+var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
+
+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 _ref = /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "Some element below is visually hidden. It's only accessible for screen readers and any tools parsing the DOM.");
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "This is a VisuallyHidden");
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null, " \u0394\u03BF\u03BA\u03B9\u03BC\u03AE"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, " \u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")));
 
 var Default = function Default() {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref, _ref2);

package/core/VisuallyHidden/index.mdx

@@ -0,0 +1,17 @@
+---
+id: visually-hidden
+title: VisuallyHidden
+---
+
+Use this component to convey meaning to people using screen readers, helping
+them access information and context.
+
+VisuallyHidden is a web accessibility technique used to hide content from the visual client, but keep it readable for screen readers.
+
+```bash
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/VisuallyHidden" story="Default.tsx" />

package/core/WarningText/index.mdx

@@ -1,44 +1,19 @@
 ---
-title: Warning Text
-parent: docs/ui/components
+id: warning-text
+title: WarningText
 ---
 
-# Warning Text
+# WarningText
+ 
 
-import WarningText from '@digigov/ui/core/WarningText';
 
-```jsx live path=core/WarningText/index.tsx
+```bash
 import WarningText from '@digigov/ui/core/WarningText';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-function CustomWarning (props){
- return (
-  <WarningText><Paragraph>Action Label</Paragraph></WarningText>
- )
-}
-export CustomWarningText
-
-```
-
-<br />
-
-## When to use this component
-
-Use the warning text component when you need to warn users about something
-important, such as legal consequences of an action, or lack of action that
-they might take.
-
-## How it works
-
-Write a descriptive message for the users that warns them about the possible
-complications of the current action.
-
-## API
-
-### Properties
+``` 
 
-<PropsDoc data={WarningText.__doc__} />
-<br />
+## How to use
 
-### Styles
+You might need to rewrite the hidden text ("Προσοχή" in the example) to make it appropriate for your context. 
+This will be used by screen-readers.
 
-<StylesDoc data={WarningText.__doc__} />
+<Story packageName="@digigov/ui" component="core/WarningText" story="Default.tsx" />

package/es/admin/AutoComplete/AccesibleAutoComplete/index.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+
+function AccesibleAutoComplete(options) {
+  console.log('options are', options);
+
+  if (!options.element) {
+    throw new Error('element is not defined');
+  }
+
+  if (!options.id) {
+    throw new Error('id is not defined');
+  }
+
+  if (!options.source) {
+    throw new Error('source is not defined');
+  }
+
+  if (Array.isArray(options.source)) {
+    options.source = createSimpleEngine(options.source);
+  }
+
+  ReactDOM.render( /*#__PURE__*/React.createElement(AutoComplete, options), options.element);
+}
+
+var createSimpleEngine = function createSimpleEngine(values) {
+  return function (query, syncResults) {
+    var matches = values.filter(function (r) {
+      return r.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+    });
+    syncResults(matches);
+  };
+};
+
+AccesibleAutoComplete.enhanceSelectElement = function (configurationOptions) {
+  if (!configurationOptions.selectElement) {
+    throw new Error('selectElement is not defined');
+  } // Set defaults.
+
+
+  if (!configurationOptions.source) {
+    var availableOptions = [].filter.call(configurationOptions.selectElement.options, function (option) {
+      return option.value || configurationOptions.preserveNullOptions;
+    });
+    configurationOptions.source = availableOptions.map(function (option) {
+      return option.textContent || option.innerText;
+    });
+  }
+
+  configurationOptions.onConfirm = configurationOptions.onConfirm || function (query) {
+    var requestedOption = [].filter.call(configurationOptions.selectElement.options, function (option) {
+      return (option.textContent || option.innerText) === query;
+    })[0];
+
+    if (requestedOption) {
+      requestedOption.selected = true;
+    }
+  };
+
+  if (configurationOptions.selectElement.value || configurationOptions.defaultValue === undefined) {
+    var option = configurationOptions.selectElement.options[configurationOptions.selectElement.options.selectedIndex];
+    configurationOptions.defaultValue = option.textContent || option.innerText;
+  }
+
+  if (configurationOptions.name === undefined) configurationOptions.name = '';
+
+  if (configurationOptions.id === undefined) {
+    if (configurationOptions.selectElement.id === undefined) {
+      configurationOptions.id = '';
+    } else {
+      configurationOptions.id = configurationOptions.selectElement.id;
+    }
+  }
+
+  if (configurationOptions.autoselect === undefined) configurationOptions.autoselect = true;
+  var element = document.createElement('div');
+  configurationOptions.selectElement.parentNode.insertBefore(element, configurationOptions.selectElement);
+  AccesibleAutoComplete(_extends({}, configurationOptions, {
+    element: element
+  }));
+  configurationOptions.selectElement.style.display = 'none';
+  configurationOptions.selectElement.id = configurationOptions.selectElement.id + '-select';
+};
+
+export default AccesibleAutoComplete;

package/es/admin/AutoComplete/AutoComplete.stories.js

@@ -0,0 +1,13 @@
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+export default {
+  title: 'Digigov UI/admin/AutoComplete',
+  component: AutoComplete
+}; // eslint-disable-next-line digigov/no-relative-import
+
+export * from '@digigov/ui/admin/AutoComplete/__stories__/Default';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithAutoSelect';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithInLine';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithDefaultValue';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithPlaceHolder';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithShowAllValues';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithMinLength';

package/es/admin/AutoComplete/Status/index.js

@@ -0,0 +1,153 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React, { Component } from 'react';
+import AutoCompleteStatusWrapper from '@digigov/react-extensions/admin/AutoCompleteStatusWrapper';
+import AutoCompleteStatus from '@digigov/react-extensions/admin/AutoCompleteStatus';
+
+var debounce = function debounce(func, wait, immediate) {
+  var timeout;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    var context = this;
+
+    var later = function later() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+};
+
+var statusDebounceMillis = 1400;
+
+var Status = /*#__PURE__*/function (_Component) {
+  _inherits(Status, _Component);
+
+  var _super = _createSuper(Status);
+
+  function Status() {
+    var _this;
+
+    _classCallCheck(this, Status);
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      bump: false,
+      debounced: false,
+      silenced: false
+    };
+    _this.debounceStatusUpdate = void 0;
+    return _this;
+  }
+
+  _createClass(Status, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      var that = this;
+      this.debounceStatusUpdate = debounce(function () {
+        if (!that.state.debounced) {
+          var shouldSilence = !that.props.isInFocus || that.props.validChoiceMade;
+          that.setState(function (_ref) {
+            var bump = _ref.bump;
+            return {
+              bump: !bump,
+              debounced: true,
+              silenced: shouldSilence
+            };
+          });
+        }
+      }, statusDebounceMillis);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps() {
+      this.setState({
+        debounced: false
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          id = _this$props.id,
+          length = _this$props.length,
+          queryLength = _this$props.queryLength,
+          minQueryLength = _this$props.minQueryLength,
+          selectedOption = _this$props.selectedOption,
+          selectedOptionIndex = _this$props.selectedOptionIndex,
+          tQueryTooShort = _this$props.tQueryTooShort,
+          tNoResults = _this$props.tNoResults,
+          tSelectedOption = _this$props.tSelectedOption,
+          tResults = _this$props.tResults;
+      var _this$state = this.state,
+          bump = _this$state.bump,
+          debounced = _this$state.debounced,
+          silenced = _this$state.silenced;
+      var queryTooShort = queryLength < minQueryLength;
+      var noResults = length === 0;
+      var contentSelectedOption = selectedOption ? tSelectedOption(selectedOption, length, selectedOptionIndex) : '';
+      var content;
+
+      if (queryTooShort) {
+        content = tQueryTooShort === null || tQueryTooShort === void 0 ? void 0 : tQueryTooShort(minQueryLength);
+      } else if (noResults) {
+        content = tNoResults === null || tNoResults === void 0 ? void 0 : tNoResults();
+      } else {
+        content = tResults === null || tResults === void 0 ? void 0 : tResults(length, contentSelectedOption);
+      }
+
+      this.debounceStatusUpdate();
+      return /*#__PURE__*/React.createElement(AutoCompleteStatusWrapper, null, /*#__PURE__*/React.createElement(AutoCompleteStatus, {
+        id: id + '__status--A'
+      }, !silenced && debounced && bump ? content : ' '), /*#__PURE__*/React.createElement(AutoCompleteStatus, {
+        id: id + '__status--B'
+      }, !silenced && debounced && !bump ? content : ' '));
+    }
+  }]);
+
+  return Status;
+}(Component);
+
+Status.defaultProps = {
+  tQueryTooShort: function tQueryTooShort(minQueryLength) {
+    return "Type in ".concat(minQueryLength, " or more characters for results");
+  },
+  tNoResults: function tNoResults() {
+    return 'No search results';
+  },
+  tSelectedOption: function tSelectedOption(selectedOption, length, index) {
+    return "".concat(selectedOption, " ").concat(index + 1, " of ").concat(length, " is highlighted");
+  },
+  tResults: function tResults(length, contentSelectedOption) {
+    var words = {
+      result: length === 1 ? 'result' : 'results',
+      is: length === 1 ? 'is' : 'are'
+    };
+    return "".concat(length, " ").concat(words.result, " ").concat(words.is, " available. ").concat(contentSelectedOption);
+  }
+};
+export { Status as default };
+export { AutoCompleteStatusWrapper, AutoCompleteStatus };

package/es/admin/AutoComplete/__stories__/Default.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  cellWidth: "one-third",
+  id: "govgr"
+}));
+
+var _ref2 = /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2);
+};
+export default Default;

package/es/admin/AutoComplete/__stories__/WithAutoSelect.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal");
+
+export var WithAutoSelect = function WithAutoSelect() {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+    source: suggest,
+    autoselect: true,
+    id: "govgr",
+    tNoResults: function tNoResults() {
+      return 'Δεν υπάρχουν αποτελέσματα';
+    }
+  })), _ref);
+};
+export default WithAutoSelect;

package/es/admin/AutoComplete/__stories__/WithDefaultValue.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  autoselect: true,
+  defaultValue: "Germany",
+  id: "govgr"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal"));
+
+export var WithDefaultValue = function WithDefaultValue() {
+  return _ref;
+};
+export default WithDefaultValue;

package/es/admin/AutoComplete/__stories__/WithInLine.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  autoselect: true,
+  displayMenu: "inline",
+  id: "govgr"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal"));
+
+export var WithInLine = function WithInLine() {
+  return _ref;
+};
+export default WithInLine;

package/es/admin/AutoComplete/__stories__/WithMinLength.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Paragraph, null, "This is the minimum number of characters that should be entered before the autocomplete will attempt to suggest options(in above example is 2)"), /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  autoselect: true,
+  minLength: 2,
+  id: "govgr"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal"));
+
+export var WithMinLength = function WithMinLength() {
+  return _ref;
+};
+export default WithMinLength;

package/es/admin/AutoComplete/__stories__/WithPlaceHolder.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  autoselect: true,
+  placeholder: "Search for a country",
+  id: "govgr"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal"));
+
+export var WithPlaceHolder = function WithPlaceHolder() {
+  return _ref;
+};
+export default WithPlaceHolder;

package/es/admin/AutoComplete/__stories__/WithShowAllValues.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  autoselect: true,
+  showAllValues: true,
+  id: "govgr"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal"));
+
+export var WithShowAllValues = function WithShowAllValues() {
+  return _ref;
+};
+export default WithShowAllValues;