@digigov/ui 2.0.0-85c27c19 → 2.0.0-aefd0709

package/src/feedback/WarningText/index.test.tsx

@@ -1,28 +1,29 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { AssistiveText } from '@digigov/ui/feedback/WarningText/__stories__/AssistiveText';
 import { Default } from '@digigov/ui/feedback/WarningText/__stories__/Default';
 import { Dense } from '@digigov/ui/feedback/WarningText/__stories__/Dense';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All WarningText variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="AssistiveText">
-      <AssistiveText />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="AssistiveText">
+        <AssistiveText />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/feedback/WarningText/index.tsx

@@ -1,3 +1,4 @@
 export * from '@digigov/react-core/WarningText';
 import WarningText from '@digigov/react-core/WarningText';
+export { WarningTextAssistive } from '@digigov/react-core/WarningTextAssistive';
 export default WarningText;

package/src/form/AutoComplete/Status/index.tsx

@@ -26,7 +26,7 @@ const debounce = function (
 };
 const statusDebounceMillis = 1400;
 
-type StatusProps = {
+interface StatusProps {
   id: string;
   length: number;
   queryLength: number;
@@ -39,13 +39,13 @@ type StatusProps = {
   tNoResults?: () => string;
   tSelectedOption: (x: string, y: number, z: number) => string;
   tResults?: (x: number, y: string) => string;
-};
+}
 
-type StateProps = {
+interface StateProps {
   bump: boolean;
   debounced: boolean;
   silenced: boolean;
-};
+}
 
 export default class Status extends Component<StatusProps, StateProps> {
   static defaultProps = {

package/src/form/AutoComplete/__stories__/Multiple.tsx

@@ -8,7 +8,12 @@ export const Multiple = () => (
   <div>
     <FieldContainer>
       <Fieldset marginBottom={4}>
-        <AutoComplete source={suggest} multiple width="50%" id="multiple-select-default" />
+        <AutoComplete
+          source={suggest}
+          multiple
+          width="50%"
+          id="multiple-select-default"
+        />
       </Fieldset>
     </FieldContainer>
     <Button>Υποβολή</Button>

package/src/form/AutoComplete/__stories__/MultipleShowingTwoSelected.tsx

@@ -7,7 +7,13 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 export const MultipleShowingTwoSelected = () => (
   <div>
     <FieldContainer>
-      <AutoComplete source={suggest} multiple width='75%' id="multiple-showing-two-selected" numberOfSelected={2} />
+      <AutoComplete
+        source={suggest}
+        multiple
+        width="75%"
+        id="multiple-showing-two-selected"
+        numberOfSelected={2}
+      />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/__stories__/MultipleWithDefaultValues.tsx

@@ -7,7 +7,13 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 export const MultipleWithDefaultValues = () => (
   <div>
     <FieldContainer>
-      <AutoComplete source={suggest} multiple defaultValue={['Ελλάδα', 'Ιταλία']} width="50%" id="govgr" />
+      <AutoComplete
+        source={suggest}
+        multiple
+        defaultValue={['Ελλάδα', 'Ιταλία']}
+        width="50%"
+        id="govgr"
+      />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/__stories__/MultipleWithMinLength.tsx

@@ -8,8 +8,8 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 export const MultipleWithMinLength = () => (
   <div>
     <Paragraph>
-      Εδώ, ο ελάχιστος αριθμός χαρακτήρων που πρέπει να
-      εισαχθεί ώστε να αρχίσει να φιλτράρεται η αναζήτηση είναι 2.
+      Εδώ, ο ελάχιστος αριθμός χαρακτήρων που πρέπει να εισαχθεί ώστε να αρχίσει
+      να φιλτράρεται η αναζήτηση είναι 2.
     </Paragraph>
     <FieldContainer>
       <Fieldset marginBottom={4}>

package/src/form/AutoComplete/__stories__/WithShowAllValues.tsx

@@ -7,11 +7,7 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 export const WithShowAllValues = () => (
   <div>
     <FieldContainer>
-      <AutoComplete
-        source={suggest}
-        autoselect={true}
-        id="govgr"
-      />
+      <AutoComplete source={suggest} autoselect={true} id="govgr" />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/doc.mdx

@@ -0,0 +1,50 @@
+---
+id: auto-complete
+title: AutoComplete
+---
+
+# AutoComplete
+
+Autocomplete is a feature in which an input field suggests a word based on user input. This allows users to quickly search
+through, select from large collections of options and help services get more consistent data.
+
+## How to use
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/Default.tsx" />
+
+### With auto select
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect.tsx" />
+
+### With default value
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue.tsx" />
+
+### With placeholder
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder.tsx" />
+
+### With all option's values
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues.tsx" />
+
+### With min length
+
+This is the minimum number of characters that should be entered before the AutoComplete will attempt to suggest options(in above example is 2)
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithMinLength.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["AutoCompleteWrapper",
+  "AutoCompleteStatus",
+  "AutoCompleteStatusWrapper",
+  "AutoCompleteInputTypeahead",
+  "AutoCompleteInput",
+  "AutoCompleteResultList",
+  "AutoCompleteResultListItem",
+  "AutoCompleteAssistiveHint"
+  ]} /> 

package/src/form/AutoComplete/index.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/form/AutoComplete/__stories__/Default';
 import { Multiple } from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
 import { MultipleShowingTwoSelected } from '@digigov/ui/form/AutoComplete/__stories__/MultipleShowingTwoSelected';
@@ -11,46 +10,48 @@ import { WithDefaultValue } from '@digigov/ui/form/AutoComplete/__stories__/With
 import { WithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/WithMinLength';
 import { WithPlaceHolder } from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
 import { WithShowAllValues } from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All AutoComplete variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Multiple">
-      <Multiple />
-    </TestVariant>
-    <TestVariant title="MultipleShowingTwoSelected">
-      <MultipleShowingTwoSelected />
-    </TestVariant>
-    <TestVariant title="MultipleWithDefaultValues">
-      <MultipleWithDefaultValues />
-    </TestVariant>
-    <TestVariant title="MultipleWithMinLength">
-      <MultipleWithMinLength />
-    </TestVariant>
-    <TestVariant title="WithAutoSelect">
-      <WithAutoSelect />
-    </TestVariant>
-    <TestVariant title="WithDefaultValue">
-      <WithDefaultValue />
-    </TestVariant>
-    <TestVariant title="WithMinLength">
-      <WithMinLength />
-    </TestVariant>
-    <TestVariant title="WithPlaceHolder">
-      <WithPlaceHolder />
-    </TestVariant>
-    <TestVariant title="WithShowAllValues">
-      <WithShowAllValues />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Multiple">
+        <Multiple />
+      </TestVariant>
+      <TestVariant title="MultipleShowingTwoSelected">
+        <MultipleShowingTwoSelected />
+      </TestVariant>
+      <TestVariant title="MultipleWithDefaultValues">
+        <MultipleWithDefaultValues />
+      </TestVariant>
+      <TestVariant title="MultipleWithMinLength">
+        <MultipleWithMinLength />
+      </TestVariant>
+      <TestVariant title="WithAutoSelect">
+        <WithAutoSelect />
+      </TestVariant>
+      <TestVariant title="WithDefaultValue">
+        <WithDefaultValue />
+      </TestVariant>
+      <TestVariant title="WithMinLength">
+        <WithMinLength />
+      </TestVariant>
+      <TestVariant title="WithPlaceHolder">
+        <WithPlaceHolder />
+      </TestVariant>
+      <TestVariant title="WithShowAllValues">
+        <WithShowAllValues />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/form/AutoComplete/index.tsx

@@ -1,24 +1,23 @@
-import React from 'react';
-import { Component } from 'react';
-import AutoCompleteAssistiveHint from '@digigov/react-core/AutoCompleteAssistiveHint';
-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 AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
-import AutoCompleteMultipleInputContainer from '@digigov/react-core/AutoCompleteMultipleInputContainer';
-import AutoCompleteMultipleInput from '@digigov/react-core/AutoCompleteMultipleInput';
-
+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';
+import { AutoCompleteResultListItem } from '@digigov/react-core/AutoCompleteResultListItem';
+import { Base } from '@digigov/react-core/Base';
 import { CaretIcon } from '@digigov/react-icons/CaretIcon';
+import { Chip, ChipContainer } from '@digigov/ui/content/Chip';
 import Status from '@digigov/ui/form/AutoComplete/Status';
 import {
   isIosDevice,
   keyCodes,
   isPrintableKeyCode,
 } from '@digigov/ui/form/AutoComplete/utils';
-import Checkbox, { CheckboxItem } from '../Checkbox';
-import { Chip, ChipContainer } from '@digigov/ui/content/Chip';
 import Button from '@digigov/ui/form/Button';
+import Checkbox, { CheckboxItem } from '@digigov/ui/form/Checkbox';
 import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export interface AutoCompleteProps {
@@ -47,7 +46,7 @@ export interface AutoCompleteProps {
   numberOfSelected?: 1 | 2 | 3 | 'all';
 }
 
-export type State = {
+export interface State {
   focused: any;
   hovered: any;
   menuOpen: boolean;
@@ -57,9 +56,12 @@ export type State = {
   validChoiceMade: boolean;
   selected: any;
   ariaHint: boolean;
-};
+}
 
-export type NewQueryProps = { menuOpen?: boolean; query?: string };
+export interface NewQueryProps {
+  menuOpen?: boolean;
+  query?: string;
+}
 
 export default class AutoComplete extends Component<AutoCompleteProps, State> {
   static defaultProps = {
@@ -136,7 +138,6 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
   componentDidMount(): void {
     this.getDirectInputChanges();
-
   }
 
   getDirectInputChanges(): void {
@@ -473,21 +474,32 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         break;
       case 'backspace':
         if (this.props.multiple) {
-          if (this.state.query.length === 0 && this.state.selectedValues.length > 0) {
+          if (
+            this.state.query.length === 0 &&
+            this.state.selectedValues.length > 0
+          ) {
             event.preventDefault();
-            const updatedSelectedValues = this.state.selectedValues.slice(0, -1);
-            this.setState({
-              selectedValues: updatedSelectedValues,
-            }, () => {
-              this.props.onConfirm?.(updatedSelectedValues);
-            });
-            break;
+            const updatedSelectedValues = this.state.selectedValues.slice(
+              0,
+              -1
+            );
+            this.setState(
+              {
+                selectedValues: updatedSelectedValues,
+              },
+              () => {
+                this.props.onConfirm?.(updatedSelectedValues);
+              }
+            );
+          } else {
+            if (isPrintableKeyCode(event.keyCode)) {
+              this.handlePrintableKey(event);
+            }
           }
-        }
-        else {
+        } else {
           this.props.onConfirm?.('');
-          break;
         }
+        break;
       default:
         if (isPrintableKeyCode(event.keyCode)) {
           this.handlePrintableKey(event);
@@ -545,8 +557,8 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     const assistiveHintID = id + '__assistiveHint';
     const ariaDescribedProp = ariaHint
       ? {
-        'aria-describedby': assistiveHintID,
-      }
+          'aria-describedby': assistiveHintID,
+        }
       : null;
 
     const showAutoCompleteResultListItems = (
@@ -558,7 +570,8 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           const showFocused =
             focused === -1 ? selected === index : focused === index;
           const iosPosinsetHtml = isIosDevice() ? (
-            <span
+            <Base
+              as="span"
               id={`${id}__option-suffix--${index}`}
               style={{
                 border: '0',
@@ -574,7 +587,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               }}
             >
               {index + 1} από {options.length}
-            </span>
+            </Base>
           ) : (
             ''
           );
@@ -603,7 +616,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
                 <CheckboxItem
                   value={option}
                   checked={this.state.selectedValues.includes(option)}
-                  onChange={() => { }}
+                  onChange={() => {}}
                 >
                   {this.templateSuggestion(option)}
                 </CheckboxItem>
@@ -649,29 +662,32 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
                   <Chip
                     key={index}
                     onDelete={() => {
-                      this.setState(prevState => ({
-                        selectedValues: prevState.selectedValues.filter(
-                          (v) => {
-                            if (typeof v === "string") {
-                              return v !== value;
-                            } else {
-                              return v.value !== value.value;
+                      this.setState(
+                        (prevState) => ({
+                          selectedValues: prevState.selectedValues.filter(
+                            (v) => {
+                              if (typeof v === 'string') {
+                                return v !== value;
+                              } else {
+                                return v.value !== value.value;
+                              }
                             }
-                          }
-                        ),
-                      }), () => {
-                        this.props.onConfirm?.(this.state.selectedValues);
-                      });
+                          ),
+                        }),
+                        () => {
+                          this.props.onConfirm?.(this.state.selectedValues);
+                        }
+                      );
                     }}
                   >
-                    {typeof value === "string" ? value : value.label.primary}
+                    {typeof value === 'string' ? value : value.label.primary}
                   </Chip>
                 );
               })}
               {!componentIsFocused &&
                 typeof this.props.numberOfSelected === 'number' &&
                 this.state.selectedValues.length >
-                this.props.numberOfSelected && (
+                  this.props.numberOfSelected && (
                   <NormalText fontWeight="bold" margin={0}>
                     +
                     {this.state.selectedValues.length -
@@ -755,7 +771,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           </AutoCompleteMultipleInputContainer>
         ) : (
           <>
-            <AutoCompleteInput
+            <AutoCompleteInputBase
               aria-expanded={menuOpen ? 'true' : 'false'}
               aria-activedescendant={
                 optionFocused ? `${id}__option--${focused}` : ''
@@ -806,7 +822,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
 export {
   AutoComplete,
-  AutoCompleteInput,
+  AutoCompleteInputBase,
   AutoCompleteInputTypeahead,
   AutoCompleteResultList,
   AutoCompleteResultListItem,

package/src/form/AutoComplete/interaction.test.tsx

@@ -4,15 +4,23 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Multiple } from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
 
 test('renders the Multiple show chip', async ({ mount, page }) => {
-  await mount(
-    <Multiple />
-  )
+  await mount(<Multiple />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div>fieldset>div>div:nth-child(2)>button").click();
- await page.locator("#root>div>div>fieldset>div>div:nth-child(2)>ul:nth-child(4)>div>li:nth-child(3)").click();
- await page.locator("#root>div>div>fieldset>div>div:nth-child(2)>button").click();
+  await page
+    .locator('#root>div>div>fieldset>div>div:nth-child(2)>button')
+    .click();
+  await page
+    .locator(
+      '#root>div>div>fieldset>div>div:nth-child(2)>ul:nth-child(4)>div>li:nth-child(3)'
+    )
+    .click();
+  await page
+    .locator('#root>div>div>fieldset>div>div:nth-child(2)>button')
+    .click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/form/AutoComplete/utils.ts

@@ -10,8 +10,8 @@ export function isIosDevice(): boolean | undefined {
   return (
     typeof navigator !== 'undefined' &&
     !!(
-      navigator.userAgent.match(/(iPod|iPhone|iPad)/g) &&
-      navigator.userAgent.match(/AppleWebKit/g)
+      navigator.userAgent?.match(/(iPod|iPhone|iPad)/g) &&
+      navigator.userAgent?.match(/AppleWebKit/g)
     )
   );
 }

package/src/form/Button/__snapshots__/index.spec.tsx.snap

@@ -1,17 +1,13 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the button 1`] = `
-<ForwardRef(Button)>
-  <ForwardRef(Base)
-    as="button"
-    className="ds-btn-primary ds-btn"
-    printHidden={true}
-  >
+<body>
+  <div>
     <button
-      className="ds-btn-primary ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-primary"
     >
       hello
     </button>
-  </ForwardRef(Base)>
-</ForwardRef(Button)>
+  </div>
+</body>
 `;