@dnb/eufemia 9.23.0-beta.1 → 9.23.0-beta.2

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

@@ -1,3 +1,371 @@
+import * as React from 'react';
+export type InputMaskedMask = Object | any[] | ((...args: any[]) => any);
+export type InputMaskedNumberMask = string | boolean | Object;
+export type InputMaskedCurrencyMask = string | boolean | Object;
+export type InputMaskedMaskOptions = string | Object;
+export type InputMaskedNumberFormat = string | Object;
+export type InputMaskedAsCurrency = string | boolean;
+export type InputMaskedAsNumber = string | boolean;
+export type InputMaskedAsPercent = string | boolean;
+export type InputMaskedShowMask = string | boolean;
+export type InputMaskedShowGuide = string | boolean;
+export type InputMaskedKeepCharPositions = string | boolean;
+export type InputMaskedSize =
+  | 'default'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | number;
+export type InputMaskedValue = string | number;
+export type InputMaskedLabel =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type InputMaskedLabelDirection = 'horizontal' | 'vertical';
+export type InputMaskedLabelSrOnly = string | boolean;
+export type InputMaskedStatus =
+  | string
+  | boolean
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type InputMaskedStatusNoAnimation = string | boolean;
+export type InputMaskedClear = string | boolean;
+export type InputMaskedKeepPlaceholder = string | boolean;
+export type InputMaskedSuffix =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type InputMaskedAlign = 'left' | 'center' | 'right';
+export type InputMaskedSelectall = string | boolean;
+export type InputMaskedStretch = string | boolean;
+export type InputMaskedDisabled = string | boolean;
+export type InputMaskedSkeleton = string | boolean;
+export type InputMaskedInputAttributes = string | Object;
+export type InputMaskedInputElement =
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type InputMaskedIcon =
+  | string
+  | React.ReactNode
+  | ((...args: any[]) => any);
+export type InputMaskedIconSize = string | number;
+export type InputMaskedIconPosition = 'left' | 'right';
+export type InputMaskedReadOnly = string | boolean;
+export type InputMaskedSubmitElement =
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type InputMaskedSubmitButtonIcon =
+  | string
+  | React.ReactNode
+  | ((...args: any[]) => any);
+export type InputMaskedSpace =
+  | string
+  | number
+  | boolean
+  | {
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+       */
+      top?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+       */
+      right?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+       */
+      bottom?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+       */
+      left?: string | number | boolean;
+    };
+export type InputMaskedTop = string | number | boolean;
+export type InputMaskedRight = string | number | boolean;
+export type InputMaskedBottom = string | number | boolean;
+export type InputMaskedLeft = string | number | boolean;
+export type InputMaskedChildren =
+  | React.ReactNode
+  | ((...args: any[]) => any);
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * 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;
+
+  /**
+   * 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.
+   */
+  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`.
+   */
+  currency_mask?: InputMaskedCurrencyMask;
+
+  /**
+   * Use it to manipulate internal masks. You can use it instead of e.g. `number_mask` or `curreny_mask`. All options are listed below.
+   */
+  mask_options?: InputMaskedMaskOptions;
+
+  /**
+   * Use an object with <a href="/uilib/components/number-format/properties">NumberFormat</a> e.g. `{ omit_rounding: false }`.
+   */
+  number_format?: InputMaskedNumberFormat;
+
+  /**
+   * 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`.
+   */
+  locale?: string;
+
+  /**
+   * 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.
+   */
+  as_currency?: InputMaskedAsCurrency;
+
+  /**
+   * Set to `true` to automatically set a number mask based on the given or inherited locale.
+   */
+  as_number?: InputMaskedAsNumber;
+
+  /**
+   * Set to `true` to automatically set a number mask with a percentage sign based on the given or inherited locale.
+   */
+  as_percent?: InputMaskedAsPercent;
+
+  /**
+   * Show mask when input is empty and has no focus. Defaults to `false`.
+   */
+  show_mask?: InputMaskedShowMask;
+
+  /**
+   * 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`.
+   */
+  show_guide?: InputMaskedShowGuide;
+  pipe?: (...args: any[]) => any;
+
+  /**
+   * When `true`, adding or deleting characters will not affect the positions of existing characters. Defaults to `false`.
+   */
+  keep_char_positions?: InputMaskedKeepCharPositions;
+
+  /**
+   * 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?: Object;
+
+  /**
+   * 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;
+
+  /**
+   * Will be called on submit button click. Returns `{ value, event }`.
+   */
+  on_submit?: (...args: any[]) => any;
+
+  /**
+   * Will be called on focus set by the user. Returns `{ value, event }`.
+   */
+  on_focus?: (...args: any[]) => any;
+
+  /**
+   * Will be called on blur set by the user. Returns `{ value, event }`.
+   */
+  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 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;
+
+  /**
+   * 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?: InputMaskedLabel;
+
+  /**
+   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`
+   */
+  label_direction?: InputMaskedLabelDirection;
+
+  /**
+   * Use `true` to make the label only readable by screen readers.
+   */
+  label_sr_only?: InputMaskedLabelSrOnly;
+
+  /**
+   * 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?: InputMaskedStatus;
+
+  /**
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
+   */
+  status_state?: string;
+
+  /**
+   * Use an object to define additional FormStatus properties.
+   */
+  status_props?: Object;
+  status_no_animation?: InputMaskedStatusNoAnimation;
+
+  /**
+   * 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 `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   */
+  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 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?: InputMaskedClear;
+
+  /**
+   * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.
+   */
+  keep_placeholder?: InputMaskedKeepPlaceholder;
+
+  /**
+   * 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.
+   */
+  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?: InputMaskedSelectall;
+
+  /**
+   * If set to `true`, then the input field will be 100% in `width`.
+   */
+  stretch?: InputMaskedStretch;
+  disabled?: InputMaskedDisabled;
+
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
+  skeleton?: InputMaskedSkeleton;
+  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?: InputMaskedInputAttributes;
+
+  /**
+   * <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 an SVG icon of either 16px or 24px.
+   */
+  icon?: InputMaskedIcon;
+
+  /**
+   * The icon size of the icon shows. Defaults to `medium`.
+   */
+  icon_size?: InputMaskedIconSize;
+
+  /**
+   * Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set.
+   */
+  icon_position?: InputMaskedIconPosition;
+  readOnly?: InputMaskedReadOnly;
+
+  /**
+   * 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;
+  submit_button_status?: string;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: InputMaskedSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: InputMaskedTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: InputMaskedRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: InputMaskedBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: InputMaskedLeft;
+  className?: string;
+  children?: InputMaskedChildren;
+  custom_element?: Object;
+  custom_method?: (...args: any[]) => any;
+  on_state_update?: (...args: any[]) => any;
+}
+declare const InputMasked: React.FC<InputMaskedProps>;
 export default InputMasked;
-declare const InputMasked: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

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

@@ -1,41 +1,33 @@
-export default class TextMask extends React.PureComponent<any, any, any> {
-    static propTypes: {
-        mask: PropTypes.Validator<boolean | any[] | ((...args: any[]) => any) | PropTypes.InferProps<{
-            mask: PropTypes.Requireable<any[] | ((...args: any[]) => any)>;
-            pipe: PropTypes.Requireable<(...args: any[]) => any>;
-        }>>;
-        inputRef: PropTypes.Requireable<object>;
-        inputElement: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        guide: PropTypes.Requireable<boolean>;
-        value: PropTypes.Requireable<string | number>;
-        pipe: PropTypes.Requireable<(...args: any[]) => any>;
-        placeholderChar: PropTypes.Requireable<string>;
-        keepCharPositions: PropTypes.Requireable<boolean>;
-        showMask: PropTypes.Requireable<boolean>;
+import * as React from 'react';
+export type TextMaskMask =
+  | any[]
+  | ((...args: any[]) => any)
+  | boolean
+  | {
+      mask?: any[] | ((...args: any[]) => any);
+      pipe?: (...args: any[]) => any;
     };
-    static defaultProps: {
-        inputElement: any;
-        inputRef: any;
-        onChange: any;
-        guide: any;
-        value: any;
-        pipe: any;
-        placeholderChar: any;
-        keepCharPositions: any;
-        showMask: any;
-    };
-    constructor(props: any);
-    inputRef: any;
-    initTextMask(): void;
-    textMaskInputElement: {
-        state: {
-            previousConformedValue: any;
-            previousPlaceholder: any;
-        };
-        update(rawValue: any, { inputElement, mask: providedMask, guide, pipe, placeholderChar, keepCharPositions, showMask, }?: any): void;
-    };
-    onChange: (event: any) => any;
+export type TextMaskInputElement =
+  | React.ReactNode
+  | ((...args: any[]) => any);
+export type TextMaskValue = string | number;
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface TextMaskProps extends React.HTMLProps<HTMLElement> {
+  mask: TextMaskMask;
+  inputRef?: Object;
+  inputElement?: TextMaskInputElement;
+  onChange?: (...args: any[]) => any;
+  guide?: boolean;
+  value?: TextMaskValue;
+  pipe?: (...args: any[]) => any;
+  placeholderChar?: string;
+  keepCharPositions?: boolean;
+  showMask?: boolean;
+}
+export default class TextMask extends React.Component<TextMaskProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/lib.d.ts

@@ -27,7 +27,7 @@ export function getComponents(): {
     IconPrimary: typeof IconPrimary;
     InfoCard: (localProps: import("./info-card/InfoCard").InfoCardProps & import("../shared/interfaces").ISpacingProps) => JSX.Element;
     Input: typeof Input;
-    InputMasked: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+    InputMasked: import("react").FC<import("./input-masked/InputMasked").InputMaskedProps>;
     Logo: typeof Logo;
     Modal: typeof import("./modal/Modal").OriginalComponent;
     NumberFormat: typeof NumberFormat;

package/components/logo/Logo.d.ts

@@ -1,56 +1,92 @@
-export default class Logo extends React.PureComponent<any, any, any> {
-    static tagName: string;
-    static contextType: React.Context<{
-        translation: any;
-        updateTranslation: (locale: any, translation: any) => void;
-        getTranslation: (props: any) => any;
-        locales: any;
-        Avatar: {};
-        AvatarGroup: {};
-        Breadcrumb: {};
-        BreadcrumbItem: {};
-        InfoCard: {};
-        Tag: {};
-        TagGroup: {};
-        Timeline: {};
-        TimelineItem: {};
-        VisuallyHidden: {};
-        Drawer: {};
-        Dialog: {};
-    }>;
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        space: PropTypes.Requireable<string | number | boolean | PropTypes.InferProps<{
-            top: PropTypes.Requireable<string | number | boolean>;
-            right: PropTypes.Requireable<string | number | boolean>;
-            bottom: PropTypes.Requireable<string | number | boolean>;
-            left: PropTypes.Requireable<string | number | boolean>;
-        }>>;
-        top: PropTypes.Requireable<string | number | boolean>;
-        right: PropTypes.Requireable<string | number | boolean>;
-        bottom: PropTypes.Requireable<string | number | boolean>;
-        left: PropTypes.Requireable<string | number | boolean>;
-        size: PropTypes.Requireable<string | number>;
-        ratio: PropTypes.Requireable<string | number>;
-        width: PropTypes.Requireable<string | number>;
-        height: PropTypes.Requireable<string | number>;
-        alt: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        class: PropTypes.Requireable<string>;
+import * as React from 'react';
+export type LogoSize = number | string;
+export type LogoRatio = number | string;
+export type LogoWidth = number | string;
+export type LogoHeight = number | string;
+export type LogoSpace =
+  | string
+  | number
+  | boolean
+  | {
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+       */
+      top?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+       */
+      right?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+       */
+      bottom?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+       */
+      left?: string | number | boolean;
     };
-    static defaultProps: {
-        size: any;
-        ratio: number;
-        width: any;
-        height: any;
-        alt: string;
-        color: any;
-        class: any;
-        className: any;
-    };
-    static enableWebComponent(): void;
-    constructor(props: any);
-    constructor(props: any, context: any);
+export type LogoTop = string | number | boolean;
+export type LogoRight = string | number | boolean;
+export type LogoBottom = string | number | boolean;
+export type LogoLeft = string | number | boolean;
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface LogoProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * Define the size of the logo. Sets the height. The width will be calculated by the ratio. Also, `inherit` will use the inherited height. Defaults to `auto`
+   */
+  size?: LogoSize;
+  ratio?: LogoRatio;
+
+  /**
+   * Define either the width of the logo
+   */
+  width?: LogoWidth;
+
+  /**
+   * Or define the height of the logo
+   */
+  height?: LogoHeight;
+  alt?: string;
+
+  /**
+   * Define the color of the logo
+   */
+  color?: string;
+  class?: string;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: LogoSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: LogoTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: LogoRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: LogoBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: LogoLeft;
+  className?: string;
+}
+export default class Logo extends React.Component<LogoProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";