@dnb/eufemia 9.17.2 → 9.18.0

package/cjs/components/form-set/FormSet.d.ts

@@ -83,7 +83,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: FormSetLabel;
 
@@ -99,7 +99,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   label_id?: string;
 
   /**
-   * If You need to style the "legend", then You can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
+   * If you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
    */
   label_class?: string;
   no_label?: FormSetNoLabel;
@@ -120,7 +120,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   indent?: FormSetIndent;
 
   /**
-   * Forces the content of a FormRow to wrap. Make sure You always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
+   * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
    */
   wrap?: FormSetWrap;
 
@@ -135,7 +135,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   vertical?: FormSetVertical;
 
   /**
-   * Will center all children vertically as long as the screen not hits a mobile width.
+   * Will center all children vertically as long as the screen does not hit a mobile width.
    */
   centered?: FormSetCentered;
 
@@ -190,7 +190,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   children?: FormSetChildren;
 
   /**
-   * Will be called on submit. Returns an object with the a native event: `{ event }`
+   * Will be called on submit. Returns an object with a native event: `{ event }`
    */
   on_submit?: (...args: any[]) => any;
   custom_element?: Object;

package/cjs/components/global-error/GlobalError.d.ts

@@ -27,7 +27,7 @@ export type GlobalErrorChildren =
  */
 export interface GlobalErrorProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Status code define the view showing up.
+   * Status code defines the view showing up.
    */
   status?: string;
 

package/cjs/components/global-status/GlobalStatus.d.ts

@@ -70,17 +70,17 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   default_title?: string;
 
   /**
-   * The text appears as the status content. Beside plain text, You can send in a React component as well. Defaults to `null`.
+   * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
    */
   text?: GlobalStatusText;
 
   /**
-   * The items (list items) appears as a part of the status content. You can both use an JSON array, or a vanilla array with a string or an object content. Se "Item Object" example below.
+   * The items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. Se "Item Object" example below.
    */
   items?: GlobalStatusItems;
 
   /**
-   * The icon show before the status title. Defaults to `exclamation`.
+   * The icon shown before the status title. Defaults to `exclamation`.
    */
   icon?: GlobalStatusIcon;
 
@@ -115,7 +115,7 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   no_animation?: GlobalStatusNoAnimation;
 
   /**
-   * Defines the delay on how long the automated visibility should wait, before it appears to the user. Defaults to `200ms`.
+   * Defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`.
    */
   delay?: GlobalStatusDelay;
 
@@ -169,7 +169,7 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The text appears as the status content. Beside plain text, You can send in a React component as well. Defaults to `null`.
+   * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
    */
   children?: GlobalStatusChildren;
 

package/cjs/components/heading/Heading.d.ts

@@ -58,7 +58,7 @@ export interface HeadingProps extends React.HTMLProps<HTMLElement> {
   group?: string;
 
   /**
-   * A heading, can be text or a another component.
+   * A heading, can be text or React.Node.
    */
   text?: HeadingText;
 
@@ -144,7 +144,7 @@ export interface HeadingProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * A heading, can be text or a another component.
+   * A heading, can be text or React.Node.
    */
   children?: HeadingChildren;
 }

package/cjs/components/heading/HeadingProvider.d.ts

@@ -40,12 +40,12 @@ export interface HeadingProviderProps
   reset?: HeadingProviderReset;
 
   /**
-   * A heading, can be text or a another component.
+   * A heading, can be text or React.Node.
    */
   text?: any;
 
   /**
-   * A heading, can be text or a another component.
+   * A heading, can be text or React.Node.
    */
   children?: any;
 }

package/cjs/components/icon/Icon.d.ts

@@ -56,7 +56,7 @@ export interface IconProps extends React.HTMLProps<HTMLElement> {
   modifier?: string;
 
   /**
-   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the mother HTML element, if it provides a `font-size`.
+   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`.
    */
   size?: IconSize;
 

package/cjs/components/icon-primary/IconPrimary.d.ts

@@ -65,7 +65,7 @@ export interface IconPrimaryProps extends React.HTMLProps<HTMLElement> {
   modifier?: string;
 
   /**
-   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the mother HTML element, if it provides a `font-size`.
+   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`.
    */
   size?: IconPrimarySize;
 

package/cjs/components/index.d.ts

@@ -42,6 +42,7 @@ 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'
@@ -80,6 +81,7 @@ export {
   StepIndicator,
   Switch,
   Tabs,
+  Tag,
   Textarea,
   ToggleButton,
   Tooltip,

package/cjs/components/index.js

@@ -195,6 +195,12 @@ Object.defineProperty(exports, "Tabs", {
     return _Tabs.default;
   }
 });
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _Tag.default;
+  }
+});
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
   get: function get() {
@@ -278,6 +284,8 @@ var _Switch = _interopRequireDefault(require("./switch/Switch"));
 
 var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
 
+var _Tag = _interopRequireDefault(require("./tag/Tag"));
+
 var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
 
 var _ToggleButton = _interopRequireDefault(require("./toggle-button/ToggleButton"));

package/cjs/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/cjs/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/cjs/components/input-masked/InputMasked.js

@@ -64,11 +64,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var InputMasked = _react.default.forwardRef(function (props, ref) {
   var context = _react.default.useContext(_Context.default);
 
+  var contextAndProps = _react.default.useCallback((0, _componentHelper.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.default.createElement(_InputMaskedContext.default.Provider, {
-    value: _objectSpread({
+    value: {
       inner_ref: ref,
-      props: props
-    }, context)
+      props: contextAndProps,
+      context: context
+    }
   }, _InputMaskedElement || (_InputMaskedElement = _react.default.createElement(_InputMaskedElement2.default, null)));
 });
 

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

@@ -33,7 +33,7 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useNumberMask = exports.useMaskParams = exports.useLocale = exports.useLocalValue = exports.useInternalMask = exports.useInputElementRef = exports.useInputElement = exports.useFilteredProps = exports.useEventMapping = void 0;
+exports.useNumberMask = exports.useMaskParams = exports.useMask = exports.useLocale = exports.useLocalValue = exports.useInputElementRef = exports.useInputElement = exports.useFilteredProps = exports.useEventMapping = void 0;
 
 require("core-js/modules/es.object.freeze.js");
 
@@ -59,8 +59,6 @@ var _NumberUtils = require("../number-format/NumberUtils");
 
 var _componentHelper = require("../../shared/component-helper");
 
-var _Context = _interopRequireDefault(require("../../shared/Context"));
-
 var _TextMask = _interopRequireDefault(require("./TextMask"));
 
 var _createNumberMask = _interopRequireDefault(require("./addons/createNumberMask"));
@@ -140,9 +138,8 @@ exports.useInputElementRef = useInputElementRef;
 
 var useLocale = function useLocale() {
   var _React$useContext3 = _react.default.useContext(_InputMaskedContext.default),
-      props = _React$useContext3.props;
-
-  var context = _react.default.useContext(_Context.default);
+      props = _React$useContext3.props,
+      context = _React$useContext3.context;
 
   var locale = props.locale;
 
@@ -157,18 +154,16 @@ exports.useLocale = useLocale;
 
 var useLocalValue = function useLocalValue() {
   var _React$useContext4 = _react.default.useContext(_InputMaskedContext.default),
-      props = _React$useContext4.props;
-
-  var context = _react.default.useContext(_Context.default);
+      props = _React$useContext4.props,
+      context = _React$useContext4.context;
 
   var maskParams = useNumberMaskParams() || {};
   var locale = useLocale();
 
   var _React$useState = _react.default.useState(function () {
     return (0, _InputMaskedUtils.correctNumberValue)({
-      props: props,
-      context: context,
       locale: locale,
+      props: props,
       maskParams: maskParams
     });
   }),
@@ -179,9 +174,8 @@ var useLocalValue = function useLocalValue() {
   _react.default.useEffect(function () {
     var value = (0, _InputMaskedUtils.correctNumberValue)({
       localValue: localValue,
-      props: props,
-      context: context,
       locale: locale,
+      props: props,
       maskParams: maskParams
     });
     setLocalValue(value);
@@ -198,7 +192,10 @@ exports.useLocalValue = useLocalValue;
 var useNumberMask = function useNumberMask() {
   var maskParams = useNumberMaskParams();
 
-  if (!maskParams) {
+  var _React$useContext5 = _react.default.useContext(_InputMaskedContext.default),
+      props = _React$useContext5.props;
+
+  if (!maskParams || !(0, _InputMaskedUtils.isRequestingNumberMask)(props)) {
     return null;
   }
 
@@ -209,9 +206,9 @@ var useNumberMask = function useNumberMask() {
 
 exports.useNumberMask = useNumberMask;
 
-var useInternalMask = function useInternalMask() {
-  var _React$useContext5 = _react.default.useContext(_InputMaskedContext.default),
-      props = _React$useContext5.props;
+var useMask = function useMask() {
+  var _React$useContext6 = _react.default.useContext(_InputMaskedContext.default),
+      props = _React$useContext6.props;
 
   var numberMask = useNumberMask();
 
@@ -222,18 +219,18 @@ var useInternalMask = function useInternalMask() {
   return props.mask;
 };
 
-exports.useInternalMask = useInternalMask;
+exports.useMask = useMask;
 
 var useMaskParams = function useMaskParams() {
-  var _React$useContext6 = _react.default.useContext(_InputMaskedContext.default),
-      props = _React$useContext6.props;
+  var _React$useContext7 = _react.default.useContext(_InputMaskedContext.default),
+      props = _React$useContext7.props;
 
   var keep_char_positions = props.keep_char_positions,
       show_guide = props.show_guide,
       show_mask = props.show_mask,
       placeholder_char = props.placeholder_char,
       placeholder = props.placeholder;
-  var mask = useInternalMask();
+  var mask = useMask();
   var maskParams = useNumberMaskParams() || {};
   maskParams.showMask = !placeholder && (0, _componentHelper.isTrue)(show_mask);
   maskParams.placeholderChar = placeholder_char;
@@ -260,11 +257,11 @@ exports.useMaskParams = useMaskParams;
 var useInputElement = function useInputElement() {
   var ref = useInputElementRef();
 
-  var _React$useContext7 = _react.default.useContext(_InputMaskedContext.default),
-      props = _React$useContext7.props;
+  var _React$useContext8 = _react.default.useContext(_InputMaskedContext.default),
+      props = _React$useContext8.props;
 
   var pipe = props.pipe;
-  var mask = useInternalMask();
+  var mask = useMask();
 
   var _useMaskParams = useMaskParams(),
       showMask = _useMaskParams.showMask,
@@ -346,8 +343,8 @@ exports.useEventMapping = useEventMapping;
 var useCallEvent = function useCallEvent(_ref2) {
   var setLocalValue = _ref2.setLocalValue;
 
-  var _React$useContext8 = _react.default.useContext(_InputMaskedContext.default),
-      props = _React$useContext8.props;
+  var _React$useContext9 = _react.default.useContext(_InputMaskedContext.default),
+      props = _React$useContext9.props;
 
   var maskParams = useMaskParams();
   var isNumberMask = useNumberMask();
@@ -376,7 +373,6 @@ var useCallEvent = function useCallEvent(_ref2) {
 
       if (/^0/.test(testValue)) {
         event.preventDefault();
-        return;
       }
     }
 
@@ -454,15 +450,13 @@ var useCallEvent = function useCallEvent(_ref2) {
 var useNumberMaskParams = function useNumberMaskParams() {
   var _currency_mask;
 
-  var _React$useContext9 = _react.default.useContext(_InputMaskedContext.default),
-      props = _React$useContext9.props;
-
-  var context = _react.default.useContext(_Context.default);
+  var _React$useContext10 = _react.default.useContext(_InputMaskedContext.default),
+      props = _React$useContext10.props;
 
   var locale = useLocale();
 
   if (!(0, _InputMaskedUtils.isRequestingNumberMask)(props)) {
-    return null;
+    return _objectSpread({}, (0, _InputMaskedUtils.fromJSON)(props.mask_options));
   }
 
   var number_mask = props.number_mask,
@@ -503,7 +497,6 @@ var useNumberMaskParams = function useNumberMaskParams() {
 
   if (number_mask) {
     maskParams = (0, _InputMaskedUtils.handleNumberMask)({
-      context: context,
       mask_options: mask_options,
       number_mask: number_mask
     });
@@ -517,7 +510,6 @@ var useNumberMaskParams = function useNumberMaskParams() {
     }
   } else if (currency_mask) {
     maskParams = (0, _InputMaskedUtils.handleCurrencyMask)({
-      context: context,
       mask_options: mask_options,
       currency_mask: currency_mask
     });

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

@@ -116,12 +116,9 @@ var isRequestingNumberMask = function isRequestingNumberMask(props) {
 exports.isRequestingNumberMask = isRequestingNumberMask;
 
 var correctNumberValue = function correctNumberValue(_ref5) {
-  var _context$InputMasked;
-
   var _ref5$localValue = _ref5.localValue,
       localValue = _ref5$localValue === void 0 ? null : _ref5$localValue,
       props = _ref5.props,
-      context = _ref5.context,
       locale = _ref5.locale,
       maskParams = _ref5.maskParams;
   var value = String(props.value);
@@ -140,13 +137,11 @@ var correctNumberValue = function correctNumberValue(_ref5) {
     }
   }
 
-  var 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) {
-    var options = _objectSpread(_objectSpread({
+  if (props.number_format) {
+    var options = _objectSpread({
       locale: locale,
       decimals: 0
-    }, fromJSON(props.number_format)), numberFormatFromContext);
+    }, props.number_format);
 
     if (shouldHaveDecimals) {
       options.decimals = maskParams.decimalLimit;
@@ -258,19 +253,16 @@ var handlePercentMask = function handlePercentMask(_ref6) {
 exports.handlePercentMask = handlePercentMask;
 
 var handleCurrencyMask = function handleCurrencyMask(_ref7) {
-  var _context$InputMasked2, _context$InputMasked3;
-
-  var context = _ref7.context,
-      mask_options = _ref7.mask_options,
+  var mask_options = _ref7.mask_options,
       currency_mask = _ref7.currency_mask;
 
-  var maskParams = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  var 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);
 
   var fix = typeof currency_mask === 'string' ? currency_mask : typeof maskParams.currency === 'string' ? maskParams.currency : 'kr';
   maskParams.suffix = " ".concat(fix);
@@ -280,15 +272,12 @@ var handleCurrencyMask = function handleCurrencyMask(_ref7) {
 exports.handleCurrencyMask = handleCurrencyMask;
 
 var handleNumberMask = function handleNumberMask(_ref8) {
-  var _context$InputMasked4, _context$InputMasked5;
-
-  var context = _ref8.context,
-      mask_options = _ref8.mask_options,
+  var mask_options = _ref8.mask_options,
       number_mask = _ref8.number_mask;
 
-  var maskParams = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  var 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/cjs/components/lib.js

@@ -195,6 +195,12 @@ Object.defineProperty(exports, "Tabs", {
     return _Tabs.default;
   }
 });
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _Tag.default;
+  }
+});
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
   get: function get() {
@@ -281,6 +287,8 @@ var _Switch = _interopRequireDefault(require("./switch/Switch"));
 
 var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
 
+var _Tag = _interopRequireDefault(require("./tag/Tag"));
+
 var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
 
 var _ToggleButton = _interopRequireDefault(require("./toggle-button/ToggleButton"));
@@ -323,6 +331,7 @@ var getComponents = function getComponents() {
     StepIndicator: _StepIndicator.default,
     Switch: _Switch.default,
     Tabs: _Tabs.default,
+    Tag: _Tag.default,
     Textarea: _Textarea.default,
     ToggleButton: _ToggleButton.default,
     Tooltip: _Tooltip.default