@digigov/ui 1.2.0-dcbd7ded → 2.0.0-462194bf

package/content/TaskList/index.mdx

@@ -7,10 +7,6 @@ title: TaskList
 
 TaskList is a component that displays number of steps required to complete a process inside your application.
 
-```bash
-import TaskList from '@digigov/ui/content/TaskList';
-```
-
 ## How to use
 
 ### Default
@@ -23,4 +19,12 @@ import TaskList from '@digigov/ui/content/TaskList';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="TaskList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "TaskList",
+  "TaskListItem",
+  "TaskListItemHeading",
+  "TaskListItemContent",
+  "TaskListItemTag"
+  ]} /> 

package/content/Timeline/index.mdx

@@ -9,10 +9,6 @@ A timeline is a useful way to display a whole range of information and/or data p
 Keeping things organized in logical sequence timeline helps to keep track of what’s happening.
 User can better understand what has happened and also understand what the next steps should be.
 
-```bash
-import Timeline from '@digigov/ui/content/Timeline';
-```
-
 ## How to use
 
 ### Default
@@ -25,4 +21,13 @@ import Timeline from '@digigov/ui/content/Timeline';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Timeline" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Timeline",
+  "TimelineItem",
+  "TimelineHeading",
+  "TimelineContent",
+  "TimelineActions",
+  ]} /> 
+

package/feedback/CopyToClipboard/index.d.ts

@@ -7,6 +7,6 @@ export interface CopyToClipboardProps extends CopyToClipboardContainerProps {
     timeout?: number;
     onCopy?: () => void;
 }
-export declare const CopyToClipboard: React.ForwardRefExoticComponent<Pick<CopyToClipboardProps, "children" | "slot" | "style" | "title" | "text" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "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" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "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" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "variant" | "dense" | "message" | "tooltipAlign" | "timeout"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CopyToClipboard: React.ForwardRefExoticComponent<Pick<CopyToClipboardProps, "children" | "p" | "slot" | "style" | "title" | "text" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "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" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "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" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "variant" | "dense" | "message" | "tooltipAlign" | "timeout"> & React.RefAttributes<HTMLDivElement>>;
 export default CopyToClipboard;
 export { CopyToClipboardContainer, CopyToClipboardMessage };

package/feedback/CopyToClipboard/index.mdx

@@ -3,10 +3,6 @@ id: copy-to-clipboard
 title: CopyToClipboard
 ---
 
-```bash
-import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
-```
-
 ## How to use
 
 ### Default
@@ -27,4 +23,6 @@ import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="CopyToClipboard" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["CopyToClipboardContainer"]} /> 

package/feedback/ErrorSummary/index.mdx

@@ -9,10 +9,6 @@ Use this component at the top of a page to summarise any errors a user has made.
 
 When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
 
-```bash
-import ErrorSummary from '@digigov/ui/feedback/ErrorSummary';
-```
-
 ## How to use
 
 <Story
@@ -53,4 +49,6 @@ For questions that require a user to select one or more options from a list usin
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="ErrorSummary" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["ErrorSummary"]} /> 

package/feedback/NotificationBanner/index.mdx

@@ -9,16 +9,15 @@ This component is currently experimental because more research is needed to vali
 
 Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.
 
-```bash
-import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
-```
-
 ## How to use
 
 Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
 
 Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
 
+## How to use
+
+### Default NotificationBanner
 <Story
   packageName="@digigov/ui"
   component="feedback/NotificationBanner"
@@ -27,12 +26,22 @@ Use a ‘neutral’ notification banner if the user needs to know about somethin
 
 You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.
 
+### Success NotificationBanner
 <Story
   packageName="@digigov/ui"
   component="feedback/NotificationBanner"
   story="Success.tsx"
 />
 
+### Dense NotificationBanner
+<Story
+  packageName="@digigov/ui"
+  component="feedback/NotificationBanner"
+  story="Dense.tsx"
+/>
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="NotificationBanner" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["NotificationBannerContainer","NotificationBannerContent","NotificationBannerHeader","NotificationBannerHeading","NotificationBannerLink"]} /> 

package/feedback/PhaseBanner/index.mdx

@@ -7,14 +7,12 @@ title: PhaseBanner
 
 Use the phase banner component to show users your service is still being worked on.
 
-```bash
-import PhaseBanner from '@digigov/ui/feedback/PhaseBanner';
-```
-
 ## How to use
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
+### Default
+
 <Story
   packageName="@digigov/ui"
   component="feedback/PhaseBanner"
@@ -31,4 +29,9 @@ Your banner must be directly under the blue GOV.GR header and colour bar.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="PhaseBanner" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "PhaseBanner",
+  "PhaseBannerTag",
+  "PhaseBannerText"]} /> 

package/feedback/WarningText/index.mdx

@@ -5,15 +5,13 @@ title: WarningText
 
 # WarningText
 
-```bash
-import WarningText from '@digigov/ui/feedback/WarningText';
-```
-
 ## How to use
 
 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.
 
+### Default
+
 <Story
   packageName="@digigov/ui"
   component="feedback/WarningText"
@@ -22,4 +20,6 @@ This will be used by screen-readers.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="WarningText" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["WarningText"]} /> 

package/form/AutoComplete/AutoComplete.stories/index.js

@@ -5,8 +5,11 @@ export default {
   displayName: 'AutoComplete'
 };
 export * from '@digigov/ui/form/AutoComplete/__stories__/Default';
+export * from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
+export * from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues';
+export * from '@digigov/ui/form/AutoComplete/__stories__/MultipleShowingTwoSelected';
+export * from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
-export * from '@digigov/ui/form/AutoComplete/__stories__/WithInLine';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';

package/form/AutoComplete/AutoComplete.stories.d.ts

@@ -5,8 +5,11 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/ui/form/AutoComplete/__stories__/Default";
+export * from "@digigov/ui/form/AutoComplete/__stories__/Multiple";
+export * from "@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues";
+export * from "@digigov/ui/form/AutoComplete/__stories__/MultipleShowingTwoSelected";
+export * from "@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength";
 export * from "@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect";
-export * from "@digigov/ui/form/AutoComplete/__stories__/WithInLine";
 export * from "@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue";
 export * from "@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder";
 export * from "@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues";

package/form/AutoComplete/AutoComplete.stories.playwright.json

@@ -0,0 +1,33 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-form-autocomplete--multiple": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>fieldset>div>div:nth-child(2)>button"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>fieldset>div>div:nth-child(2)>ul:nth-child(4)>div>li:nth-child(3)"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>fieldset>div>div:nth-child(2)>button"
+              }
+            }
+          ],
+          "id": "SP0dXbHKOZl7",
+          "title": "show chip"
+        }
+      ]
+    }
+  }
+}

package/form/AutoComplete/Status/index.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import AutoCompleteStatus from '@digigov/react-core/AutoCompleteStatus';
-import AutoCompleteStatusWrapper from '@digigov/react-core/AutoCompleteStatusWrapper';
+import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusContainer';
 type StatusProps = {
     id: string;
     length: number;
@@ -33,8 +33,10 @@ export default class Status extends Component<StatusProps, StateProps> {
         silenced: boolean;
     };
     debounceStatusUpdate: () => void;
+    lastDebounceCall: any;
+    componentWillUnmount(): void;
     UNSAFE_componentWillMount(): void;
     UNSAFE_componentWillReceiveProps(): void;
     render(): JSX.Element;
 }
-export { AutoCompleteStatusWrapper, AutoCompleteStatus };
+export { AutoCompleteStatusContainer, AutoCompleteStatus };

package/form/AutoComplete/Status/index.js

@@ -7,7 +7,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import AutoCompleteStatus from '@digigov/react-core/AutoCompleteStatus';
-import AutoCompleteStatusWrapper from '@digigov/react-core/AutoCompleteStatusWrapper';
+import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusContainer';
 var debounce = function debounce(func, wait, immediate) {
   var timeout;
   return function () {
@@ -26,6 +26,7 @@ var debounce = function debounce(func, wait, immediate) {
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
+    return timeout;
   };
 };
 var statusDebounceMillis = 1400;
@@ -44,9 +45,15 @@ var Status = /*#__PURE__*/function (_Component) {
       silenced: false
     };
     _this.debounceStatusUpdate = void 0;
+    _this.lastDebounceCall = void 0;
     return _this;
   }
   _createClass(Status, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.lastDebounceCall);
+    }
+  }, {
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
       // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -101,8 +108,8 @@ var Status = /*#__PURE__*/function (_Component) {
       } else {
         content = tResults === null || tResults === void 0 ? void 0 : tResults(length, contentSelectedOption);
       }
-      this.debounceStatusUpdate();
-      return /*#__PURE__*/React.createElement(AutoCompleteStatusWrapper, null, /*#__PURE__*/React.createElement(AutoCompleteStatus, {
+      this.lastDebounceCall = this.debounceStatusUpdate();
+      return /*#__PURE__*/React.createElement(AutoCompleteStatusContainer, null, /*#__PURE__*/React.createElement(AutoCompleteStatus, {
         id: id + '__status--A'
       }, !silenced && debounced && bump ? content : ' '), /*#__PURE__*/React.createElement(AutoCompleteStatus, {
         id: id + '__status--B'
@@ -130,4 +137,4 @@ Status.defaultProps = {
   }
 };
 export { Status as default };
-export { AutoCompleteStatusWrapper, AutoCompleteStatus };
+export { AutoCompleteStatusContainer, AutoCompleteStatus };

package/form/AutoComplete/__stories__/Multiple/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { AutoComplete } from '@digigov/ui/form/AutoComplete';
+import { suggest } from '@digigov/ui/form/AutoComplete/utils';
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer, Fieldset } from '@digigov/ui/form/FieldContainer';
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, {
+  marginBottom: 4
+}, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  multiple: true,
+  width: "50%",
+  id: "multiple-select-default"
+}))), /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"));
+export var Multiple = function Multiple() {
+  return _ref;
+};
+export default Multiple;

package/form/AutoComplete/__stories__/Multiple/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/form/AutoComplete/__stories__/Multiple/index.js"
+}

package/form/AutoComplete/__stories__/Multiple.d.ts

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

package/form/AutoComplete/__stories__/{WithInLine → MultipleShowingTwoSelected}/index.js

@@ -5,11 +5,12 @@ import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(AutoComplete, {
   source: suggest,
-  autoselect: true,
-  displayMenu: "inline",
-  id: "govgr"
+  multiple: true,
+  width: "75%",
+  id: "multiple-showing-two-selected",
+  numberOfSelected: 2
 })), /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"));
-export var WithInLine = function WithInLine() {
+export var MultipleShowingTwoSelected = function MultipleShowingTwoSelected() {
   return _ref;
 };
-export default WithInLine;
+export default MultipleShowingTwoSelected;

package/form/AutoComplete/__stories__/MultipleShowingTwoSelected/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/form/AutoComplete/__stories__/MultipleShowingTwoSelected/index.js"
+}

package/form/AutoComplete/__stories__/MultipleShowingTwoSelected.d.ts

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

package/form/AutoComplete/__stories__/MultipleWithDefaultValues/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { AutoComplete } from '@digigov/ui/form/AutoComplete';
+import { suggest } from '@digigov/ui/form/AutoComplete/utils';
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+var _ref = /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE");
+export var MultipleWithDefaultValues = function MultipleWithDefaultValues() {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(AutoComplete, {
+    source: suggest,
+    multiple: true,
+    defaultValue: ['Ελλάδα', 'Ιταλία'],
+    width: "50%",
+    id: "govgr"
+  })), _ref);
+};
+export default MultipleWithDefaultValues;

package/form/AutoComplete/__stories__/MultipleWithDefaultValues/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/form/AutoComplete/__stories__/MultipleWithDefaultValues/index.js"
+}

package/form/AutoComplete/__stories__/MultipleWithDefaultValues.d.ts

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

package/form/AutoComplete/__stories__/MultipleWithMinLength/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { AutoComplete } from '@digigov/ui/form/AutoComplete';
+import { suggest } from '@digigov/ui/form/AutoComplete/utils';
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer, Fieldset } from '@digigov/ui/form/FieldContainer';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Paragraph, null, "\u0395\u03B4\u03CE, \u03BF \u03B5\u03BB\u03AC\u03C7\u03B9\u03C3\u03C4\u03BF\u03C2 \u03B1\u03C1\u03B9\u03B8\u03BC\u03CC\u03C2 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD \u03C0\u03BF\u03C5 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03B9\u03C3\u03B1\u03C7\u03B8\u03B5\u03AF \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03B1\u03C1\u03C7\u03AF\u03C3\u03B5\u03B9 \u03BD\u03B1 \u03C6\u03B9\u03BB\u03C4\u03C1\u03AC\u03C1\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03B1\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B5\u03AF\u03BD\u03B1\u03B9 2."), /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, {
+  marginBottom: 4
+}, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  multiple: true,
+  minLength: 2,
+  width: "50%",
+  id: "multiple-select-default"
+}))), /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"));
+export var MultipleWithMinLength = function MultipleWithMinLength() {
+  return _ref;
+};
+export default MultipleWithMinLength;

package/form/AutoComplete/__stories__/MultipleWithMinLength/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/form/AutoComplete/__stories__/MultipleWithMinLength/index.js"
+}

package/form/AutoComplete/__stories__/MultipleWithMinLength.d.ts

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

package/form/AutoComplete/__stories__/WithShowAllValues/index.js

@@ -6,7 +6,6 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(AutoComplete, {
   source: suggest,
   autoselect: true,
-  showAllValues: true,
   id: "govgr"
 })), /*#__PURE__*/React.createElement(Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE"));
 export var WithShowAllValues = function WithShowAllValues() {

package/form/AutoComplete/index.d.ts

@@ -5,10 +5,13 @@ import AutoCompleteInput from '@digigov/react-core/AutoCompleteInput';
 import AutoCompleteInputTypeahead from '@digigov/react-core/AutoCompleteInputTypeahead';
 import AutoCompleteResultList from '@digigov/react-core/AutoCompleteResultList';
 import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultListItem';
-import AutoCompleteWrapper from '@digigov/react-core/AutoCompleteWrapper';
+import AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
+import AutoCompleteMultipleInputContainer from '@digigov/react-core/AutoCompleteMultipleInputContainer';
+import AutoCompleteMultipleInput from '@digigov/react-core/AutoCompleteMultipleInput';
 export interface AutoCompleteProps {
     source: (query: string, syncResults: (options: string[]) => void) => void;
     id: string;
+    multiple?: boolean;
     tStatusResults?: (x: number, y: string) => string;
     tStatusNoResults?: () => string;
     tStatusQueryTooShort?: (x: number) => string;
@@ -16,29 +19,27 @@ export interface AutoCompleteProps {
     tNoResults?: () => string;
     tAssistiveHint?: () => string;
     templates?: {
-        suggestion?: (value: any) => any;
+        suggestion?: (value: any, query: string | string[]) => any;
         inputValue?: (value: any) => string;
     };
     width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
     autoselect?: boolean;
-    defaultValue?: string;
-    displayMenu?: 'overlay' | 'inline';
+    defaultValue?: string | string[];
     minLength?: number;
     name?: string;
     placeholder?: string;
     onConfirm?: (x: any) => void;
     confirmOnBlur?: boolean;
-    showNoOptionsFound?: boolean;
-    showAllValues?: boolean;
     required?: boolean;
-    dropdownArrow?: React.ElementType;
+    numberOfSelected?: 1 | 2 | 3 | 'all';
 }
 export type State = {
     focused: any;
     hovered: any;
     menuOpen: boolean;
-    options: string[];
+    options: any[];
     query: string;
+    selectedValues: any[];
     validChoiceMade: boolean;
     selected: any;
     ariaHint: boolean;
@@ -51,36 +52,27 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     static defaultProps: {
         width: string;
         autoselect: boolean;
-        defaultValue: string;
-        displayMenu: string;
         minLength: number;
         name: string;
         placeholder: string;
         onConfirm: () => void;
         confirmOnBlur: boolean;
-        showNoOptionsFound: boolean;
-        showAllValues: boolean;
         required: boolean;
         tNoResults: () => string;
         tAssistiveHint: () => string;
-        dropdownArrow: (props: any) => JSX.Element;
     };
     elementReferences: {};
-    $pollInput: any;
     constructor(props: AutoCompleteProps);
     isQueryAnOption(query: string, options: string[]): boolean;
     componentDidMount(): void;
-    componentWillUnmount(): void;
-    pollInputElement(): void;
     getDirectInputChanges(): void;
     componentDidUpdate(_: any, prevState: Readonly<State>): void;
     hasAutoselect(): boolean;
     templateInputValue(value: string): string;
     templateSuggestion(value: string): string;
-    handleComponentBlur(newState: NewQueryProps): void;
+    handleComponentBlur(newState?: NewQueryProps): void;
     handleListMouseLeave(): void;
-    handleOptionBlur(event: React.FocusEvent<HTMLLIElement>, index: number): void;
-    handleInputBlur(): void;
+    handleAutoCompleteBlur(event: any, index?: number): void;
     handleInputChange(event: {
         target: any;
     }): void;
@@ -88,6 +80,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     handleInputFocus(): void;
     handleOptionFocus(index: number): void;
     handleOptionMouseEnter(index: number): void;
+    handleOptionClickMultiple(index: number): void;
     handleOptionClick(index: number): void;
     handleOptionMouseDown(event: {
         preventDefault: () => void;
@@ -114,4 +107,4 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     }): void;
     render(): JSX.Element;
 }
-export { AutoComplete, AutoCompleteInput, AutoCompleteInputTypeahead, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteWrapper, AutoCompleteAssistiveHint, };
+export { AutoComplete, AutoCompleteInput, AutoCompleteInputTypeahead, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteContainer, AutoCompleteAssistiveHint, AutoCompleteMultipleInputContainer, AutoCompleteMultipleInput, };