feat: upgrade bootstrap italia

Author: astagi

src/Autocomplete/Autocomplete.tsx

@@ -1,19 +1,29 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore non ci sono i types
-import BaseAutocomplete from 'accessible-autocomplete/react'; // Reference to https://www.npmjs.com/package/accessible-autocomplete
+import BaseAutocomplete from 'accessible-autocomplete/react';
+// Reference to https://www.npmjs.com/package/accessible-autocomplete
+// Implementation example: https://github.com/alphagov/accessible-autocomplete/blob/main/examples/react/index.html
 
 export interface AutocompleteAttributes {
   /** Identificativo */
-  id?: string;
+  id: string;
+  /** Label */
+  label: string;
+  /** Valori all'interno della select */
+  source: (query: string, syncResults: () => void) => void;
   /** Valori chiave - valore all'interno della select */
-  source: { value: string; label: string }[];
+  onConfirm?: (value: string) => void;
   /** Placeholder (default: ``) */
   placeholder?: string;
   /** Valore di default (default: ``) */
   defaultValue?: string;
   /** Modalità display menu (default: `inline`) */
   displayMenu?: string;
+  /** Utilizzare per mostrare il successo nella validazione del valore nel campo Input */
+  valid?: boolean;
+  /** Testo di validazione per l'elemento del moduleo form. */
+  validationText?: string;
   /** Funzione ritornante stringa in caso di nessun risultato */
   tNoResults?: () => string;
   /** Funzione ritornante stringa di suggerimento */
@@ -60,22 +70,63 @@ export const Autocomplete: FC<AutocompleteAttributes> = ({
   defaultValue = '',
   displayMenu = 'inline',
   source,
+  validationText,
+  onConfirm,
   ...attributes
 }) => {
+  const { id, valid } = attributes;
+  const validityCheck = valid === true || valid === false;
+
+  useEffect(() => {
+    const inputElement: HTMLInputElement = document.getElementById(id) as HTMLInputElement;
+    const labelElement = inputElement?.parentElement?.parentElement?.getElementsByTagName('label')[0];
+
+    if (inputElement.value !== '') {
+      labelElement?.classList.add('active');
+    }
+
+    inputElement?.addEventListener('focus', () => {
+      labelElement?.classList.add('active');
+    });
+    inputElement?.addEventListener('blur', () => {
+      if (inputElement.value === '') {
+        labelElement?.classList.remove('active');
+      }
+      if (onConfirm) {
+        onConfirm(inputElement.value);
+      }
+    });
+  }, [id]);
+
   return (
-    <BaseAutocomplete
-      id='autocomplete'
-      source={source}
-      placeholder={placeholder}
-      defaultValue={defaultValue}
-      displayMenu={displayMenu}
-      tAssistiveHint={tAssistiveHint}
-      tNoResults={tNoResults}
-      tStatusQueryTooShort={tStatusQueryTooShort}
-      tStatusNoResults={tStatusNoResults}
-      tStatusSelectedOption={tStatusSelectedOption}
-      tStatusResults={tStatusResults}
-      {...attributes}
-    />
+    <>
+      <label htmlFor={attributes.id}>{attributes.label}</label>
+      <BaseAutocomplete
+        source={source}
+        placeholder={placeholder}
+        defaultValue={defaultValue}
+        displayMenu={displayMenu}
+        tAssistiveHint={tAssistiveHint}
+        tNoResults={tNoResults}
+        tStatusQueryTooShort={tStatusQueryTooShort}
+        tStatusNoResults={tStatusNoResults}
+        tStatusSelectedOption={tStatusSelectedOption}
+        tStatusResults={tStatusResults}
+        onConfirm={onConfirm}
+        inputClasses={`form-control ${validityCheck && (valid === false ? 'is-invalid' : 'just-validate-success-field')}`}
+        showNoOptionsFound={true}
+        hintClasses='app-hint'
+        autoselect={false}
+        showAllValues={false}
+        templates={undefined}
+        confirmOnBlur={false}
+        menuAttributes={null}
+        menuClasses={null}
+        {...attributes}
+      />
+      <div className='form-feedback just-validate-error-label form-text form-feedback just-validate-error-label'>
+        {!valid && validationText}
+      </div>
+    </>
   );
 };

src/Input/Input.tsx

@@ -62,7 +62,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   decrementLabel?: string | ReactNode;
   /** Testo di esempio da utilizzare per il campo. */
   placeholder?: string;
-  /** Testo di validazione per l'elemento del moduleo form. */
+  /** Testo di validazione per l'elemento del modulo form. */
   validationText?: string;
   /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `Input` abbia la prop `id` impostata. */
   infoText?: string;