Merge pull request #166 from dnbexperience/develop

ship dropdown and textarea fixes

packages/dnb-design-system-portal/package.json

@@ -56,7 +56,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
-    "@mdx-js/mdx": "^1.0.7",
+    "@mdx-js/mdx": "^1.0.10",
     "@mdx-js/react": "^1.0.6",
     "babel-jest": "^24.7.1",
     "babel-plugin-emotion": "^10.0.9",
@@ -72,12 +72,12 @@
     "enzyme-adapter-react-16": "^1.12.1",
     "enzyme-to-json": "^3.3.5",
     "eslint": "^5.16.0",
-    "eslint-plugin-import": "^2.17.1",
+    "eslint-plugin-import": "^2.17.2",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
     "front-matter": "^3.0.2",
     "fs-extra": "^7.0.1",
-    "gatsby": "^2.3.23",
+    "gatsby": "^2.3.24",
     "gatsby-link": "^2.0.16",
     "gatsby-mdx": "^0.6.2",
     "gatsby-plugin-catch-links": "^2.0.13",
@@ -87,7 +87,7 @@
     "gatsby-plugin-postcss": "^2.0.7",
     "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-sass": "^2.0.11",
-    "gatsby-plugin-sharp": "^2.0.34",
+    "gatsby-plugin-sharp": "^2.0.35",
     "gatsby-remark-images": "^3.0.10",
     "gatsby-source-filesystem": "^2.0.29",
     "gh-pages": "^2.0.1",

packages/dnb-design-system-portal/src/pages/uilib/components/dropdown/Examples.js

@@ -30,25 +30,25 @@ class Example extends PureComponent {
           {`
 const scrollableData = [
   {
-    selected_value: 'Find me by keypress',
     content: 'A'
   },
   {
     content: 'B'
   },
   {
-    selected_value: 'CC',
+    selected_value: '1134.56.78962',
     content: ['1134.56.78962', 'C']
   },
   {
-    selected_value: 'DD',
+    selected_value: '1534.96.48901',
     content: ['1534.96.48901', 'D']
   },
   {
     content: 'E'
   },
   {
-    content: ['F', 'F', 'F', 'F', 'Find me by keypress']
+    selected_value: 'Find me by keypress',
+    content: ['F', 'F', 'F', 'F']
   },
   {
     content: 'G'
@@ -60,7 +60,7 @@ const scrollableData = [
 render(
   <Dropdown
     data={scrollableData}
-    selected_item={0}
+    selected_item={5}
     label="Label:"
   />
 )

packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js

@@ -137,11 +137,6 @@ export default class StickyMenuBar extends PureComponent {
                 }
               }) => (
                 <>
-                  {isIE11 && (
-                    <Advice>
-                      The Portal is not made for IE 11 users.
-                    </Advice>
-                  )}
                   <Header
                     css={[
                       hideSiebarToggleButton && hideSiebarToggleButtonStyle
@@ -153,6 +148,11 @@ export default class StickyMenuBar extends PureComponent {
                     )}
                   >
                     <HeaderInner>
+                      {isIE11 && (
+                        <Advice>
+                          The Portal is not made for IE 11 usage.
+                        </Advice>
+                      )}
                       <MainMenuToggleButton />
                       <CenterWrapper aria-hidden>
                         <Icon
@@ -192,10 +192,10 @@ export default class StickyMenuBar extends PureComponent {
 }
 
 const Advice = styled.div`
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
-  z-index: 1000;
+  z-index: 201;
   height: 1.5rem;
   width: 100vw;
   background-color: #e10076;

packages/dnb-ui-lib/package.json

@@ -77,7 +77,7 @@
     "@babel/runtime": "^7.4.3",
     "body-scroll-lock": "^2.6.1",
     "classnames": "^2.2.6",
-    "core-js": "2",
+    "core-js": "3",
     "keycode": "^2.2.0",
     "react-text-mask": "^5.4.3",
     "what-input": "^5.2.1"
@@ -102,8 +102,8 @@
     "@emotion/babel-plugin-core": "^0.6.9",
     "@emotion/core": "^10.0.10",
     "@emotion/styled": "^10.0.10",
-    "@storybook/react": "^5.0.6",
-    "@svgr/core": "^4.1.0",
+    "@storybook/react": "^5.0.9",
+    "@svgr/core": "^4.2.0",
     "audit-ci": "^1.6.0",
     "babel-jest": "^24.7.1",
     "babel-plugin-emotion": "^10.0.9",
@@ -120,10 +120,10 @@
     "detect-port": "^1.3.0",
     "dotenv": "^7.0.0",
     "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.11.2",
+    "enzyme-adapter-react-16": "^1.12.1",
     "enzyme-to-json": "^3.3.5",
     "eslint": "^5.16.0",
-    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-import": "^2.17.2",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-security": "^1.4.0",
@@ -156,24 +156,24 @@
     "mkdirp": "^0.5.1",
     "node-sass": "^4.11.0",
     "node-sass-once-importer": "^5.3.1",
-    "nodemon": "^1.18.10",
+    "nodemon": "^1.18.11",
     "ora": "^3.4.0",
     "packpath": "^0.1.0",
     "postcss-calc": "^7.0.1",
     "postcss-preset-env": "^6.6.0",
-    "prettier": "^1.16.4",
+    "prettier": "^1.17.0",
     "prettier-package-json": "^2.1.0",
     "prop-types": "^15.7.2",
     "puppeteer": "^1.14.0",
     "raw-loader": "^2.0.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-fake-props": "^0.3.1",
-    "rollup": "^1.9.0",
+    "rollup": "^1.10.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-node-resolve": "^4.1.0",
+    "rollup-plugin-node-resolve": "^4.2.3",
     "rollup-plugin-scss": "^1.0.1",
     "sass-loader": "^7.1.0",
     "sass-variable-parser": "^1.2.2",
@@ -183,11 +183,11 @@
     "simple-git": "^1.110.0",
     "stream-buffers": "^3.0.2",
     "style-loader": "^0.23.1",
-    "stylelint": "^9.10.1",
+    "stylelint": "^10.0.1",
     "stylelint-config-prettier": "^5.0.0",
-    "stylelint-config-standard": "^18.2.0",
-    "stylelint-scss": "^3.5.4",
-    "svgo": "^1.2.1",
+    "stylelint-config-standard": "^18.3.0",
+    "stylelint-scss": "^3.6.0",
+    "svgo": "^1.2.2",
     "tar": "^4.4.8",
     "text-mask-addons": "^3.8.0",
     "traverse": "^0.6.6"

packages/dnb-ui-lib/src/components/dropdown/Dropdown.js

@@ -117,14 +117,21 @@ export default class Dropdown extends Component {
   }
 
   static parseOpened = state => /true|on/.test(String(state))
-  static parseContentTitle = (dataItem, separator = '\n') => {
+  static parseContentTitle = (
+    dataItem,
+    { separator = '\n', removeNumericOnlyValues = false } = {}
+  ) => {
     let ret = ''
+    const onlyNumericRegex = /[0-9.,-\s]+/
     if (dataItem.content) {
       ret = Array.isArray(dataItem.content)
         ? dataItem.content
             .reduce((acc, cur) => {
               // remove only numbers
-              const found = cur && cur.match(/[0-9.,-\s]+/)
+              const found =
+                removeNumericOnlyValues &&
+                cur &&
+                cur.match(onlyNumericRegex)
               if (!(found && found[0].length === cur.length)) {
                 acc.push(cur)
               }
@@ -135,7 +142,10 @@ export default class Dropdown extends Component {
     } else if (typeof dataItem === 'string') {
       ret = dataItem
     }
-    if (dataItem.selected_value) {
+    if (
+      dataItem.selected_value &&
+      !onlyNumericRegex.test(dataItem.selected_value)
+    ) {
       ret = dataItem.selected_value + separator + ret
     }
     return ret
@@ -259,7 +269,7 @@ export default class Dropdown extends Component {
   // this gives us the possibility to quickly search for an item
   // by simply pressing any alfabetic key
   findItemByValue(value) {
-    let index
+    let index = -1
 
     try {
       // delete the cache
@@ -273,8 +283,12 @@ export default class Dropdown extends Component {
         this.searchCache ||
         this.state.data.reduce((acc, itemData, i) => {
           const str = String(
-            Dropdown.parseContentTitle(itemData, ' ')
+            Dropdown.parseContentTitle(itemData, {
+              removeNumericOnlyValues: true,
+              separator: ' '
+            })
           ).toLowerCase()
+
           acc[str[0]] = acc[str[0]] || []
           acc[str[0]].push({
             i
@@ -283,7 +297,7 @@ export default class Dropdown extends Component {
         }, {})
 
       const found = this.searchCache[value]
-      index = (found && found[0] && found[0].i) || -1
+      index = found && found[0] && found[0].i > -1 ? found[0].i : -1
 
       // if ther eare several of the same type
       if (found && found.length > 1) {
@@ -313,14 +327,15 @@ export default class Dropdown extends Component {
             `li.dnb-dropdown__option:nth-of-type(${active_item + 1})`
           )
           const top = liElement.offsetTop
-          if (scrollTo) {
-            liElement.parentNode.scrollTop = top
-            liElement.parentNode.scrollTo({
+          const { parentNode } = liElement
+          if (parentNode.scrollTo) {
+            parentNode.scrollTop = top
+          }
+          if (scrollTo && parentNode.scrollTo) {
+            parentNode.scrollTo({
               top,
               behavior: 'smooth'
             })
-          } else {
-            liElement.parentNode.scrollTop = top
           }
         } catch (e) {
           console.log('Dropdown could not scroll into element:', e)

packages/dnb-ui-lib/src/components/dropdown/__tests__/Dropdown.test.js

@@ -69,6 +69,36 @@ describe('Dropdown component', () => {
     expect(Comp.state().hidden).toBe(false)
   })
 
+  it('has correct selected_item on keydown "ArrowDown" and "Enter"', () => {
+    expect(Comp.state().selected_item).toBe(props.selected_item)
+    Comp.find('input').simulate('focus')
+    expect(Comp.state().active_item).toBe(props.selected_item)
+    Comp.find('input').simulate('keyDown', {
+      key: 'ArrowDown',
+      keyCode: 40
+    })
+    Comp.find('input').simulate('keyDown', {
+      key: 'Enter',
+      keyCode: 13
+    })
+    expect(Comp.state().active_item).toBe(props.selected_item + 1)
+    expect(Comp.state().selected_item).toBe(props.selected_item + 1)
+  })
+
+  it('has correct selected_item on key search', () => {
+    Comp.find('input').simulate('focus')
+    Comp.find('input').simulate('keyDown', {
+      key: 'B',
+      keyCode: 66
+    })
+    expect(Comp.state().active_item).toBe(0)
+    Comp.find('input').simulate('keyDown', {
+      key: 'F',
+      keyCode: 70
+    })
+    expect(Comp.state().active_item).toBe(2)
+  })
+
   it('has correct state after "blur" trigger', () => {
     Comp.find('input').simulate('blur')
     expect(Comp.state().opened).toBe(false)

packages/dnb-ui-lib/src/style/elements/textarea.scss

@@ -29,6 +29,13 @@
     0 0 0 calc(var(--textarea-padding-width) + 1px)
       var(--color-sea-green-alt);
 
+  /* IE11 fix */
+  @media screen and (-ms-high-contrast: active),
+    (-ms-high-contrast: none) {
+    -ms-overflow-style: -ms-autohiding-scrollba;
+    box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt);
+  }
+
   &.status--error,
   .dnb-textarea__status--error {
     box-shadow: var(--textarea-border-inner),