@digigov/ui 2.0.0-a32ad9b2 → 2.0.0-abd768eb

package/feedback/CopyToClipboard/__stories__/Banner.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Banner: () => React.JSX.Element;
+export declare const Banner: (_: any) => React.JSX.Element;
 export default Banner;

package/feedback/CopyToClipboard/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Default: () => React.JSX.Element;
+export declare const Default: (_: any) => React.JSX.Element;
 export default Default;

package/feedback/CopyToClipboard/__stories__/Dense.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Dense: () => React.JSX.Element;
+export declare const Dense: (_: any) => React.JSX.Element;
 export default Dense;

package/feedback/ErrorSummary/ErrorSummary.stories.d.ts

@@ -3,6 +3,8 @@ declare namespace _default {
     export let description: string;
     export let link: string;
     export { ErrorSummary as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;

package/feedback/ErrorSummary/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Default: () => React.JSX.Element;
+export declare const Default: (_: any) => React.JSX.Element;
 export default Default;

package/feedback/ErrorSummary/__stories__/Dense.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Dense: () => React.JSX.Element;
+export declare const Dense: (_: any) => React.JSX.Element;
 export default Dense;

package/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const ErrorGroupLinkedToInput: () => React.JSX.Element;
+export declare const ErrorGroupLinkedToInput: (_: any) => React.JSX.Element;
 export default ErrorGroupLinkedToInput;

package/feedback/ErrorSummary/__stories__/LinkedToCheckbox.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const LinkedToCheckbox: () => React.JSX.Element;
+export declare const LinkedToCheckbox: (_: any) => React.JSX.Element;
 export default LinkedToCheckbox;

package/feedback/ErrorSummary/__stories__/LinkedToField.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const LinkedToField: () => React.JSX.Element;
+export declare const LinkedToField: (_: any) => React.JSX.Element;
 export default LinkedToField;

package/feedback/ErrorSummary/__stories__/LinkedToInput.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const LinkedToInput: () => React.JSX.Element;
+export declare const LinkedToInput: (_: any) => React.JSX.Element;
 export default LinkedToInput;

package/feedback/ErrorSummary/__stories__/WithBackLinkAndButton.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const WithBackLinkAndButton: () => React.JSX.Element;
+export declare const WithBackLinkAndButton: (_: any) => React.JSX.Element;
 export default WithBackLinkAndButton;

package/feedback/NotificationBanner/NotificationBanner.stories.d.ts

@@ -4,6 +4,7 @@ declare namespace _default {
     export let description: string;
     export let link: string;
     export { NotificationBanner as component };
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;
@@ -70,4 +71,5 @@ export namespace WithControls {
 export { Default } from "@digigov/ui/feedback/NotificationBanner/__stories__/Default";
 export { Success } from "@digigov/ui/feedback/NotificationBanner/__stories__/Success";
 export { Dense } from "@digigov/ui/feedback/NotificationBanner/__stories__/Dense";
+export { Expanded } from "@digigov/ui/feedback/NotificationBanner/__stories__/Expanded";
 import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';

package/feedback/NotificationBanner/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Default: () => React.JSX.Element;
+export declare const Default: (_: any) => React.JSX.Element;
 export default Default;

package/feedback/NotificationBanner/__stories__/Dense.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Dense: () => React.JSX.Element;
+export declare const Dense: (_: any) => React.JSX.Element;
 export default Dense;

package/feedback/NotificationBanner/__stories__/Expanded.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const Expanded: (_: any) => React.JSX.Element;
+export default Expanded;

package/feedback/NotificationBanner/__stories__/Success.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Success: () => React.JSX.Element;
+export declare const Success: (_: any) => React.JSX.Element;
 export default Success;

package/feedback/PhaseBanner/PhaseBanner.stories.d.ts

@@ -3,6 +3,8 @@ declare namespace _default {
     export let description: string;
     export let link: string;
     export { PhaseBanner as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;

package/feedback/PhaseBanner/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Default: () => React.JSX.Element;
+export declare const Default: (_: any) => React.JSX.Element;
 export default Default;

package/feedback/PhaseBanner/__stories__/Underlined.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Underlined: () => React.JSX.Element;
+export declare const Underlined: (_: any) => React.JSX.Element;
 export default Underlined;

package/feedback/WarningText/WarningText.stories.d.ts

@@ -3,12 +3,15 @@ declare namespace _default {
     export let description: string;
     export let link: string;
     export { WarningText as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;
 export namespace WithControls {
     namespace args {
         let children: string;
+        let strong: boolean;
         let assistiveText: string;
         let dense: boolean;
     }
@@ -19,21 +22,29 @@ export namespace WithControls {
             }
         }
         export { children_1 as children };
-        export namespace assistiveText_1 {
+        export namespace strong_1 {
             export namespace control_1 {
                 let type_1: string;
                 export { type_1 as type };
             }
             export { control_1 as control };
         }
-        export { assistiveText_1 as assistiveText };
-        export namespace dense_1 {
+        export { strong_1 as strong };
+        export namespace assistiveText_1 {
             export namespace control_2 {
                 let type_2: string;
                 export { type_2 as type };
             }
             export { control_2 as control };
         }
+        export { assistiveText_1 as assistiveText };
+        export namespace dense_1 {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
         export { dense_1 as dense };
     }
     namespace parameters {

package/feedback/WarningText/__stories__/AssistiveText.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const AssistiveText: () => React.JSX.Element;
+export declare const AssistiveText: (_: any) => React.JSX.Element;
 export default AssistiveText;

package/feedback/WarningText/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Default: () => React.JSX.Element;
+export declare const Default: (_: any) => React.JSX.Element;
 export default Default;

package/feedback/WarningText/__stories__/Dense.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Dense: () => React.JSX.Element;
+export declare const Dense: (_: any) => React.JSX.Element;
 export default Dense;

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

@@ -1,6 +1,8 @@
 declare namespace _default {
     export let title: string;
     export { AutoComplete as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;
@@ -9,8 +11,10 @@ export namespace WithControls {
     namespace args {
         let width: string;
         let id: string;
-        let multiple: boolean;
         let autoselect: boolean;
+        let multiple: boolean;
+        let hint: boolean;
+        let placeholder: string;
         let minLength: number;
         let numberOfSelected: number;
         let defaultValue: string;
@@ -31,52 +35,89 @@ export namespace WithControls {
             export { control_1 as control };
         }
         export { id_1 as id };
-        export namespace multiple_1 {
+        export namespace autoselect_1 {
             export namespace control_2 {
                 let type_2: string;
                 export { type_2 as type };
             }
             export { control_2 as control };
+            export namespace _if {
+                let arg: string;
+                let eq: boolean;
+            }
+            export { _if as if };
         }
-        export { multiple_1 as multiple };
-        export namespace autoselect_1 {
+        export { autoselect_1 as autoselect };
+        export namespace multiple_1 {
             export namespace control_3 {
                 let type_3: string;
                 export { type_3 as type };
             }
             export { control_3 as control };
+            export namespace _if_1 {
+                let arg_1: string;
+                export { arg_1 as arg };
+                let eq_1: boolean;
+                export { eq_1 as eq };
+            }
+            export { _if_1 as if };
         }
-        export { autoselect_1 as autoselect };
-        export namespace minLength_1 {
+        export { multiple_1 as multiple };
+        export namespace hint_1 {
             export namespace control_4 {
                 let type_4: string;
                 export { type_4 as type };
             }
             export { control_4 as control };
         }
-        export { minLength_1 as minLength };
-        export namespace numberOfSelected_1 {
+        export { hint_1 as hint };
+        export namespace placeholder_1 {
             export namespace control_5 {
                 let type_5: string;
                 export { type_5 as type };
-                let options_1: (string | number | undefined)[];
-                export { options_1 as options };
             }
             export { control_5 as control };
-            export namespace _if {
-                let arg: string;
-                let eq: boolean;
+            export namespace _if_2 {
+                let arg_2: string;
+                export { arg_2 as arg };
+                let eq_2: boolean;
+                export { eq_2 as eq };
             }
-            export { _if as if };
+            export { _if_2 as if };
         }
-        export { numberOfSelected_1 as numberOfSelected };
-        export namespace defaultValue_1 {
+        export { placeholder_1 as placeholder };
+        export namespace minLength_1 {
             export namespace control_6 {
                 let type_6: string;
                 export { type_6 as type };
             }
             export { control_6 as control };
         }
+        export { minLength_1 as minLength };
+        export namespace numberOfSelected_1 {
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+                let options_1: (string | number | undefined)[];
+                export { options_1 as options };
+            }
+            export { control_7 as control };
+            export namespace _if_3 {
+                let arg_3: string;
+                export { arg_3 as arg };
+                let eq_3: boolean;
+                export { eq_3 as eq };
+            }
+            export { _if_3 as if };
+        }
+        export { numberOfSelected_1 as numberOfSelected };
+        export namespace defaultValue_1 {
+            export namespace control_8 {
+                let type_8: string;
+                export { type_8 as type };
+            }
+            export { control_8 as control };
+        }
         export { defaultValue_1 as defaultValue };
     }
     namespace parameters {
@@ -92,6 +133,8 @@ export { MultipleShowingTwoSelected } from "@digigov/ui/form/AutoComplete/__stor
 export { MultipleWithMinLength } from "@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength";
 export { WithAutoSelect } from "@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect";
 export { WithDefaultValue } from "@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue";
+export { WithCustomValue } from "@digigov/ui/form/AutoComplete/__stories__/WithCustomValue";
+export { WithHint } from "@digigov/ui/form/AutoComplete/__stories__/WithHint";
 export { WithPlaceHolder } from "@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder";
 export { WithShowAllValues } from "@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues";
 export { WithMinLength } from "@digigov/ui/form/AutoComplete/__stories__/WithMinLength";

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Default: () => React.JSX.Element;
+export declare const Default: (_: any) => React.JSX.Element;
 export default Default;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Multiple: () => React.JSX.Element;
+export declare const Multiple: (_: any) => React.JSX.Element;
 export default Multiple;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const MultipleShowingTwoSelected: () => React.JSX.Element;
+export declare const MultipleShowingTwoSelected: (_: any) => React.JSX.Element;
 export default MultipleShowingTwoSelected;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const MultipleWithDefaultValues: () => React.JSX.Element;
+export declare const MultipleWithDefaultValues: (_: any) => React.JSX.Element;
 export default MultipleWithDefaultValues;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const MultipleWithMinLength: () => React.JSX.Element;
+export declare const MultipleWithMinLength: (_: any) => React.JSX.Element;
 export default MultipleWithMinLength;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const WithAutoSelect: () => React.JSX.Element;
+export declare const WithAutoSelect: (_: any) => React.JSX.Element;
 export default WithAutoSelect;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const WithCustomValue: () => React.JSX.Element;
+export default WithCustomValue;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const WithDefaultValue: () => React.JSX.Element;
+export declare const WithDefaultValue: (_: any) => React.JSX.Element;
 export default WithDefaultValue;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const WithHint: () => React.JSX.Element;
+export default WithHint;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const WithMinLength: () => React.JSX.Element;
+export declare const WithMinLength: (_: any) => React.JSX.Element;
 export default WithMinLength;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const WithPlaceHolder: () => React.JSX.Element;
+export declare const WithPlaceHolder: (_: any) => React.JSX.Element;
 export default WithPlaceHolder;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const WithShowAllValues: () => React.JSX.Element;
+export declare const WithShowAllValues: (_: any) => React.JSX.Element;
 export default WithShowAllValues;

package/form/AutoComplete/index.d.ts

@@ -2,7 +2,6 @@ import React, { Component, type JSX } from 'react';
 import { AutoCompleteAssistiveHint } from '@digigov/react-core/AutoCompleteAssistiveHint';
 import { AutoCompleteContainer } from '@digigov/react-core/AutoCompleteContainer';
 import { AutoCompleteInputBase } from '@digigov/react-core/AutoCompleteInputBase';
-import { AutoCompleteInputTypeahead } from '@digigov/react-core/AutoCompleteInputTypeahead';
 import { AutoCompleteMultipleInput } from '@digigov/react-core/AutoCompleteMultipleInput';
 import { AutoCompleteMultipleInputContainer } from '@digigov/react-core/AutoCompleteMultipleInputContainer';
 import { AutoCompleteResultList } from '@digigov/react-core/AutoCompleteResultList';
@@ -23,6 +22,7 @@ export interface AutoCompleteProps {
     };
     width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
     autoselect?: boolean;
+    hint?: boolean;
     defaultValue?: string | string[];
     minLength?: number;
     name?: string;
@@ -54,6 +54,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         minLength: number;
         name: string;
         placeholder: string;
+        hint: boolean;
         onConfirm: () => void;
         confirmOnBlur: boolean;
         required: boolean;
@@ -106,4 +107,4 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     }): void;
     render(): JSX.Element;
 }
-export { AutoComplete, AutoCompleteInputBase, AutoCompleteInputTypeahead, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteContainer, AutoCompleteAssistiveHint, AutoCompleteMultipleInputContainer, AutoCompleteMultipleInput, };
+export { AutoComplete, AutoCompleteInputBase, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteContainer, AutoCompleteAssistiveHint, AutoCompleteMultipleInputContainer, AutoCompleteMultipleInput, };

package/form/AutoComplete/index.js

@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import { AutoCompleteAssistiveHint } from "@digigov/react-core/AutoCompleteAssistiveHint";
 import { AutoCompleteContainer } from "@digigov/react-core/AutoCompleteContainer";
 import { AutoCompleteInputBase } from "@digigov/react-core/AutoCompleteInputBase";
-import { AutoCompleteInputTypeahead } from "@digigov/react-core/AutoCompleteInputTypeahead";
 import { AutoCompleteMultipleInput } from "@digigov/react-core/AutoCompleteMultipleInput";
 import { AutoCompleteMultipleInputContainer } from "@digigov/react-core/AutoCompleteMultipleInputContainer";
 import { AutoCompleteResultList } from "@digigov/react-core/AutoCompleteResultList";
@@ -68,6 +67,7 @@ class AutoComplete extends Component {
       minLength: 0,
       name: "ds-input-autocomplete",
       placeholder: "",
+      hint: false,
       onConfirm: () => {
         return;
       },
@@ -121,12 +121,13 @@ class AutoComplete extends Component {
   }
   handleComponentBlur(newState) {
     const { options, query, selected } = this.state;
-    let newQuery;
-    if (this.props.confirmOnBlur) {
-      newQuery = newState?.query || query;
-      this.props.onConfirm?.(options[selected]);
-    } else {
-      newQuery = query;
+    const { confirmOnBlur, autoselect, onConfirm } = this.props;
+    let newQuery = query;
+    if (confirmOnBlur || autoselect) {
+      newQuery = newState?.query ?? query;
+    }
+    if (confirmOnBlur) {
+      onConfirm?.(options[selected]);
     }
     this.setState({
       focused: null,
@@ -142,6 +143,7 @@ class AutoComplete extends Component {
     });
   }
   handleAutoCompleteBlur(event, index) {
+    const { autoselect } = this.props;
     const { focused, options, query, selected } = this.state;
     let focusingOutsideComponent = false;
     if (event.relatedTarget === null) {
@@ -156,17 +158,26 @@ class AutoComplete extends Component {
       focusingAnotherOption = focused !== index && focused !== -1;
     }
     const blurComponent = focusingOutsideComponent && !(focusingAnotherOption || focusingInput || focusingButtonArrow);
-    if (blurComponent) {
+    if (blurComponent && !autoselect) {
       const newQuery = isIosDevice() ? query : this.templateInputValue(options[selected]);
       this.handleComponentBlur({
         menuOpen: false,
         query: newQuery
       });
     }
+    if (blurComponent && autoselect) {
+      const selectedOption = this.templateInputValue(
+        options[selected]
+      );
+      const newQuery = isIosDevice() ? query : selectedOption?.toLowerCase().includes(query.toLowerCase()) ? selectedOption : query;
+      this.handleComponentBlur({
+        menuOpen: false,
+        query: newQuery
+      });
+    }
   }
   handleInputChange(event) {
     const { source, minLength } = this.props;
-    const autoselect = this.hasAutoselect();
     const query = event.target.value;
     const queryEmpty = query.length === 0;
     this.setState({
@@ -179,7 +190,7 @@ class AutoComplete extends Component {
       this.setState({
         menuOpen: optionsAvailable,
         options,
-        selected: autoselect && optionsAvailable ? 0 : -1,
+        selected: -1,
         validChoiceMade: false
       });
     });
@@ -220,6 +231,7 @@ class AutoComplete extends Component {
         hovered: index
       });
     }
+    this.handleOptionFocus(index);
   }
   handleOptionClickMultiple(index) {
     const selectedOption = this.state.options[index];
@@ -346,11 +358,13 @@ class AutoComplete extends Component {
       case "enter":
         this.handleEnter(event);
         break;
-      case "escape":
+      case "escape": {
         this.handleComponentBlur({
-          query: this.state.query
+          query: this.state.query,
+          menuOpen: false
         });
         break;
+      }
       case "backspace":
         if (this.props.multiple) {
           if (this.state.query.length === 0 && this.state.selectedValues.length > 0) {
@@ -391,6 +405,7 @@ class AutoComplete extends Component {
       name,
       placeholder,
       required,
+      hint,
       tNoResults,
       tStatusQueryTooShort,
       tStatusNoResults,
@@ -421,7 +436,7 @@ class AutoComplete extends Component {
     const menuIsVisible = menuOpen || showNoOptionsFound;
     const selectedOptionText = this.templateInputValue(options[selected]);
     const optionBeginsWithQuery = selectedOptionText && selectedOptionText.toLowerCase().indexOf(query.toLowerCase()) === 0;
-    const hintValue = optionBeginsWithQuery && autoselect ? query + selectedOptionText.substr(query.length) : "";
+    const hintValue = optionBeginsWithQuery && (autoselect || hint) ? query + selectedOptionText.substr(query.length) : "";
     const assistiveHintID = id + "__assistiveHint";
     const ariaDescribedProp = ariaHint ? {
       "aria-describedby": assistiveHintID
@@ -504,7 +519,7 @@ class AutoComplete extends Component {
         tSelectedOption: tStatusSelectedOption,
         tResults: tStatusResults
       }
-    ), hintValue && (placeholder === "" || !placeholder) && /* @__PURE__ */ React.createElement(AutoCompleteInputTypeahead, { value: hintValue }), multiple ? /* @__PURE__ */ React.createElement(
+    ), multiple && !autoselect ? /* @__PURE__ */ React.createElement(
       AutoCompleteMultipleInputContainer,
       {
         isFocused: componentIsFocused,
@@ -552,7 +567,7 @@ class AutoComplete extends Component {
           onChange: this.handleInputChange,
           onFocus: this.handleInputFocus,
           name,
-          placeholder,
+          placeholder: hintValue || placeholder,
           ref: (inputElement) => {
             this.elementReferences[-1] = inputElement;
           },
@@ -576,7 +591,7 @@ class AutoComplete extends Component {
                 this.setState({
                   menuOpen: optionsAvailable,
                   options: options2,
-                  selected: autoselect && optionsAvailable ? 0 : -1,
+                  selected: -1,
                   validChoiceMade: false
                 });
               });
@@ -619,7 +634,7 @@ class AutoComplete extends Component {
         onChange: this.handleInputChange,
         onFocus: this.handleInputFocus,
         name,
-        placeholder,
+        placeholder: hintValue || placeholder,
         ref: (inputElement) => {
           this.elementReferences[-1] = inputElement;
         },
@@ -645,7 +660,6 @@ export {
   AutoCompleteAssistiveHint,
   AutoCompleteContainer,
   AutoCompleteInputBase,
-  AutoCompleteInputTypeahead,
   AutoCompleteMultipleInput,
   AutoCompleteMultipleInputContainer,
   AutoCompleteResultList,