@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-4be8f7cc

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,22 +19,19 @@ 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;
@@ -39,6 +39,7 @@ export type State = {
     menuOpen: boolean;
     options: string[];
     query: string;
+    selectedValues: string[];
     validChoiceMade: boolean;
     selected: any;
     ariaHint: boolean;
@@ -51,36 +52,28 @@ 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 +81,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 +108,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, };