@dnb/eufemia 10.20.0 → 10.22.0

package/components/input/InputDocs.js

@@ -0,0 +1,158 @@
+export const inputProperties = {
+  value: {
+    doc: 'The content value of the input.',
+    type: 'string',
+    status: 'optional'
+  },
+  align: {
+    doc: 'Defines the text alignment of the input. Can be `left`, `right` or `center`. Defaults to `left`.',
+    type: 'string',
+    status: 'optional'
+  },
+  label: {
+    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  label_sr_only: {
+    doc: 'Use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  label_direction: {
+    doc: 'Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.',
+    type: 'string',
+    status: 'optional'
+  },
+  status: {
+    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
+    type: 'string',
+    status: 'optional'
+  },
+  status_state: {
+    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',
+    type: 'string',
+    status: 'optional'
+  },
+  status_props: {
+    doc: 'Use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'object',
+    status: 'optional'
+  },
+  placeholder: {
+    doc: 'The placeholder which shows up once the input value is empty.',
+    type: 'string',
+    status: 'optional'
+  },
+  icon: {
+    doc: '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.',
+    type: ['string', 'React.Component'],
+    status: 'optional'
+  },
+  icon_position: {
+    doc: 'Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set.',
+    type: 'string',
+    status: 'optional'
+  },
+  icon_size: {
+    doc: 'The icon size of the icon shows. Defaults to `medium`.',
+    type: 'string',
+    status: 'optional'
+  },
+  keep_placeholder: {
+    doc: 'Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  input_class: {
+    doc: 'In case we have to set a custom input class.',
+    type: 'string',
+    status: 'optional'
+  },
+  type: {
+    doc: 'Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`.',
+    type: 'string',
+    status: 'optional'
+  },
+  autocomplete: {
+    doc: 'Defaults to `off`. Set to `on` or any of [allowed `attributes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete). 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.',
+    type: 'string',
+    status: 'optional'
+  },
+  submit_button_title: {
+    doc: 'Title attribute for the search icon. Only relevant if search input.',
+    type: 'string',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.',
+    type: ['string', 'React.Component'],
+    status: 'optional'
+  },
+  size: {
+    doc: 'The sizes you can choose is `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.',
+    type: ['string', 'number'],
+    status: 'optional'
+  },
+  selectall: {
+    doc: 'If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  clear: {
+    doc: 'If set to `true`, then a clear button will be shown which lets the user clear any given input value.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  stretch: {
+    doc: 'If set to `true`, then the input field will be 100% in `width`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  input_attributes: {
+    doc: 'Provide the Input element with any attributes by using an Object `input_attributes={{size:\'2\'}}` or a JSON Object `input_attributes=\'{"size":"2"}\'`. **NB:** Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.',
+    type: 'object',
+    status: 'optional'
+  },
+  input_state: {
+    doc: 'Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`.',
+    type: 'string',
+    status: 'optional'
+  },
+  submit_element: {
+    doc: 'Accepts a React element which will show up like the "submit button" would do on `type="search"`.',
+    type: ['string', 'React.Element'],
+    status: 'optional'
+  },
+  inner_ref: {
+    doc: '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()`.',
+    type: 'React.Ref',
+    status: 'optional'
+  },
+  input_element: {
+    doc: 'By providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`.',
+    type: ['string', 'React.Element'],
+    status: 'internal'
+  },
+  inner_element: {
+    doc: 'By providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component.',
+    type: ['string', 'React.Element'],
+    status: 'internal'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=InputDocs.js.map

package/components/input/InputDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputDocs.js","names":["inputProperties","value","doc","type","status","align","label","label_sr_only","label_direction","status_state","status_props","globalStatus","placeholder","icon","icon_position","icon_size","keep_placeholder","input_class","autocomplete","submit_button_title","suffix","size","selectall","clear","stretch","skeleton","input_attributes","input_state","submit_element","inner_ref","input_element","inner_element"],"sources":["../../../../src/components/input/InputDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const inputProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The content value of the input.',\n    type: 'string',\n    status: 'optional',\n  },\n  align: {\n    doc: 'Defines the text alignment of the input. Can be `left`, `right` or `center`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  label_sr_only: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'Use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'The placeholder which shows up once the input value is empty.',\n    type: 'string',\n    status: 'optional',\n  },\n  icon: {\n    doc: '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.',\n    type: ['string', 'React.Component'],\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set.',\n    type: 'string',\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'The icon size of the icon shows. Defaults to `medium`.',\n    type: 'string',\n    status: 'optional',\n  },\n  keep_placeholder: {\n    doc: 'Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  input_class: {\n    doc: 'In case we have to set a custom input class.',\n    type: 'string',\n    status: 'optional',\n  },\n  type: {\n    doc: 'Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`.',\n    type: 'string',\n    status: 'optional',\n  },\n  autocomplete: {\n    doc: 'Defaults to `off`. Set to `on` or any of [allowed `attributes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete). 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.',\n    type: 'string',\n    status: 'optional',\n  },\n  submit_button_title: {\n    doc: 'Title attribute for the search icon. Only relevant if search input.',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.',\n    type: ['string', 'React.Component'],\n    status: 'optional',\n  },\n  size: {\n    doc: 'The sizes you can choose is `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.',\n    type: ['string', 'number'],\n    status: 'optional',\n  },\n  selectall: {\n    doc: 'If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  clear: {\n    doc: 'If set to `true`, then a clear button will be shown which lets the user clear any given input value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the input field will be 100% in `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  input_attributes: {\n    doc: 'Provide the Input element with any attributes by using an Object `input_attributes={{size:\\'2\\'}}` or a JSON Object `input_attributes=\\'{\"size\":\"2\"}\\'`. **NB:** Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.',\n    type: 'object',\n    status: 'optional',\n  },\n  input_state: {\n    doc: 'Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  submit_element: {\n    doc: 'Accepts a React element which will show up like the \"submit button\" would do on `type=\"search\"`.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  inner_ref: {\n    doc: '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()`.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  input_element: {\n    doc: 'By providing a new component we can change the internally used element. Also supports a string only, like `input_element=\"input\"`.',\n    type: ['string', 'React.Element'],\n    status: 'internal',\n  },\n  inner_element: {\n    doc: 'By providing a new component to be rendered inside the \"shell\" – we can add a freely customizable internal element. Used by the Autocomplete component.',\n    type: ['string', 'React.Element'],\n    status: 'internal',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}

package/components/input/InputPassword.d.ts

@@ -1,17 +1,6 @@
-import * as React from 'react';
-import type { InputProps } from './Input';
-export interface InputPasswordProps
-  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
-    InputProps {
-  show_password?: string;
-  hide_password?: string;
-  on_show_password?: (...args: any[]) => any;
-  on_hide_password?: (...args: any[]) => any;
-}
-export default class InputPassword extends React.Component<
-  InputPasswordProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
+export default InputPassword;
+/**
+ * @deprecated in v11, use `Field.Password instead.`
+ */
+declare const InputPassword: typeof Password;
+import Password from '../../extensions/forms/Field/Password';

package/components/input/InputPassword.js

@@ -1,84 +1,6 @@
-"use client";
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import Context from '../../shared/Context';
-import Input, { SubmitButton } from './Input';
-import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
-import { makeUniqueId, extendPropsWithContextInClassComponent, convertStatusToStateOnly, combineDescribedBy, dispatchCustomElementEvent } from '../../shared/component-helper';
-import IconView from '../../icons/view';
-import IconViewOff from '../../icons/hide';
-import IconViewMedium from '../../icons/view_medium';
-import IconViewOffMedium from '../../icons/hide_medium';
-export default class InputPassword extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "state", {
-      hidden: true
-    });
-    _defineProperty(this, "toggleVisibility", event => {
-      const hidden = this.state.hidden;
-      this.setState({
-        hidden: !hidden
-      }, () => {
-        if (this._ref.current) {
-          this._ref.current.focus();
-        }
-      });
-      dispatchCustomElementEvent(this, hidden ? 'on_show_password' : 'on_hide_password', {
-        event
-      });
-    });
-    this._id = props.id || makeUniqueId();
-    this._ref = props.inner_ref || React.createRef();
-  }
-  render() {
-    var _this$context, _this$context2, _this$context3;
-    const props = extendPropsWithContextInClassComponent(this.props, InputPassword.defaultProps, {
-      skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
-    }, this.context.getTranslation(this.props).Input, pickFormElementProps((_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.FormRow), pickFormElementProps((_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : _this$context3.formElement), this.context.Input, this.context.InputPassword);
-    const id = this._id;
-    const params = {
-      id
-    };
-    params['aria-describedby'] = combineDescribedBy(this.props, id + '-submit-button');
-    return React.createElement(Input, _extends({}, this.props, params, {
-      className: classnames('dnb-input--password', this.props.className),
-      type: this.state.hidden ? 'password' : 'text',
-      inner_ref: this._ref,
-      submit_element: React.createElement(SubmitButton, {
-        id: id + '-submit-button',
-        type: "button",
-        variant: "secondary",
-        "aria-controls": id,
-        "aria-label": this.state.hidden ? props.show_password : props.hide_password,
-        icon: props.size === 'large' ? this.state.hidden ? IconViewMedium : IconViewOffMedium : this.state.hidden ? IconView : IconViewOff,
-        skeleton: props.skeleton,
-        status: convertStatusToStateOnly(props.status, props.status_state),
-        status_state: props.status_state,
-        onClick: this.toggleVisibility
-      })
-    }));
-  }
-}
-_defineProperty(InputPassword, "contextType", Context);
-_defineProperty(InputPassword, "defaultProps", _objectSpread({
-  show_password: null,
-  hide_password: null,
-  on_show_password: null,
-  on_hide_password: null
-}, Input.defaultProps));
-process.env.NODE_ENV !== "production" ? InputPassword.propTypes = _objectSpread({
-  show_password: PropTypes.string,
-  hide_password: PropTypes.string,
-  on_show_password: PropTypes.func,
-  on_hide_password: PropTypes.func
-}, Input.propTypes) : void 0;
+import Password from '../../extensions/forms/Field/Password';
+const InputPassword = Password;
+export default InputPassword;
 InputPassword._formElement = true;
 InputPassword._supportsSpacingProps = true;
 //# sourceMappingURL=InputPassword.js.map

package/components/input/InputPassword.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.js","names":["React","PropTypes","classnames","Context","Input","SubmitButton","pickFormElementProps","makeUniqueId","extendPropsWithContextInClassComponent","convertStatusToStateOnly","combineDescribedBy","dispatchCustomElementEvent","IconView","IconViewOff","IconViewMedium","IconViewOffMedium","InputPassword","PureComponent","constructor","props","_defineProperty","hidden","event","state","setState","_ref","current","focus","_id","id","inner_ref","createRef","render","_this$context","_this$context2","_this$context3","defaultProps","skeleton","context","getTranslation","FormRow","formElement","params","createElement","_extends","className","type","submit_element","variant","show_password","hide_password","icon","size","status","status_state","onClick","toggleVisibility","_objectSpread","on_show_password","on_hide_password","process","env","NODE_ENV","propTypes","string","func","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input/InputPassword.js"],"sourcesContent":["/**\n * Web Input Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\n\nimport Input, { SubmitButton } from './Input'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  convertStatusToStateOnly,\n  combineDescribedBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport IconView from '../../icons/view'\nimport IconViewOff from '../../icons/hide'\nimport IconViewMedium from '../../icons/view_medium'\nimport IconViewOffMedium from '../../icons/hide_medium'\n\nexport default class InputPassword extends React.PureComponent {\n  static contextType = Context\n  static propTypes = {\n    show_password: PropTypes.string,\n    hide_password: PropTypes.string,\n    on_show_password: PropTypes.func,\n    on_hide_password: PropTypes.func,\n    ...Input.propTypes,\n  }\n  static defaultProps = {\n    show_password: null,\n    hide_password: null,\n    on_show_password: null,\n    on_hide_password: null,\n    ...Input.defaultProps,\n  }\n\n  state = { hidden: true }\n\n  constructor(props) {\n    super(props)\n\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this._ref = props.inner_ref || React.createRef()\n  }\n\n  toggleVisibility = (event) => {\n    const hidden = this.state.hidden\n    this.setState(\n      {\n        hidden: !hidden,\n      },\n      () => {\n        if (this._ref.current) {\n          this._ref.current.focus()\n        }\n      }\n    )\n\n    dispatchCustomElementEvent(\n      this,\n      hidden ? 'on_show_password' : 'on_hide_password',\n      { event }\n    )\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      InputPassword.defaultProps,\n      { skeleton: this.context?.skeleton },\n      this.context.getTranslation(this.props).Input,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Input,\n      this.context.InputPassword\n    )\n\n    const id = this._id\n    const params = { id }\n    params['aria-describedby'] = combineDescribedBy(\n      this.props,\n      id + '-submit-button'\n    )\n\n    return (\n      <Input\n        {...this.props}\n        {...params}\n        className={classnames('dnb-input--password', this.props.className)}\n        type={this.state.hidden ? 'password' : 'text'}\n        inner_ref={this._ref}\n        submit_element={\n          <SubmitButton\n            id={id + '-submit-button'}\n            type=\"button\"\n            variant=\"secondary\"\n            aria-controls={id}\n            aria-label={\n              this.state.hidden ? props.show_password : props.hide_password\n            }\n            icon={\n              props.size === 'large'\n                ? this.state.hidden\n                  ? IconViewMedium\n                  : IconViewOffMedium\n                : this.state.hidden\n                ? IconView\n                : IconViewOff\n            }\n            skeleton={props.skeleton}\n            status={convertStatusToStateOnly(\n              props.status,\n              props.status_state\n            )}\n            status_state={props.status_state}\n            onClick={this.toggleVisibility}\n          />\n        }\n      />\n    )\n  }\n}\n\nInputPassword._formElement = true\nInputPassword._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"InputPassword.js","names":["Password","InputPassword","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input/InputPassword.js"],"sourcesContent":["/**\n * Web Input Component\n *\n */\n\nimport Password from '../../extensions/forms/Field/Password'\n\n/**\n * @deprecated in v11, use `Field.Password instead.`\n */\nconst InputPassword = Password\n\nexport default InputPassword\n\nInputPassword._formElement = true\nInputPassword._supportsSpacingProps = true\n"],"mappings":"AAKA,OAAOA,QAAQ,MAAM,uCAAuC;AAK5D,MAAMC,aAAa,GAAGD,QAAQ;AAE9B,eAAeC,aAAa;AAE5BA,aAAa,CAACC,YAAY,GAAG,IAAI;AACjCD,aAAa,CAACE,qBAAqB,GAAG,IAAI"}

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

@@ -51,7 +51,7 @@ export interface InputMaskedProps
   extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   /**
-   * 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.
+   * A mask can be defined both as a [RegExp style of characters](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme) or a callback function. Example below.
    */
   mask?: InputMaskedMask;
   /**
@@ -59,7 +59,7 @@ export interface InputMaskedProps
    */
   number_mask?: InputMaskedNumberMask;
   /**
-   * 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`.
+   * Set to `true` or set the _valuta_ (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;
   /**
@@ -67,11 +67,11 @@ export interface InputMaskedProps
    */
   mask_options?: InputMaskedMaskOptions;
   /**
-   * Use an object with <a href="/uilib/components/number-format/properties">NumberFormat</a> e.g. `{ omit_rounding: false }`.
+   * Use an object with [NumberFormat](/uilib/components/number-format/properties) e.g. `{ omit_rounding: false }`.
    */
   number_format?: NumberFormatProps;
   /**
-   * Define the locale to be used in the `as_number` or `as_currency` masked. It will be inherited from the <a href="/uilib/usage/customisation/provider">Eufemia Provider</a> if not given. Defaults to `nb-NO`.
+   * Define the locale to be used in the `as_number` or `as_currency` masked. It will be inherited from the [Eufemia Provider](/uilib/usage/customisation/provider) if not given. Defaults to `nb-NO`.
    */
   locale?: Locale;
   /**
@@ -91,7 +91,7 @@ export interface InputMaskedProps
    */
   show_mask?: boolean;
   /**
-   * When `false` is given, it doesn&#39;t print out placeholder characters and only adds mask characters when the user reaches them as they&#39;re typing. Defaults to `true`.
+   * When `false` is given, it doesn't print out placeholder characters and only adds mask characters when the user reaches them as they're typing. Defaults to `true`.
    */
   show_guide?: boolean;
   pipe?: (...args: any[]) => any;
@@ -103,9 +103,6 @@ export interface InputMaskedProps
    * The placeholder character represents the fillable spot in the mask (e.g. `_`). Defaults to invisible space.
    */
   placeholder_char?: string;
-  /**
-   * 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?: React.Ref;
   /**
    * 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 }`.
@@ -125,127 +122,43 @@ export interface InputMaskedProps
   on_blur?: (...args: any[]) => any;
   on_submit_focus?: (...args: any[]) => any;
   on_submit_blur?: (...args: any[]) => any;
-  /**
-   * Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`.
-   */
   type?: string;
-  /**
-   * The sizes you can choose 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;
-  /**
-   * The content value of the input.
-   */
   value?: InputMaskedValue;
   id?: string;
-  /**
-   * Prepends the Form Label component. If no ID is provided, a random ID is created.
-   */
   label?: FormLabelText;
-  /**
-   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
-   */
   label_direction?: FormLabelLabelDirection;
-  /**
-   * Use `true` to make the label only readable by screen readers.
-   */
   label_sr_only?: boolean;
-  /**
-   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
-   */
   status?: FormStatusText;
-  /**
-   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
-   */
   status_state?: FormStatusState;
-  /**
-   * Use an object to define additional FormStatus properties.
-   */
   status_props?: FormStatusProps;
   status_no_animation?: boolean;
-  /**
-   * Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`.
-   */
   input_state?: string;
-  /**
-   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
-   */
   globalStatus?: GlobalStatusConfigObject;
-  /**
-   * 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;
-  /**
-   * Title attribute for the search icon. Only relevant if search input.
-   */
   submit_button_title?: string;
   clear_button_title?: string;
-  /**
-   * The placeholder which shows up once the input value is empty
-   */
   placeholder?: string;
-  /**
-   * If set to `true`, then a clear button will be shown which lets the user clear any given input value.
-   */
   clear?: boolean;
-  /**
-   * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.
-   */
   keep_placeholder?: boolean;
   /**
-   * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.
+   * (string): What to display after the amount. Defaults to an empty string.
    */
   suffix?: InputMaskedSuffix;
-  /**
-   * Defines the text alignment of the input. Can be `left`, `right` or `center`. Defaults to `left`.
-   */
   align?: InputMaskedAlign;
-  /**
-   * If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position.
-   */
   selectall?: boolean;
-  /**
-   * If set to `true`, then the input field will be 100% in `width`.
-   */
   stretch?: boolean;
   disabled?: boolean;
-  /**
-   * If set to `true`, an overlaying skeleton with animation will be shown.
-   */
   skeleton?: SkeletonShow;
   class?: string;
-  /**
-   * In case we have to set a custom input class.
-   */
   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 sent along and set as an Input element attribute.
-   */
   input_attributes?: InputInputAttributes;
-  /**
-   * <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 an SVG icon of either 16px or 24px.
-   */
   icon?: IconIcon;
-  /**
-   * The icon size of the icon shows. Defaults to `medium`.
-   */
   icon_size?: IconSize;
-  /**
-   * Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set.
-   */
   icon_position?: ButtonIconPosition;
   readOnly?: boolean;
-  /**
-   * <em>(internal)</em> by providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component.
-   */
   inner_element?: React.ReactNode;
-  /**
-   * Accepts a React element which will show up like the "submit button" would do on `type="search"`.
-   */
   submit_element?: InputMaskedSubmitElement;
   submit_button_variant?: any;
   submit_button_icon?: InputMaskedSubmitButtonIcon;

package/components/input-masked/InputMasked.js

@@ -21,7 +21,9 @@ const InputMasked = props => {
       }
     }
   }
-  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]);
+  const contextAndProps = React.useMemo(() => {
+    return extendPropsWithContext(props, InputMasked.defaultProps, context === null || context === void 0 ? void 0 : context.InputMasked);
+  }, [context === null || context === void 0 ? void 0 : context.InputMasked, props]);
   return React.createElement(InputMaskedContext.Provider, {
     value: {
       props: contextAndProps,

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

@@ -1 +1 @@
-{"version":3,"file":"InputMasked.js","names":["React","PropTypes","extendPropsWithContext","InputMaskedContext","InputMaskedElement","Input","inputPropTypes","Context","InputMasked","props","context","useContext","mask","alias","key","test","contextAndProps","useCallback","defaultProps","createElement","Provider","value","_InputMaskedElement","process","env","NODE_ENV","propTypes","_objectSpread","oneOfType","object","array","func","number_mask","string","bool","currency_mask","mask_options","number_format","locale","as_currency","as_number","as_percent","show_mask","show_guide","pipe","keep_char_positions","placeholder_char","inner_ref","on_change","on_submit","on_focus","on_blur","on_submit_focus","on_submit_blur","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/InputMasked.js"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/**\n * Web InputMasked Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport InputMaskedContext from './InputMaskedContext'\nimport InputMaskedElement from './InputMaskedElement'\nimport Input, { inputPropTypes } from '../input/Input'\nimport Context from '../../shared/Context'\n\nconst InputMasked = (props) => {\n  const context = React.useContext(Context)\n\n  // Remove masks defined in Provider/Context, because it overwrites a custom mask\n  if (props?.mask) {\n    const alias = context?.InputMasked\n    for (const key in alias) {\n      if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {\n        delete alias[key]\n      }\n    }\n  }\n\n  const contextAndProps = React.useCallback(\n    extendPropsWithContext(\n      props,\n      InputMasked.defaultProps,\n      context?.InputMasked\n    ),\n    [props, InputMasked.defaultProps, context?.InputMasked]\n  )\n\n  return (\n    <InputMaskedContext.Provider\n      value={{\n        props: contextAndProps,\n        context,\n      }}\n    >\n      <InputMaskedElement />\n    </InputMaskedContext.Provider>\n  )\n}\n\nInputMasked.propTypes = {\n  mask: PropTypes.oneOfType([\n    PropTypes.object,\n    PropTypes.array,\n    PropTypes.func,\n  ]),\n  number_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  currency_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  mask_options: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  number_format: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  locale: PropTypes.string,\n  as_currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_number: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_guide: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  pipe: PropTypes.func,\n  keep_char_positions: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  placeholder_char: PropTypes.string,\n  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n\n  on_change: PropTypes.func,\n  on_submit: PropTypes.func,\n  on_focus: PropTypes.func,\n  on_blur: PropTypes.func,\n  on_submit_focus: PropTypes.func,\n  on_submit_blur: PropTypes.func,\n\n  ...inputPropTypes,\n}\n\nInputMasked.defaultProps = {\n  ...Input.defaultProps,\n\n  mask: null,\n  number_mask: null,\n  currency_mask: null,\n  mask_options: null,\n  number_format: null,\n  as_currency: null,\n  as_number: null,\n  as_percent: null,\n  locale: null,\n  show_mask: false,\n  show_guide: true,\n  pipe: null,\n  keep_char_positions: false,\n  placeholder_char: null,\n  inner_ref: null,\n\n  on_change: null,\n  on_submit: null,\n  on_focus: null,\n  on_blur: null,\n  on_submit_focus: null,\n  on_submit_blur: null,\n}\n\nInputMasked._formElement = true\nInputMasked._supportsSpacingProps = true\n\nexport default InputMasked\n"],"mappings":"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"}
+{"version":3,"file":"InputMasked.js","names":["React","PropTypes","extendPropsWithContext","InputMaskedContext","InputMaskedElement","Input","inputPropTypes","Context","InputMasked","props","context","useContext","mask","alias","key","test","contextAndProps","useMemo","defaultProps","createElement","Provider","value","_InputMaskedElement","process","env","NODE_ENV","propTypes","_objectSpread","oneOfType","object","array","func","number_mask","string","bool","currency_mask","mask_options","number_format","locale","as_currency","as_number","as_percent","show_mask","show_guide","pipe","keep_char_positions","placeholder_char","inner_ref","on_change","on_submit","on_focus","on_blur","on_submit_focus","on_submit_blur","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/InputMasked.js"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/**\n * Web InputMasked Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport InputMaskedContext from './InputMaskedContext'\nimport InputMaskedElement from './InputMaskedElement'\nimport Input, { inputPropTypes } from '../input/Input'\nimport Context from '../../shared/Context'\n\nconst InputMasked = (props) => {\n  const context = React.useContext(Context)\n\n  // Remove masks defined in Provider/Context, because it overwrites a custom mask\n  if (props?.mask) {\n    const alias = context?.InputMasked\n    for (const key in alias) {\n      if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {\n        delete alias[key]\n      }\n    }\n  }\n\n  const contextAndProps = React.useMemo(() => {\n    return extendPropsWithContext(\n      props,\n      InputMasked.defaultProps,\n      context?.InputMasked\n    )\n  }, [context?.InputMasked, props])\n\n  return (\n    <InputMaskedContext.Provider\n      value={{\n        props: contextAndProps,\n        context,\n      }}\n    >\n      <InputMaskedElement />\n    </InputMaskedContext.Provider>\n  )\n}\n\nInputMasked.propTypes = {\n  mask: PropTypes.oneOfType([\n    PropTypes.object,\n    PropTypes.array,\n    PropTypes.func,\n  ]),\n  number_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  currency_mask: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.object,\n  ]),\n  mask_options: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  number_format: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  locale: PropTypes.string,\n  as_currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_number: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  as_percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  show_guide: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  pipe: PropTypes.func,\n  keep_char_positions: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  placeholder_char: PropTypes.string,\n  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n\n  on_change: PropTypes.func,\n  on_submit: PropTypes.func,\n  on_focus: PropTypes.func,\n  on_blur: PropTypes.func,\n  on_submit_focus: PropTypes.func,\n  on_submit_blur: PropTypes.func,\n\n  ...inputPropTypes,\n}\n\nInputMasked.defaultProps = {\n  ...Input.defaultProps,\n\n  mask: null,\n  number_mask: null,\n  currency_mask: null,\n  mask_options: null,\n  number_format: null,\n  as_currency: null,\n  as_number: null,\n  as_percent: null,\n  locale: null,\n  show_mask: false,\n  show_guide: true,\n  pipe: null,\n  keep_char_positions: false,\n  placeholder_char: null,\n  inner_ref: null,\n\n  on_change: null,\n  on_submit: null,\n  on_focus: null,\n  on_blur: null,\n  on_submit_focus: null,\n  on_submit_blur: null,\n}\n\nInputMasked._formElement = true\nInputMasked._supportsSpacingProps = true\n\nexport default InputMasked\n"],"mappings":"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"}

package/components/input-masked/InputMaskedDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const inputMaskedProperties: PropertiesTableProps;

package/components/input-masked/InputMaskedDocs.js

@@ -0,0 +1,78 @@
+export const inputMaskedProperties = {
+  as_number: {
+    doc: 'Set to `true` to automatically set a number mask based on the given or inherited locale.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  as_percent: {
+    doc: 'Set to `true` to automatically set a number mask with a percentage sign based on the given or inherited locale.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  as_currency: {
+    doc: 'Set to `true` to use `NOK` or give it a currency code e.g. `USD` to automatically set a currency mask based on the given or inherited locale.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  mask_options: {
+    doc: 'Use it to manipulate internal masks. You can use it instead of e.g. `number_mask` or `currency_mask`. All options are listed below.',
+    type: 'object',
+    status: 'optional'
+  },
+  number_mask: {
+    doc: 'Set to `true` to enable the default numbers formatting – 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.',
+    type: ['boolean', 'object'],
+    status: 'optional'
+  },
+  currency_mask: {
+    doc: 'Set to `true` or set the _valuta_ (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`.',
+    type: ['boolean', 'object'],
+    status: 'optional'
+  },
+  number_format: {
+    doc: 'Use an object with [NumberFormat](/uilib/components/number-format/properties) e.g. `{ omit_rounding: false }`.',
+    type: 'object',
+    status: 'optional'
+  },
+  locale: {
+    doc: 'Define the locale to be used in the `as_number` or `as_currency` masked. It will be inherited from the [Eufemia Provider](/uilib/usage/customisation/provider) if not given. Defaults to `nb-NO`.',
+    type: 'string',
+    status: 'optional'
+  },
+  mask: {
+    doc: 'A mask can be defined both as a [RegExp style of characters](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme) or a callback function. Example below.',
+    type: ['RegExp', 'function'],
+    status: 'optional'
+  },
+  show_mask: {
+    doc: 'Show mask when input is empty and has no focus. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  show_guide: {
+    doc: "When `false` is given, it doesn't print out placeholder characters and only adds mask characters when the user reaches them as they're typing. Defaults to `true`.",
+    type: 'boolean',
+    status: 'optional'
+  },
+  placeholder_char: {
+    doc: 'The placeholder character represents the fillable spot in the mask (e.g. `_`). Defaults to invisible space.',
+    type: 'string',
+    status: 'optional'
+  },
+  keep_char_positions: {
+    doc: 'When `true`, adding or deleting characters will not affect the positions of existing characters. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  },
+  '[Input](/uilib/components/input/properties)': {
+    doc: 'All `Input` properties are supported.',
+    type: 'Various',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=InputMaskedDocs.js.map