Merge branch 'main' into feat/navscroll-review

package.json

@@ -37,7 +37,13 @@
       "main": "./dist/index.cjs"
     }
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "dist/track-focus.js",
+    "src/track-focus.js",
+    "dist/index.ts",
+    "dist/index.js",
+    "src/index.ts"
+  ],
   "files": [
     "dist",
     "src"

src/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,80 @@
+import React, { FC} 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
+
+export interface AutocompleteAttributes {
+    /** Identificativo */
+    id?: string;
+    /** Valori chiave - valore all'interno della select */
+    source: { value: string; label: string }[];
+    /** Placeholder (default: ``) */
+    placeholder?: string;
+    /** Valore di default (default: ``) */
+    defaultValue?: string;
+    /** Modalità display menu (default: `inline`) */
+    displayMenu?: string;
+    /** Funzione ritornante stringa in caso di nessun risultato */
+    tNoResults?: () => string;
+    /** Funzione ritornante stringa di suggerimento */
+    tAssistiveHint?: () => string;
+    /** Funzione ritornante stringa se la query è troppo corta */
+    tStatusQueryTooShort?: () => string;
+    /** Funzione ritornante stringa se non ci sono risultati di ricerca */
+    tStatusNoResults?: () => string;
+    /** Funzione ritornante stringa che identifica l'opzione selezionata */
+    tStatusSelectedOption?: () => string;
+    /** Funzione ritornante stringa che identifica i risultati */
+    tStatusResults?: () => string;
+    /** Classi aggiuntive da usare per il componente Button */
+    className?: string;
+    testId?: string;
+}
+
+
+const tAssistiveHintDefault = () =>
+      'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento'
+const tNoResultsDefault = () => 'Nessun risultato trovato'
+const tStatusQueryTooShortDefault = (minQueryLength: number) => `Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`
+const tStatusNoResultsDefault = () => 'Nessun risultato di ricerca'
+const tStatusSelectedOptionDefault = (selectedOption: number, length: number, index: number) => `${selectedOption} ${index + 1} di ${length} è sottolineato`
+const tStatusResultsDefault = (length: number, contentSelectedOption: number) => {
+        const words = {
+        result: length === 1 ? 'risultato' : 'risultati',
+        is: length === 1 ? 'è' : 'sono',
+        available: length === 1 ? 'disponibile' : 'disponibili',
+    }
+
+    return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`
+}
+
+export const Autocomplete: FC<AutocompleteAttributes>  = ({
+    tAssistiveHint = tAssistiveHintDefault,
+    tNoResults = tNoResultsDefault,
+    tStatusQueryTooShort = tStatusQueryTooShortDefault,
+    tStatusNoResults = tStatusNoResultsDefault,
+    tStatusSelectedOption = tStatusSelectedOptionDefault,
+    tStatusResults = tStatusResultsDefault,
+    placeholder = '',
+    defaultValue = '',
+    displayMenu = 'inline',
+    source,
+    ...attributes
+  }) => {
+
+    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}
+    />;
+  };
+

src/index.ts

@@ -47,6 +47,7 @@ export {
   Util
 } from 'reactstrap';
 
+export { Autocomplete } from './Autocomplete/Autocomplete';
 export { Accordion } from './Accordion/Accordion';
 export { AccordionBody } from './Accordion/AccordionBody';
 export { AccordionHeader } from './Accordion/AccordionHeader';
@@ -297,3 +298,5 @@ export type {
   UncontrolledCollapseProps,
   UncontrolledTooltipProps
 } from 'reactstrap';
+
+import "./track-focus.js"

src/track-focus.js

@@ -0,0 +1,49 @@
+
+// Focus Management
+
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+const DATA_MOUSE_FOCUS = 'data-focus-mouse'
+const CLASS_NAME_MOUSE_FOCUS = 'focus--mouse'
+
+class TrackFocus {
+  constructor() {
+    this._usingMouse = false
+
+    this._bindEvents()
+  }
+
+  _bindEvents() {
+    if (typeof document === 'undefined') {
+      return
+    }
+    const events = ['keydown', 'mousedown']
+    events.forEach((evtName) => {
+      document.addEventListener(evtName, (evt) => {
+        this._usingMouse = evt.type === 'mousedown'
+      })
+    })
+    document.addEventListener('focusin', (evt) => {
+      if (this._usingMouse) {
+        if (evt.target) {
+          evt.target.classList.add(CLASS_NAME_MOUSE_FOCUS);
+          evt.target.setAttribute(DATA_MOUSE_FOCUS, 'true')
+        }
+      }
+    })
+    document.addEventListener('focusout', (evt) => {
+      if (evt.target) {
+        evt.target.classList.remove(CLASS_NAME_MOUSE_FOCUS);
+        evt.target.setAttribute(DATA_MOUSE_FOCUS, 'false')
+      }
+    })
+  }
+}
+
+new TrackFocus()

stories/Components/Form/Input.stories.tsx

@@ -1,9 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore non ci sono i types
-import Autocomplete from 'accessible-autocomplete/react'; // Reference to https://www.npmjs.com/package/accessible-autocomplete
 import React, { useState } from 'react';
-import { Button, FormGroup, Icon, Input, TextArea } from '../../../src';
+import { Button, FormGroup, Icon, Input, TextArea, Autocomplete } from '../../../src';
 
 const meta: Meta<typeof Input> = {
   title: 'Documentazione/Form/Input',

test/__snapshots__/Storybook.test.tsx.snap

@@ -20570,7 +20570,7 @@ exports[`Stories Snapshots Documentazione/Form/Input _InputAutocompleteConDatiAc
         id="autocomplete__assistiveHint"
         style="display: none;"
       >
-        When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.
+        Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento
       </span>
     </div>
   </div>

tsup.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
-  entry: ['src/**/*.@(ts|tsx)'],
+  entry: ['src/**/*.@(js|ts|tsx)'],
   format: ['cjs', 'esm'],
   target: 'esnext',
   dts: false,