@digigov/ui 2.0.0-cbc56209 → 2.0.0-fec6f1f7

package/navigation/Dropdown/Dropdown.stories.playwright.json

@@ -64,6 +64,22 @@
           "title": "Open dropdown action"
         }
       ]
+    },
+    "digigov-ui-navigation-dropdown--scrollable-content": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>details>summary"
+              }
+            }
+          ],
+          "id": "rZUYM--IzpfW",
+          "title": "open content"
+        }
+      ]
     }
   }
 }

package/navigation/Dropdown/__stories__/ScrollableContent/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
+var data = [{
+  name: 'Item 1',
+  href: '#'
+}, {
+  name: 'Item 2',
+  href: '#'
+}, {
+  name: 'Item 3',
+  href: '#'
+}, {
+  name: 'Item 4',
+  href: '#'
+}, {
+  name: 'Item 5',
+  href: '#'
+}, {
+  name: 'Item 6',
+  href: '#'
+}, {
+  name: 'Item 7',
+  href: '#'
+}, {
+  name: 'Item 8',
+  href: '#'
+}, {
+  name: 'Item 9',
+  href: '#'
+}, {
+  name: 'Item 10',
+  href: '#'
+}, {
+  name: 'Item 11',
+  href: '#'
+}, {
+  name: 'Item 12',
+  href: '#'
+}];
+var _ref = /*#__PURE__*/React.createElement(DropdownButton, {
+  role: "button",
+  "aria-haspopup": "true",
+  "aria-controls": "menu2",
+  arrow: true
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+export var ScrollableContent = function ScrollableContent() {
+  return /*#__PURE__*/React.createElement(Dropdown, null, _ref, /*#__PURE__*/React.createElement(DropdownContent, {
+    role: "menu",
+    id: "menu2",
+    scrollable: true
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: "vertical"
+  }, data.map(function (item) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, {
+      role: "menuitem",
+      href: item.href
+    }, item.name);
+  }))));
+};
+export default ScrollableContent;

package/navigation/Dropdown/__stories__/ScrollableContent/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/navigation/Dropdown/__stories__/ScrollableContent/index.js"
+}

package/navigation/Dropdown/__stories__/ScrollableContent.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ScrollableContent: () => JSX.Element;
+export default ScrollableContent;

package/navigation/NavList/types.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
 import { NavProps } from '@digigov/ui/navigation/NavList';
 export type NavListLayout = 'horizontal' | 'vertical';
 interface NavListItemMenuInterface {
@@ -25,7 +24,7 @@ export interface NavListAutoProps extends NavProps {
     floating?: boolean;
     subMenu?: boolean;
     links?: NavLinkInterface[];
-    style?: BaseCSSProperties;
+    style?: React.CSSProperties;
 }
 export interface NavListHeaderItemType {
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "2.0.0-cbc56209",
+  "version": "2.0.0-fec6f1f7",
   "description": "@digigov reusable components toolkit",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -8,18 +8,16 @@
     "@uides/react-qr-reader": "3.0.0",
     "yup": "0.32.11",
     "publint": "0.1.8",
-    "@digigov/react-icons": "2.0.0-cbc56209",
+    "@digigov/react-icons": "2.0.0-fec6f1f7",
     "dompurify": "3.0.6"
   },
   "peerDependencies": {
     "react-query": "2.26.4",
-    "@material-ui/core": "4.11.3",
-    "@material-ui/icons": "4.11.2",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "@digigov/react-core": "2.0.0-cbc56209",
-    "@digigov/css": "2.0.0-cbc56209"
+    "@digigov/react-core": "2.0.0-fec6f1f7",
+    "@digigov/css": "2.0.0-fec6f1f7"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/src/content/SafeHTML/index.tsx

@@ -26,7 +26,7 @@ const elementClassNameMapping = {
 };
 
 if (typeof window !== 'undefined') {
-  DomPurify.addHook('afterSanitizeAttributes', function (node) {
+  DomPurify.addHook('afterSanitizeAttributes', function(node) {
     if (node.tagName.toLowerCase() in elementClassNameMapping) {
       node.setAttribute(
         'class',
@@ -73,7 +73,7 @@ export const SafeHTML = ({
   content,
   tags,
   Tag = 'span',
-  style = {},
+  ...props
 }: SafeHTMLProps) => {
   if (tags) {
     tags.push(...defaultTags);
@@ -89,11 +89,10 @@ export const SafeHTML = ({
   return (
     <Tag
       // @ts-ignore
-      style={{ whiteSpace: 'break-spaces', ...style }}
-      className="ds-body"
       dangerouslySetInnerHTML={{
         __html: parsedHTML,
       }}
+      {...props}
     />
   );
 };

package/src/form/AutoComplete/AutoComplete.stories.js

@@ -5,8 +5,11 @@ export default {
   displayName: 'AutoComplete',
 };
 export * from '@digigov/ui/form/AutoComplete/__stories__/Default';
+export * from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
+export * from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues';
+export * from '@digigov/ui/form/AutoComplete/__stories__/MultipleShowingTwoSelected';
+export * from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
-export * from '@digigov/ui/form/AutoComplete/__stories__/WithInLine';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
 export * from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';

package/src/form/AutoComplete/AutoComplete.stories.playwright.json

@@ -0,0 +1,33 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-form-autocomplete--multiple": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>fieldset>div>div:nth-child(2)>button"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>fieldset>div>div:nth-child(2)>ul:nth-child(4)>div>li:nth-child(3)"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>fieldset>div>div:nth-child(2)>button"
+              }
+            }
+          ],
+          "id": "SP0dXbHKOZl7",
+          "title": "show chip"
+        }
+      ]
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import AutoCompleteStatus from '@digigov/react-core/AutoCompleteStatus';
-import AutoCompleteStatusWrapper from '@digigov/react-core/AutoCompleteStatusWrapper';
+import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusContainer';
 
 const debounce = function (
   func: () => void,
@@ -21,6 +21,7 @@ const debounce = function (
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
+    return timeout;
   };
 };
 const statusDebounceMillis = 1400;
@@ -72,7 +73,10 @@ export default class Status extends Component<StatusProps, StateProps> {
     silenced: false,
   };
   debounceStatusUpdate: () => void;
-
+  lastDebounceCall: any;
+  componentWillUnmount(): void {
+    clearTimeout(this.lastDebounceCall);
+  }
   UNSAFE_componentWillMount() {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this;
@@ -124,19 +128,19 @@ export default class Status extends Component<StatusProps, StateProps> {
       content = tResults?.(length, contentSelectedOption);
     }
 
-    this.debounceStatusUpdate();
+    this.lastDebounceCall = this.debounceStatusUpdate();
 
     return (
-      <AutoCompleteStatusWrapper>
+      <AutoCompleteStatusContainer>
         <AutoCompleteStatus id={id + '__status--A'}>
           {!silenced && debounced && bump ? content : ' '}
         </AutoCompleteStatus>
         <AutoCompleteStatus id={id + '__status--B'}>
           {!silenced && debounced && !bump ? content : ' '}
         </AutoCompleteStatus>
-      </AutoCompleteStatusWrapper>
+      </AutoCompleteStatusContainer>
     );
   }
 }
 
-export { AutoCompleteStatusWrapper, AutoCompleteStatus };
+export { AutoCompleteStatusContainer, AutoCompleteStatus };

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AutoComplete } from '@digigov/ui/form/AutoComplete';
+import { suggest } from '@digigov/ui/form/AutoComplete/utils';
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer, Fieldset } from '@digigov/ui/form/FieldContainer';
+
+export const Multiple = () => (
+  <div>
+    <FieldContainer>
+      <Fieldset marginBottom={4}>
+        <AutoComplete source={suggest} multiple width="50%" id="multiple-select-default" />
+      </Fieldset>
+    </FieldContainer>
+    <Button>Υποβολή</Button>
+  </div>
+);
+
+export default Multiple;

package/src/form/AutoComplete/__stories__/{WithInLine.tsx → MultipleShowingTwoSelected.tsx}

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

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

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

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { AutoComplete } from '@digigov/ui/form/AutoComplete';
+import { suggest } from '@digigov/ui/form/AutoComplete/utils';
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer, Fieldset } from '@digigov/ui/form/FieldContainer';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+
+export const MultipleWithMinLength = () => (
+  <div>
+    <Paragraph>
+      Εδώ, ο ελάχιστος αριθμός χαρακτήρων που πρέπει να
+      εισαχθεί ώστε να αρχίσει να φιλτράρεται η αναζήτηση είναι 2.
+    </Paragraph>
+    <FieldContainer>
+      <Fieldset marginBottom={4}>
+        <AutoComplete
+          source={suggest}
+          multiple
+          minLength={2}
+          width="50%"
+          id="multiple-select-default"
+        />
+      </Fieldset>
+    </FieldContainer>
+    <Button>Υποβολή</Button>
+  </div>
+);
+
+export default MultipleWithMinLength;

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

@@ -10,7 +10,6 @@ export const WithShowAllValues = () => (
       <AutoComplete
         source={suggest}
         autoselect={true}
-        showAllValues
         id="govgr"
       />
     </FieldContainer>

package/src/form/AutoComplete/index.mdx

@@ -20,14 +20,6 @@ through, select from large collections of options and help services get more con
   story="WithAutoSelect.tsx"
 />
 
-### AutoComplete with inline style
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithInLine.tsx"
-/>
-
 ### AutoComplete with default value
 
 <Story