@dnb/eufemia 9.17.2 → 9.18.0

package/es/components/input/Input.d.ts

@@ -89,7 +89,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   type?: string;
 
   /**
-   * The sizes you can sue is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if You define a number like `size="2"` then the it will be forwarded as the input element attribute.
+   * The sizes you can sue is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if You define a number like `size="2"` then it will be forwarded as the input element attribute.
    */
   size?: InputSize;
 
@@ -120,7 +120,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   status?: InputStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -141,7 +141,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   global_status_id?: string;
 
   /**
-   * Defaults to `off`. Set to `on` or any of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete">allowed `attributes`</a>. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendants of a `<form>` element, 3. and have a submit button inside the form.
+   * Defaults to `off`. Set to `on` or any of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete">allowed `attributes`</a>. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `<form>` element, 3. and have a submit button inside the form.
    */
   autocomplete?: string;
 
@@ -162,7 +162,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   clear?: InputClear;
 
   /**
-   * Set to `true` in case the `placeholder` has to be kept during focus. By default the placeholder disappears on focus.
+   * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.
    */
   keep_placeholder?: InputKeepPlaceholder;
 
@@ -199,17 +199,17 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   input_class?: string;
 
   /**
-   * Provide the Input element with any attributes by using an Object `input_attributes={{size:&#39;2&#39;}}` or a JSON Object `input_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be send along and set as a Input element attribute.
+   * Provide the Input element with any attributes by using an Object `input_attributes={{size:&#39;2&#39;}}` or a JSON Object `input_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.
    */
   input_attributes?: InputInputAttributes;
 
   /**
-   * <em>(internal)</em> by providing a new component we can change the internal used element. Also supports a string only, like `input_element="input"`.
+   * <em>(internal)</em> by providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`.
    */
   input_element?: InputInputElement;
 
   /**
-   * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon, or a Component using a SVG icon of either 16px or 24px.
+   * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px.
    */
   icon?: InputIcon;
 
@@ -224,7 +224,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   icon_position?: InputIconPosition;
 
   /**
-   * By providing a React.ref we can get the internal used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
+   * By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   inner_ref?: InputInnerRef;
   readOnly?: InputReadOnly;
@@ -267,7 +267,7 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on value changes made by the user. Returns an object with the value as a string and the a native event: `{ value, event }`.
+   * Will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`.
    */
   on_change?: (...args: any[]) => any;
 

package/es/components/input-masked/InputMasked.d.ts

@@ -96,7 +96,7 @@ export type InputMaskedChildren =
  */
 export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   /**
-   * A mask can be define both as a <a href="https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme">RegExp style of characters</a> or a callback function. Example below.
+   * A mask can be defined both as a <a href="https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme">RegExp style of characters</a> or a callback function. Example below.
    */
   mask?: InputMaskedMask;
 
@@ -106,7 +106,7 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   number_mask?: InputMaskedNumberMask;
 
   /**
-   * Set to `true` or set the <em>valuta</em> (currency_mask="kr") to enable the a custom currency mask – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. Defaults to `kr`.
+   * Set to `true` or set the <em>valuta</em> (currency_mask="kr") to enable a custom currency mask – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. Defaults to `kr`.
    */
   currency_mask?: InputMaskedCurrencyMask;
 
@@ -162,12 +162,12 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   placeholder_char?: string;
 
   /**
-   * By providing a React.ref we can get the internal used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
+   * By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   inner_ref?: Object;
 
   /**
-   * Will be called on value changes made by the user. Returns an object with the value as a string and the a native event: `{ value, event }`.
+   * Will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`.
    */
   on_change?: (...args: any[]) => any;
 
@@ -194,7 +194,7 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   type?: string;
 
   /**
-   * The sizes you can sue is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if You define a number like `size="2"` then the it will be forwarded as the input element attribute.
+   * The sizes you can sue is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if You define a number like `size="2"` then it will be forwarded as the input element attribute.
    */
   size?: InputMaskedSize;
 
@@ -225,7 +225,7 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   status?: InputMaskedStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -246,7 +246,7 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   global_status_id?: string;
 
   /**
-   * Defaults to `off`. Set to `on` or any of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete">allowed `attributes`</a>. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendants of a `<form>` element, 3. and have a submit button inside the form.
+   * Defaults to `off`. Set to `on` or any of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete">allowed `attributes`</a>. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `<form>` element, 3. and have a submit button inside the form.
    */
   autocomplete?: string;
 
@@ -267,7 +267,7 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   clear?: InputMaskedClear;
 
   /**
-   * Set to `true` in case the `placeholder` has to be kept during focus. By default the placeholder disappears on focus.
+   * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.
    */
   keep_placeholder?: InputMaskedKeepPlaceholder;
 
@@ -304,17 +304,17 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   input_class?: string;
 
   /**
-   * Provide the Input element with any attributes by using an Object `input_attributes={{size:&#39;2&#39;}}` or a JSON Object `input_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be send along and set as a Input element attribute.
+   * Provide the Input element with any attributes by using an Object `input_attributes={{size:&#39;2&#39;}}` or a JSON Object `input_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.
    */
   input_attributes?: InputMaskedInputAttributes;
 
   /**
-   * <em>(internal)</em> by providing a new component we can change the internal used element. Also supports a string only, like `input_element="input"`.
+   * <em>(internal)</em> by providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`.
    */
   input_element?: InputMaskedInputElement;
 
   /**
-   * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon, or a Component using a SVG icon of either 16px or 24px.
+   * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px.
    */
   icon?: InputMaskedIcon;
 

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

@@ -8,18 +8,20 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { registerElement } from '../../shared/component-helper';
+import { registerElement, extendPropsWithContext } from '../../shared/component-helper';
 import InputMaskedContext from './InputMaskedContext';
 import InputMaskedElement from './InputMaskedElement';
 import Input, { inputPropTypes } from '../input/Input';
 import Context from '../../shared/Context';
 const InputMasked = React.forwardRef((props, ref) => {
   const context = React.useContext(Context);
+  const contextAndProps = React.useCallback(extendPropsWithContext(props, InputMasked.defaultProps, context === null || context === void 0 ? void 0 : context.InputMasked), [props, InputMasked.defaultProps, context === null || context === void 0 ? void 0 : context.InputMasked]);
   return React.createElement(InputMaskedContext.Provider, {
-    value: _objectSpread({
+    value: {
       inner_ref: ref,
-      props
-    }, context)
+      props: contextAndProps,
+      context
+    }
   }, _InputMaskedElement || (_InputMaskedElement = React.createElement(InputMaskedElement, null)));
 });
 export default InputMasked;

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

@@ -11,7 +11,6 @@ import React from 'react';
 import classnames from 'classnames';
 import { cleanNumber, getCurrencySymbol } from '../number-format/NumberUtils';
 import { isTrue, dispatchCustomElementEvent } from '../../shared/component-helper';
-import Context from '../../shared/Context';
 import TextMask from './TextMask';
 import createNumberMask from './addons/createNumberMask';
 import keycode from 'keycode';
@@ -55,9 +54,9 @@ export const useInputElementRef = () => {
 };
 export const useLocale = () => {
   const {
-    props
+    props,
+    context
   } = React.useContext(InputMaskedContext);
-  const context = React.useContext(Context);
   let {
     locale
   } = props;
@@ -70,23 +69,21 @@ export const useLocale = () => {
 };
 export const useLocalValue = () => {
   const {
-    props
+    props,
+    context
   } = React.useContext(InputMaskedContext);
-  const context = React.useContext(Context);
   const maskParams = useNumberMaskParams() || {};
   const locale = useLocale();
   const [localValue, setLocalValue] = React.useState(() => correctNumberValue({
-    props,
-    context,
     locale,
+    props,
     maskParams
   }));
   React.useEffect(() => {
     const value = correctNumberValue({
       localValue,
-      props,
-      context,
       locale,
+      props,
       maskParams
     });
     setLocalValue(value);
@@ -98,8 +95,11 @@ export const useLocalValue = () => {
 };
 export const useNumberMask = () => {
   const maskParams = useNumberMaskParams();
+  const {
+    props
+  } = React.useContext(InputMaskedContext);
 
-  if (!maskParams) {
+  if (!maskParams || !isRequestingNumberMask(props)) {
     return null;
   }
 
@@ -107,7 +107,7 @@ export const useNumberMask = () => {
   mask.maskParams = maskParams;
   return mask;
 };
-export const useInternalMask = () => {
+export const useMask = () => {
   const {
     props
   } = React.useContext(InputMaskedContext);
@@ -130,7 +130,7 @@ export const useMaskParams = () => {
     placeholder_char,
     placeholder
   } = props;
-  const mask = useInternalMask();
+  const mask = useMask();
   const maskParams = useNumberMaskParams() || {};
   maskParams.showMask = !placeholder && isTrue(show_mask);
   maskParams.placeholderChar = placeholder_char;
@@ -159,7 +159,7 @@ export const useInputElement = () => {
   const {
     pipe
   } = props;
-  const mask = useInternalMask();
+  const mask = useMask();
   const {
     showMask,
     showGuide,
@@ -253,7 +253,6 @@ const useCallEvent = ({
 
       if (/^0/.test(testValue)) {
         event.preventDefault();
-        return;
       }
     }
 
@@ -334,11 +333,10 @@ const useNumberMaskParams = () => {
   const {
     props
   } = React.useContext(InputMaskedContext);
-  const context = React.useContext(Context);
   const locale = useLocale();
 
   if (!isRequestingNumberMask(props)) {
-    return null;
+    return _objectSpread({}, fromJSON(props.mask_options));
   }
 
   let {
@@ -383,7 +381,6 @@ const useNumberMaskParams = () => {
 
   if (number_mask) {
     maskParams = handleNumberMask({
-      context,
       mask_options,
       number_mask
     });
@@ -397,7 +394,6 @@ const useNumberMaskParams = () => {
     }
   } else if (currency_mask) {
     maskParams = handleCurrencyMask({
-      context,
       mask_options,
       currency_mask
     });

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

@@ -19,12 +19,9 @@ export const isRequestingNumberMask = props => {
 export const correctNumberValue = ({
   localValue = null,
   props,
-  context,
   locale,
   maskParams
 }) => {
-  var _context$InputMasked;
-
   let value = String(props.value);
 
   if (isNaN(parseFloat(value))) {
@@ -41,13 +38,11 @@ export const correctNumberValue = ({
     }
   }
 
-  const numberFormatFromContext = context === null || context === void 0 ? void 0 : (_context$InputMasked = context.InputMasked) === null || _context$InputMasked === void 0 ? void 0 : _context$InputMasked.number_format;
-
-  if (props.number_format || numberFormatFromContext) {
-    const options = _objectSpread(_objectSpread({
+  if (props.number_format) {
+    const options = _objectSpread({
       locale,
       decimals: 0
-    }, fromJSON(props.number_format)), numberFormatFromContext);
+    }, props.number_format);
 
     if (shouldHaveDecimals) {
       options.decimals = maskParams.decimalLimit;
@@ -151,34 +146,28 @@ export const handlePercentMask = ({
   return maskParams;
 };
 export const handleCurrencyMask = ({
-  context,
   mask_options,
   currency_mask
 }) => {
-  var _context$InputMasked2, _context$InputMasked3;
-
-  const maskParams = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  const maskParams = _objectSpread(_objectSpread({
     showMask: true,
     placeholderChar: null,
     allowDecimal: true,
     decimalLimit: 2,
     decimalSymbol: ','
-  }, context === null || context === void 0 ? void 0 : (_context$InputMasked2 = context.InputMasked) === null || _context$InputMasked2 === void 0 ? void 0 : _context$InputMasked2.mask_options), context === null || context === void 0 ? void 0 : (_context$InputMasked3 = context.InputMasked) === null || _context$InputMasked3 === void 0 ? void 0 : _context$InputMasked3.currency_mask), mask_options), currency_mask);
+  }, mask_options), currency_mask);
 
   const fix = typeof currency_mask === 'string' ? currency_mask : typeof maskParams.currency === 'string' ? maskParams.currency : 'kr';
   maskParams.suffix = ` ${fix}`;
   return maskParams;
 };
 export const handleNumberMask = ({
-  context,
   mask_options,
   number_mask
 }) => {
-  var _context$InputMasked4, _context$InputMasked5;
-
-  const maskParams = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  const maskParams = _objectSpread(_objectSpread({
     decimalSymbol: ','
-  }, context === null || context === void 0 ? void 0 : (_context$InputMasked4 = context.InputMasked) === null || _context$InputMasked4 === void 0 ? void 0 : _context$InputMasked4.mask_options), context === null || context === void 0 ? void 0 : (_context$InputMasked5 = context.InputMasked) === null || _context$InputMasked5 === void 0 ? void 0 : _context$InputMasked5.number_mask), mask_options), number_mask);
+  }, mask_options), number_mask);
 
   if (typeof maskParams.allowDecimal === 'undefined') {
     maskParams.allowDecimal = maskParams.decimalLimit > 0;

package/es/components/lib.js

@@ -31,10 +31,11 @@ import Space from './space/Space';
 import StepIndicator from './step-indicator/StepIndicator';
 import Switch from './switch/Switch';
 import Tabs from './tabs/Tabs';
+import Tag from './tag/Tag';
 import Textarea from './textarea/Textarea';
 import ToggleButton from './toggle-button/ToggleButton';
 import Tooltip from './tooltip/Tooltip';
-export { Accordion, Autocomplete, Breadcrumb, Button, Checkbox, DatePicker, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Tabs, Textarea, ToggleButton, Tooltip };
+export { Accordion, Autocomplete, Breadcrumb, Button, Checkbox, DatePicker, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Tabs, Tag, Textarea, ToggleButton, Tooltip };
 export const getComponents = () => {
   return {
     Accordion,
@@ -69,6 +70,7 @@ export const getComponents = () => {
     StepIndicator,
     Switch,
     Tabs,
+    Tag,
     Textarea,
     ToggleButton,
     Tooltip