@dnb/eufemia 9.12.1 → 9.13.0

package/es/components/input-masked/InputMasked.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["mask", "number_mask", "currency_mask", "number_format", "as_currency", "as_number", "locale", "show_mask", "show_guide", "pipe", "keep_char_positions", "placeholder_char"];
+const _excluded = ["mask", "number_mask", "currency_mask", "number_format", "as_currency", "as_number", "as_percent", "locale", "show_mask", "show_guide", "pipe", "keep_char_positions", "placeholder_char"];
 
 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; }
 
@@ -13,12 +13,12 @@ import { format, cleanNumber, getCurrencySymbol, getDecimalSeparator, getThousan
 import Input, { inputPropTypes } from '../input/Input';
 import { warn, isTrue, registerElement, dispatchCustomElementEvent } from '../../shared/component-helper';
 import { IS_IE11 } from '../../shared/helpers';
-import _MaskedInput from 'react-text-mask';
+import TextMask from 'react-text-mask';
 import Context from '../../shared/Context';
 import createNumberMask from './addons/createNumberMask';
 import classnames from 'classnames';
 import keycode from 'keycode';
-const MaskedInput = _MaskedInput.default || _MaskedInput;
+const MaskedInput = TextMask.default || TextMask;
 export default class InputMasked extends React.PureComponent {
   static enableWebComponent() {
     registerElement(InputMasked === null || InputMasked === void 0 ? void 0 : InputMasked.tagName, InputMasked, InputMasked.defaultProps);
@@ -39,6 +39,7 @@ export default class InputMasked extends React.PureComponent {
       number_format,
       as_currency,
       as_number,
+      as_percent,
       locale,
       show_mask,
       show_guide,
@@ -64,13 +65,7 @@ export default class InputMasked extends React.PureComponent {
       locale = this.context.locale;
     }
 
-    if (as_number || as_currency) {
-      if (isTrue(as_number)) {
-        as_number = {};
-      } else if (isTrue(as_currency)) {
-        as_currency = {};
-      }
-
+    if (as_number || as_percent || as_currency || number_mask || currency_mask) {
       if (props.value !== 'initval') {
         var _this$context2, _this$context2$InputM;
 
@@ -86,25 +81,35 @@ export default class InputMasked extends React.PureComponent {
 
         _extends(options, (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : (_this$context2$InputM = _this$context2.InputMasked) === null || _this$context2$InputM === void 0 ? void 0 : _this$context2$InputM.number_format, number_format);
 
-        if (as_currency) {
+        if (currency_mask || as_currency) {
           var _this$context3, _this$context3$InputM;
 
           currency_mask = _objectSpread(_objectSpread({}, (_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : (_this$context3$InputM = _this$context3.InputMasked) === null || _this$context3$InputM === void 0 ? void 0 : _this$context3$InputM.currency_mask), currency_mask);
 
           if (currency_mask.allowDecimal !== false) {
-            currency_mask.decimalLimit = options.decimals = currency_mask.decimalLimit ?? 2;
+            currency_mask.decimalLimit = options.decimals = typeof currency_mask.decimalLimit !== 'undefined' ? currency_mask.decimalLimit : 2;
+          } else if (currency_mask.decimalLimit > 0) {
+            options.decimals = currency_mask.decimalLimit;
           }
-        } else if (as_number) {
+        } else if (number_mask || as_number || as_percent) {
           var _this$context4, _this$context4$InputM;
 
           number_mask = _objectSpread(_objectSpread({}, (_this$context4 = this.context) === null || _this$context4 === void 0 ? void 0 : (_this$context4$InputM = _this$context4.InputMasked) === null || _this$context4$InputM === void 0 ? void 0 : _this$context4$InputM.number_mask), number_mask);
 
-          if (number_mask.allowDecimal !== false && number_mask.decimalLimit > -1) {
+          if (number_mask.allowDecimal === true) {
+            number_mask.decimalLimit = options.decimals = typeof number_mask.decimalLimit !== 'undefined' ? number_mask.decimalLimit : 2;
+          } else if (number_mask.decimalLimit > 0) {
             options.decimals = number_mask.decimalLimit;
           }
         }
 
-        props.value = format(props.value, options);
+        if (as_percent) {
+          options.percent = true;
+        }
+
+        if (!isNaN(parseFloat(props.value))) {
+          props.value = format(props.value, options);
+        }
       }
 
       const thousandsSeparatorSymbol = getThousandsSeparator(locale).replace(' ', ' ');
@@ -119,11 +124,19 @@ export default class InputMasked extends React.PureComponent {
           decimalSymbol,
           thousandsSeparatorSymbol
         }, number_mask);
+      } else if (as_percent) {
+        var _props$value$match;
+
+        number_mask = _objectSpread({
+          decimalSymbol,
+          thousandsSeparatorSymbol,
+          suffix: ((_props$value$match = props.value.match(/((\s|)%)$/g, '$1')) === null || _props$value$match === void 0 ? void 0 : _props$value$match[0]) || ' %'
+        }, number_mask);
       } else if (as_currency) {
         currency_mask = _objectSpread({
           decimalSymbol,
           thousandsSeparatorSymbol,
-          currency: getCurrencySymbol(locale, typeof as_currency !== 'string' ? null : as_currency)
+          currency: getCurrencySymbol(locale, typeof as_currency === 'string' ? as_currency : null)
         }, currency_mask);
       }
     }
@@ -137,24 +150,17 @@ export default class InputMasked extends React.PureComponent {
         allowDecimal: ((_number_mask = number_mask) === null || _number_mask === void 0 ? void 0 : _number_mask.decimalLimit) > 0,
         decimalSymbol: ','
       }, (_this$context5 = this.context) === null || _this$context5 === void 0 ? void 0 : (_this$context5$InputM = _this$context5.InputMasked) === null || _this$context5$InputM === void 0 ? void 0 : _this$context5$InputM.number_mask), number_mask);
-      props.align = props.align || 'right';
     } else if (currency_mask) {
       var _this$context6, _this$context6$InputM;
 
       show_mask = true;
       placeholder_char = null;
-      props.align = props.align || 'right';
       maskParams = _objectSpread(_objectSpread({
         allowDecimal: true,
         decimalSymbol: ','
       }, (_this$context6 = this.context) === null || _this$context6 === void 0 ? void 0 : (_this$context6$InputM = _this$context6.InputMasked) === null || _this$context6$InputM === void 0 ? void 0 : _this$context6$InputM.currency_mask), currency_mask);
       const fix = typeof currency_mask === 'string' ? currency_mask : typeof currency_mask.currency === 'string' ? currency_mask.currency : 'kr';
-
-      if (props.align === 'left') {
-        maskParams.prefix = `${fix} `;
-      } else {
-        maskParams.suffix = ` ${fix}`;
-      }
+      maskParams.suffix = ` ${fix}`;
     }
 
     if (maskParams) {
@@ -220,27 +226,28 @@ export default class InputMasked extends React.PureComponent {
           return dispatchCustomElementEvent(this, name, {
             event,
             value,
-            numberValue,
+            numberValue: Number(numberValue),
+            cleanedValue: numberValue,
             cleaned_value: numberValue
           });
         };
 
         props.onMouseUp = event => {
-          fixPositionIssue(event.target, props);
+          correctPositionSelection(event, maskParams);
           callEvent({
             event
           }, 'on_mouse_up');
         };
 
         props.onTouchEnd = event => {
-          fixPositionIssue(event.target, props);
+          correctPositionSelection(event, maskParams);
           callEvent({
             event
           }, 'on_touch_end');
         };
 
         props.on_focus = params => {
-          fixPositionIssue(params.event.target, props);
+          correctPositionSelection(params.event, maskParams);
           callEvent(params, 'on_focus');
         };
 
@@ -287,6 +294,7 @@ _defineProperty(InputMasked, "defaultProps", _objectSpread(_objectSpread({}, Inp
   number_format: null,
   as_currency: null,
   as_number: null,
+  as_percent: null,
   locale: null,
   show_mask: false,
   show_guide: true,
@@ -309,6 +317,7 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   locale: PropTypes.string,
   as_currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   as_number: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  as_percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   show_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   show_guide: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   pipe: PropTypes.func,
@@ -321,26 +330,29 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   on_submit_focus: PropTypes.func,
   on_submit_blur: PropTypes.func
 }, inputPropTypes) : void 0;
-export const fixPositionIssue = (elem, {
-  align = 'right'
-} = {}) => {
+export const correctPositionSelection = (event, maskParams) => {
   clearTimeout(_selectionTimeout);
   _selectionTimeout = setTimeout(() => {
-    if (elem.value.length > 0) {
-      return;
-    }
-
     try {
-      const end = elem.selectionEnd;
+      const fix = (maskParams === null || maskParams === void 0 ? void 0 : maskParams.suffix) || (maskParams === null || maskParams === void 0 ? void 0 : maskParams.prefix);
 
-      if (elem.selectionStart === end && end === elem.value.length) {
-        let pos = 0;
+      if (fix) {
+        const elem = event.target;
+        const start = elem.selectionStart;
+        const fixStart = elem.value.indexOf(fix);
+        const fixEnd = fixStart + fix.length;
 
-        if (align === 'left') {
-          pos = end - 1;
-        }
+        if (start >= fixStart && start <= fixEnd) {
+          let pos = 0;
+
+          if (fixStart === 1) {
+            pos = fixStart - 1;
+          } else {
+            pos = fixStart;
+          }
 
-        elem.setSelectionRange(pos, pos);
+          elem.setSelectionRange(pos, pos);
+        }
       }
     } catch (e) {
       warn(e);

package/es/components/modal/ModalContent.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 const _excluded = ["triggeredBy"],
-      _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_close", "open_delay", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "toggleOpenClose", "children"];
+      _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_close", "open_delay", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "toggleOpenClose", "children"];
 
 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; }
 
@@ -270,6 +270,7 @@ export default class ModalContent extends React.PureComponent {
       header_content,
       modal_content,
       bar_content,
+      id: _id,
       close_title,
       dialog_title,
       hide_close_button,
@@ -310,9 +311,10 @@ export default class ModalContent extends React.PureComponent {
       minWidth = 0;
     }
 
+    const useDialogRole = !(IS_MAC || IS_SAFARI || IS_IOS);
     const contentParams = {
-      role: IS_MAC || IS_SAFARI || IS_IOS ? undefined : 'dialog',
-      'aria-modal': 'true',
+      role: useDialogRole ? 'dialog' : 'region',
+      'aria-modal': useDialogRole ? 'true' : undefined,
       'aria-labelledby': combineLabelledBy(this.props, title ? id + '-title' : null, labelled_by),
       'aria-describedby': combineDescribedBy(this.props, id + '-content'),
       'aria-label': !title && !labelled_by ? this.props.dialog_title : undefined,

package/es/components/number-format/NumberUtils.js

@@ -193,26 +193,31 @@ export const format = (value, {
     aria = display;
   }
 
-  const cleanedValue = formatNumber(value, locale, opts, item => {
-    switch (item.type) {
-      case 'currency':
-      case 'group':
-      case 'literal':
-        item.value = '';
-        return item;
+  if (returnAria) {
+    const cleanedValue = formatNumber(opts.style === 'percent' ? value / 100 : value, locale, opts, item => {
+      switch (item.type) {
+        case 'currency':
+        case 'group':
+        case 'literal':
+        case 'percentSign':
+          item.value = '';
+          return item;
 
-      default:
-        return item;
-    }
-  });
-  return returnAria ? {
-    value,
-    cleanedValue,
-    number: display,
-    aria,
-    locale,
-    type
-  } : display;
+        default:
+          return item;
+      }
+    });
+    return {
+      value,
+      cleanedValue,
+      number: display,
+      aria,
+      locale,
+      type
+    };
+  }
+
+  return display;
 };
 export const formatDecimals = (value, decimals, omit_rounding = false, opts = {}) => {
   decimals = parseFloat(decimals);

package/es/components/step-indicator/StepIndicator.d.ts

@@ -1,5 +1,69 @@
 import * as React from 'react';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
+export type StepIndicatorMode = 'static' | 'strict' | 'loose';
+export type StepIndicatorData =
+  | string
+  | string[]
+  | {
+      title: string | React.ReactNode;
+      is_current?: boolean;
+      inactive?: boolean;
+      disabled?: boolean;
+      status?: string | React.ReactNode;
+      status_state?: 'warn' | 'info' | 'error';
+
+      /**
+       * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+       */
+      on_click?: (...args: any[]) => any;
+      on_render?: (...args: any[]) => any;
+      url?: string;
+      is_active?: string | boolean;
+      url_future?: string;
+      url_passed?: string;
+    }[];
+export type StepIndicatorTitle = string | React.ReactNode;
+export type StepIndicatorStatus = string | React.ReactNode;
+export type StepIndicatorStatusState = 'warn' | 'info' | 'error';
+export type StepIndicatorIsActive = string | boolean;
+export type StepIndicatorCurrentStep = string | number;
+export type StepIndicatorActiveItem = string | number;
+export type StepIndicatorHideNumbers = string | boolean;
+export type StepIndicatorUseNavigation = string | boolean;
+export type StepIndicatorNoAnimation = string | boolean;
+export type StepIndicatorSkeleton = string | boolean;
+export type StepIndicatorSpace =
+  | string
+  | number
+  | boolean
+  | {
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+       */
+      top?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+       */
+      right?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+       */
+      bottom?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+       */
+      left?: string | number | boolean;
+    };
+export type StepIndicatorTop = string | number | boolean;
+export type StepIndicatorRight = string | number | boolean;
+export type StepIndicatorBottom = string | number | boolean;
+export type StepIndicatorLeft = string | number | boolean;
+export type StepIndicatorChildren =
+  | React.ReactNode
+  | ((...args: any[]) => any);
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
@@ -9,6 +73,92 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
    * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id?: string;
+
+  /**
+   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   */
+  mode?: StepIndicatorMode;
+
+  /**
+   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and example above.
+   */
+  data: StepIndicatorData;
+  title: StepIndicatorTitle;
+  is_current?: boolean;
+  inactive?: boolean;
+  disabled?: boolean;
+  status?: StepIndicatorStatus;
+  status_state?: StepIndicatorStatusState;
+
+  /**
+   * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+   */
+  on_click?: (...args: any[]) => any;
+  on_render?: (...args: any[]) => any;
+  url?: string;
+  is_active?: StepIndicatorIsActive;
+  url_future?: string;
+  url_passed?: string;
+  overview_title?: string;
+  step_title_extended?: string;
+  step_title?: string;
+
+  /**
+   * Defines the active number marked step starting by 0. Defaults to `0`.
+   */
+  current_step?: StepIndicatorCurrentStep;
+  active_item?: StepIndicatorActiveItem;
+  active_url?: string;
+
+  /**
+   * Define whether to show automatically counted numbers or not. Defaults to `false`.
+   */
+  hide_numbers?: StepIndicatorHideNumbers;
+  use_navigation?: StepIndicatorUseNavigation;
+
+  /**
+   * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
+   */
+  on_item_render?: (...args: any[]) => any;
+
+  /**
+   * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to false.
+   */
+  no_animation?: StepIndicatorNoAnimation;
+  skeleton?: StepIndicatorSkeleton;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: StepIndicatorSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: StepIndicatorTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: StepIndicatorRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: StepIndicatorBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: StepIndicatorLeft;
+  class?: string;
+  className?: string;
+  children?: StepIndicatorChildren;
+
+  /**
+   * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
+   */
+  on_change?: (...args: any[]) => any;
 }
 export default class StepIndicator extends React.Component<
   StepIndicatorProps,

package/es/components/step-indicator/StepIndicator.js

@@ -16,7 +16,7 @@ import StepIndicatorSidebar from './StepIndicatorSidebar';
 import StepIndicatorModal from './StepIndicatorModal';
 import StepIndicatorList from './StepIndicatorList';
 import { StepIndicatorProvider } from './StepIndicatorContext';
-import { stepIndicatorPropsTypes, stepIndicatorDefaultProps } from './StepIndicatorProps';
+import { stepIndicatorPropTypes, stepIndicatorDefaultProps } from './StepIndicatorProps';
 export default class StepIndicator extends React.PureComponent {
   static enableWebComponent() {
     registerElement(StepIndicator === null || StepIndicator === void 0 ? void 0 : StepIndicator.tagName, StepIndicator, StepIndicator.defaultProps);
@@ -162,4 +162,4 @@ _defineProperty(StepIndicator, "defaultProps", _objectSpread({
 
 process.env.NODE_ENV !== "production" ? StepIndicator.propTypes = _objectSpread({
   sidebar_id: PropTypes.string
-}, stepIndicatorPropsTypes) : void 0;
+}, stepIndicatorPropTypes) : void 0;

package/es/components/step-indicator/StepIndicatorProps.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import PropTypes from 'prop-types';
 import { spacingPropTypes } from '../space/SpacingHelper';
-export const stepIndicatorPropsTypes = _objectSpread(_objectSpread({
+export const stepIndicatorPropTypes = _objectSpread(_objectSpread({
   mode: PropTypes.oneOf(['static', 'strict', 'loose']),
   data: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,