diff --git a/src/Autocomplete/Autocomplete.tsx b/src/Autocomplete/Autocomplete.tsx new file mode 100644 index 000000000..e9d3c7241 --- /dev/null +++ b/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 = ({ + tAssistiveHint = tAssistiveHintDefault, + tNoResults = tNoResultsDefault, + tStatusQueryTooShort = tStatusQueryTooShortDefault, + tStatusNoResults = tStatusNoResultsDefault, + tStatusSelectedOption = tStatusSelectedOptionDefault, + tStatusResults = tStatusResultsDefault, + placeholder = '', + defaultValue = '', + displayMenu = 'inline', + source, + ...attributes + }) => { + + return ; + }; + \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 196137072..01e55a7d8 100644 --- a/src/index.ts +++ b/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,53 @@ export type { UncontrolledCollapseProps, UncontrolledTooltipProps } from 'reactstrap'; + +// 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 { +// private _usingMouse: boolean; +// 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: Event) => { +// if (this._usingMouse) { +// if (evt.target) { +// (evt.target as HTMLElement).classList.add(CLASS_NAME_MOUSE_FOCUS); +// (evt.target as HTMLElement).setAttribute(DATA_MOUSE_FOCUS, 'true') +// } +// } +// }) +// document.addEventListener('focusout', (evt: Event) => { +// if (evt.target) { +// (evt.target as HTMLElement).classList.remove(CLASS_NAME_MOUSE_FOCUS); +// (evt.target as HTMLElement).setAttribute(DATA_MOUSE_FOCUS, 'false') +// } +// }) +// } +// } + +// new TrackFocus() diff --git a/stories/Components/Form/Input.stories.tsx b/stories/Components/Form/Input.stories.tsx index b998460d0..2d88d2949 100644 --- a/stories/Components/Form/Input.stories.tsx +++ b/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 = { title: 'Documentazione/Form/Input', diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap index 6834e7e6a..f528dbd67 100644 --- a/test/__snapshots__/Storybook.test.tsx.snap +++ b/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