@dnb/eufemia 9.26.0 → 9.28.0

package/es/components/autocomplete/Autocomplete.js

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _IconPrimary, _AlignmentHelper;
 
 const _excluded = ["fillDataIfEmpty"],
-      _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting"];
+      _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting", "ariaLiveDelay"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import keycode from 'keycode';
 import { warn, isTrue, isTouchDevice, makeUniqueId, extendPropsWithContext, registerElement, validateDOMAttributes, dispatchCustomElementEvent, getStatusState, combineDescribedBy, convertJsxToString, escapeRegexChars, getPreviousSibling } from '../../shared/component-helper';
-import { IS_MAC, IS_WIN, IS_IE11, IS_EDGE, debounce } from '../../shared/helpers';
+import { IS_MAC, IS_WIN, IS_IE11, IS_EDGE, debounce, hasSelectedText } from '../../shared/helpers';
 import AlignmentHelper from '../../shared/AlignmentHelper';
 import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
 import Suffix from '../../shared/helpers/Suffix';
@@ -25,7 +25,7 @@ import FormStatus from '../form-status/FormStatus';
 import IconPrimary from '../icon-primary/IconPrimary';
 import Input, { SubmitButton } from '../input/Input';
 import ProgressIndicator from '../progress-indicator/ProgressIndicator';
-import DrawerList from '../../fragments/drawer-list/DrawerList';
+import DrawerList, { ItemContent } from '../../fragments/drawer-list/DrawerList';
 import DrawerListContext from '../../fragments/drawer-list/DrawerListContext';
 import DrawerListProvider from '../../fragments/drawer-list/DrawerListProvider';
 import { drawerListPropTypes, parseContentTitle, getCurrentData } from '../../fragments/drawer-list/DrawerListHelpers';
@@ -67,6 +67,7 @@ _defineProperty(Autocomplete, "defaultProps", {
   aria_live_options: null,
   indicator_label: null,
   show_options_sr: null,
+  selected_sr: null,
   submit_button_title: null,
   submit_button_icon: 'chevron_down',
   input_ref: null,
@@ -127,6 +128,7 @@ _defineProperty(Autocomplete, "defaultProps", {
   children: null,
   custom_element: null,
   custom_method: null,
+  ariaLiveDelay: null,
   on_show: null,
   on_hide: null,
   on_type: null,
@@ -148,6 +150,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   aria_live_options: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   indicator_label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   show_options_sr: PropTypes.string,
+  selected_sr: PropTypes.string,
   submit_button_title: PropTypes.string,
   submit_button_icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
   input_ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -187,6 +190,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   input_element: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   data: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node, PropTypes.object]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.node]), PropTypes.shape({
     selected_value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    suffix_value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     content: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.string)])
   })]))]),
   search_in_word_index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -212,6 +216,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node, PropTypes.object, PropTypes.array]),
   custom_element: PropTypes.object,
   custom_method: PropTypes.func,
+  ariaLiveDelay: PropTypes.number,
   on_show: PropTypes.func,
   on_type: PropTypes.func,
   on_focus: PropTypes.func,
@@ -778,14 +783,14 @@ class AutocompleteInstance extends React.PureComponent {
       };
     });
 
-    _defineProperty(this, "hasShowMore", (data = this.context.drawerList.data) => {
+    _defineProperty(this, "hasInjectedDataItem", (data = this.context.drawerList.data) => {
       const lastItem = data.slice(-1)[0];
-      return lastItem && lastItem.show_all === true;
+      return lastItem ? lastItem.show_all || lastItem.__id === 'no_options' : false;
     });
 
     _defineProperty(this, "countData", (data = this.context.drawerList.data) => {
       const count = data.length;
-      return count > 0 && this.hasShowMore(data) ? count - 1 : count;
+      return count > 0 && this.hasInjectedDataItem(data) ? count - 1 : count;
     });
 
     _defineProperty(this, "hasValidData", (data = this.context.drawerList.data) => {
@@ -1139,6 +1144,13 @@ class AutocompleteInstance extends React.PureComponent {
       return res;
     });
 
+    _defineProperty(this, "setVisibleAndFocusOnInput", () => {
+      if (!this.state.hasFocus && !hasSelectedText()) {
+        this.setFocusOnInput();
+        this.setVisible();
+      }
+    });
+
     _defineProperty(this, "onSelectHandler", args => {
       if (parseFloat(args.active_item) > -1) {
         dispatchCustomElementEvent(this, 'on_select', _objectSpread(_objectSpread({}, args), this.getEventObjects('on_select')));
@@ -1296,11 +1308,13 @@ class AutocompleteInstance extends React.PureComponent {
     } = this.context.drawerList;
     const {
       aria_live_options,
-      no_options
+      no_options,
+      ariaLiveDelay = 1000
     } = this._props;
     clearTimeout(this._ariaLiveUpdateTimeout);
-    this._ariaLiveUpdateTimeout = setTimeout(() => {
-      if (opened) {
+
+    if (opened) {
+      this._ariaLiveUpdateTimeout = setTimeout(() => {
         let newString = null;
         const count = this.countData();
 
@@ -1320,13 +1334,32 @@ class AutocompleteInstance extends React.PureComponent {
               ariaLiveUpdate: null,
               _listenForPropChanges: false
             });
-          }, 1e3);
+          }, 1000);
         }
-      }
-    }, 1e3);
+      }, ariaLiveDelay);
+    }
+  }
+
+  getVocieOverActiveItem(selected_sr) {
+    if (IS_MAC) {
+      const {
+        active_item,
+        selected_item
+      } = this.context.drawerList;
+      const currentDataItem = getCurrentData(active_item, this.context.drawerList.data);
+      return React.createElement("span", {
+        className: "dnb-sr-only",
+        "aria-live": "assertive",
+        "aria-atomic": true
+      }, currentDataItem && React.createElement(React.Fragment, null, active_item === selected_item ? React.createElement(React.Fragment, null, selected_sr, " ") : null, React.createElement(ItemContent, null, currentDataItem)));
+    }
+
+    return null;
   }
 
   render() {
+    var _getCurrentData;
+
     const props = this._props = extendPropsWithContext(this.props, Autocomplete.defaultProps, this.context.getTranslation(this.props).Autocomplete, this.context.FormRow, this.context.Autocomplete);
 
     const {
@@ -1366,6 +1399,7 @@ class AutocompleteInstance extends React.PureComponent {
       search_numbers,
       search_in_word_index,
       show_options_sr,
+      selected_sr,
       submit_button_title,
       submit_button_icon,
       portal_class,
@@ -1391,7 +1425,8 @@ class AutocompleteInstance extends React.PureComponent {
       no_options,
       show_all,
       aria_live_options,
-      disable_highlighting
+      disable_highlighting,
+      ariaLiveDelay
     } = props,
           attributes = _objectWithoutProperties(props, _excluded2);
 
@@ -1416,7 +1451,7 @@ class AutocompleteInstance extends React.PureComponent {
     _extends(this.context.drawerList.attributes, this.attributes);
 
     const mainParams = {
-      className: classnames(`dnb-autocomplete dnb-autocomplete--${direction} dnb-form-component`, createSpacingClasses(props), _className, className, opened && 'dnb-autocomplete--opened', label_direction && `dnb-autocomplete--${label_direction}`, icon_position && `dnb-autocomplete--icon-position-${icon_position}`, align_autocomplete && `dnb-autocomplete--${align_autocomplete}`, visibleIndicator && 'dnb-autocomplete--show-indicator', size && `dnb-autocomplete--${size}`, isTrue(stretch) && `dnb-autocomplete--stretch`, status && `dnb-autocomplete__status--${status_state}`, showStatus && 'dnb-autocomplete__form-status')
+      className: classnames("dnb-autocomplete dnb-form-component", createSpacingClasses(props), _className, className, direction && `dnb-autocomplete--${direction}`, disabled && 'dnb-autocomplete--disabled', opened && 'dnb-autocomplete--opened', label_direction && `dnb-autocomplete--${label_direction}`, icon_position && `dnb-autocomplete--icon-position-${icon_position}`, align_autocomplete && `dnb-autocomplete--${align_autocomplete}`, visibleIndicator && 'dnb-autocomplete--show-indicator', size && `dnb-autocomplete--${size}`, isTrue(stretch) && `dnb-autocomplete--stretch`, status && `dnb-autocomplete__status--${status_state}`, showStatus && 'dnb-autocomplete__form-status')
     };
     const shellParams = {
       className: 'dnb-autocomplete__shell dnb-no-focus',
@@ -1495,6 +1530,7 @@ class AutocompleteInstance extends React.PureComponent {
       }, triggerParams));
     }
 
+    const suffixValue = (_getCurrentData = getCurrentData(selected_item, this.context.drawerList.original_data)) === null || _getCurrentData === void 0 ? void 0 : _getCurrentData.suffix_value;
     validateDOMAttributes(null, mainParams);
     validateDOMAttributes(null, shellParams);
     return React.createElement("span", mainParams, label && React.createElement(FormLabel, {
@@ -1530,6 +1566,10 @@ class AutocompleteInstance extends React.PureComponent {
       status: status ? status_state : null,
       status_state: status_state,
       type: null,
+      inner_element: suffixValue && React.createElement("span", {
+        onClick: disabled ? null : this.setVisibleAndFocusOnInput,
+        className: "dnb-autocomplete__suffix_value"
+      }, suffixValue),
       submit_element: submitButton,
       input_state: this.state.skipFocusDuringChange ? 'focus' : undefined,
       clear: isTrue(show_clear_button),
@@ -1568,16 +1608,12 @@ class AutocompleteInstance extends React.PureComponent {
       on_hide: this.onHideHandler,
       on_pre_change: this.onPreChangeHandler,
       on_key_down: this.onReserveActivityHandler,
-      onMouseDown: this.onReserveActivityHandler,
-      onTouchStart: this.onReserveActivityHandler
+      onMouseDown: this.onReserveActivityHandler
     })), suffix && React.createElement(Suffix, {
       className: "dnb-autocomplete__suffix",
       id: id + '-suffix',
       context: props
-    }, suffix))), IS_MAC && React.createElement("span", {
-      className: "dnb-sr-only",
-      "aria-live": "assertive"
-    }, AutocompleteInstance.getCurrentDataTitle(active_item, this.context.drawerList.original_data)), React.createElement("span", {
+    }, suffix))), this.getVocieOverActiveItem(selected_sr), React.createElement("span", {
       className: "dnb-sr-only",
       "aria-live": "assertive"
     }, ariaLiveUpdate));

package/es/components/autocomplete/style/_autocomplete.scss

@@ -51,6 +51,7 @@
 
   &__row {
     display: inline-flex;
+    align-items: center; // centers the suffix vertically
   }
 
   &--small {
@@ -76,6 +77,11 @@
       justify-content: center;
       align-items: center;
 
+      .dnb-drawer-list__option__item {
+        display: flex;
+        flex-direction: column;
+      }
+
       .dnb-icon {
         align-self: center;
       }
@@ -98,20 +104,81 @@
       width: 100%;
     }
   }
-  &--show-indicator &__input .dnb-input__icon {
-    color: transparent;
-  }
+
   &--opened .dnb-input__submit-button__button .dnb-icon {
     transform: rotate(180deg);
     transform-origin: 50% 50%;
   }
+  .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+    @include fakeBorder(
+      var(--color-black-55),
+      var(--input-border-width),
+      inset,
+      true
+    );
+  }
   .dnb-input__submit-button__button .dnb-icon {
     transition: transform 400ms ease-out;
+
+    html[data-visual-test] & {
+      transition-duration: 1ms !important;
+    }
   }
 
-  &__shell,
-  &__input {
-    border-radius: var(--autocomplete-border-radius);
+  // Support for "suffix_value"
+  .dnb-input {
+    &__inner__element {
+      position: relative;
+      z-index: 3;
+
+      cursor: text;
+    }
+
+    &--has-submit-element .dnb-input__placeholder,
+    &--has-submit-element .dnb-input__input {
+      @include allAbove(small) {
+        // same width of submit button
+        padding-right: 0 !important; // use important so we avoid to have all sizes in addition
+      }
+      @include allBelow(small) {
+        // same width of submit button
+        padding-right: 2.5rem !important; // use important so we avoid to have all sizes in addition
+      }
+    }
+
+    &__inner__element.dnb-p {
+      white-space: nowrap;
+      padding: 0 0.5rem;
+
+      @include allBelow(small) {
+        display: none;
+      }
+    }
+
+    &__inner__element.dnb-p,
+    .dnb-spacing &__inner__element.dnb-p {
+      margin: 0;
+    }
+
+    &--has-submit-element .dnb-input__inner__element {
+      // same width of submit button
+      margin-right: 2.5rem !important; // use important so we avoid to have all sizes in addition
+    }
+  }
+  &--icon-position-right .dnb-input {
+    // stylelint-disable-next-line
+    &__inner__element.dnb-p {
+      padding-right: 3rem;
+    }
+    &--icon-position-right &--icon-position-right#{&}--has-icon &__input {
+      padding-right: 1rem;
+    }
+  }
+  &--disabled .dnb-input {
+    // stylelint-disable-next-line
+    &__inner__element {
+      cursor: not-allowed;
+    }
   }
 
   &__text {

package/es/components/autocomplete/style/dnb-autocomplete.css

@@ -1469,11 +1469,6 @@ legend.dnb-form-label {
     word-break: normal;
     position: relative;
     z-index: 2; }
-  .dnb-input input.dnb-input__input {
-    font-size: 1.125rem;
-    font-size: var(--input-font-size);
-    line-height: 1.125rem;
-    line-height: var(--font-size-basis); }
   .dnb-input__input[disabled] {
     -moz-user-select: none;
      -ms-user-select: none;
@@ -1490,12 +1485,16 @@ legend.dnb-form-label {
     padding-left: 1rem;
     padding-left: var(--input-padding);
     padding-right: 1rem;
-    padding-right: var(--input-padding);
-    text-align: inherit;
+    padding-right: var(--input-padding); }
+  .dnb-input__placeholder, .dnb-input__input,
+  .dnb-input input.dnb-input__input {
+    padding-top: 0;
+    padding-bottom: 0;
     color: inherit;
     background-color: transparent;
     font-size: 1.125rem;
-    font-size: var(--input-font-size); }
+    font-size: var(--input-font-size);
+    line-height: inherit; }
   .dnb-input__placeholder {
     pointer-events: none;
     position: absolute;
@@ -3754,7 +3753,10 @@ legend.dnb-form-label {
   .dnb-autocomplete__row {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
-    display: inline-flex; }
+    display: inline-flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
   .dnb-autocomplete--small {
     line-height: 1.5rem;
     line-height: var(--autocomplete-height--small); }
@@ -3784,6 +3786,14 @@ legend.dnb-form-label {
             align-items: center;
     color: #007272;
     color: var(--color-sea-green); }
+    .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column; }
     .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-icon {
       -ms-flex-item-align: center;
           align-self: center; }
@@ -3800,21 +3810,76 @@ legend.dnb-form-label {
     .dnb-autocomplete__input .dnb-input__shell,
     .dnb-autocomplete__input .dnb-input__input {
       width: 100%; }
-  .dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon {
-    color: transparent; }
   .dnb-autocomplete--opened .dnb-input__submit-button__button .dnb-icon {
     -webkit-transform: rotate(180deg);
             transform: rotate(180deg);
     -webkit-transform-origin: 50% 50%;
             transform-origin: 50% 50%; }
+  .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+    --border-color: var(--color-black-55);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    -webkit-box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color);
+            box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color);
+        -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+                box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color);
+          -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+                  box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+        -webkit-box-shadow: inset 0 0 0 1px #737373;
+                box-shadow: inset 0 0 0 1px #737373;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-55);
+                box-shadow: inset 0 0 0 1px var(--color-black-55); } }
   .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
     -webkit-transition: -webkit-transform 400ms ease-out;
     transition: -webkit-transform 400ms ease-out;
     transition: transform 400ms ease-out;
     transition: transform 400ms ease-out, -webkit-transform 400ms ease-out; }
-  .dnb-autocomplete__shell, .dnb-autocomplete__input {
-    border-radius: 0.25rem;
-    border-radius: var(--autocomplete-border-radius); }
+    html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
+      -webkit-transition-duration: 1ms !important;
+              transition-duration: 1ms !important; }
+  .dnb-autocomplete .dnb-input__inner__element {
+    position: relative;
+    z-index: 3;
+    cursor: text; }
+  @media screen and (min-width: 40em) {
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+      padding-right: 0 !important; } }
+  @media screen and (max-width: 40em) {
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
+    .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+      padding-right: 2.5rem !important; } }
+  .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+    white-space: nowrap;
+    padding: 0 0.5rem; }
+    @media screen and (max-width: 40em) {
+      .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+        display: none; } }
+  .dnb-autocomplete .dnb-input__inner__element.dnb-p,
+  .dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+    margin: 0; }
+  .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element {
+    margin-right: 2.5rem !important; }
+  .dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p {
+    padding-right: 3rem; }
+  .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input {
+    padding-right: 1rem; }
+  .dnb-autocomplete--disabled .dnb-input__inner__element {
+    cursor: not-allowed; }
   .dnb-autocomplete__text {
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;