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

package/components/input/Input.d.ts

@@ -1,210 +1,296 @@
-export const inputPropTypes: {
-    className: PropTypes.Requireable<string>;
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    custom_element: PropTypes.Requireable<object>;
-    custom_method: PropTypes.Requireable<(...args: any[]) => any>;
-    on_change: PropTypes.Requireable<(...args: any[]) => any>;
-    on_submit: PropTypes.Requireable<(...args: any[]) => any>;
-    on_focus: PropTypes.Requireable<(...args: any[]) => any>;
-    on_blur: PropTypes.Requireable<(...args: any[]) => any>;
-    on_submit_focus: PropTypes.Requireable<(...args: any[]) => any>;
-    on_submit_blur: PropTypes.Requireable<(...args: any[]) => any>;
-    on_state_update: PropTypes.Requireable<(...args: any[]) => any>;
-    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>;
-    type: PropTypes.Requireable<string>;
-    size: PropTypes.Requireable<string | number>;
-    value: PropTypes.Requireable<string | number>;
-    id: PropTypes.Requireable<string>;
-    label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    label_direction: PropTypes.Requireable<string>;
-    label_sr_only: PropTypes.Requireable<string | boolean>;
-    status: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    status_state: PropTypes.Requireable<string>;
-    status_props: PropTypes.Requireable<object>;
-    status_no_animation: PropTypes.Requireable<string | boolean>;
-    input_state: PropTypes.Requireable<string>;
-    global_status_id: PropTypes.Requireable<string>;
-    autocomplete: PropTypes.Requireable<string>;
-    submit_button_title: PropTypes.Requireable<string>;
-    clear_button_title: PropTypes.Requireable<string>;
-    placeholder: PropTypes.Requireable<string>;
-    clear: PropTypes.Requireable<string | boolean>;
-    keep_placeholder: PropTypes.Requireable<string | boolean>;
-    suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    align: PropTypes.Requireable<string>;
-    selectall: PropTypes.Requireable<string | boolean>;
-    stretch: PropTypes.Requireable<string | boolean>;
-    disabled: PropTypes.Requireable<string | boolean>;
-    skeleton: PropTypes.Requireable<string | boolean>;
-    class: PropTypes.Requireable<string>;
-    input_class: PropTypes.Requireable<string>;
-    input_attributes: PropTypes.Requireable<string | object>;
-    input_element: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    icon_size: PropTypes.Requireable<string | number>;
-    icon_position: PropTypes.Requireable<string>;
-    inner_ref: PropTypes.Requireable<object>;
-    readOnly: PropTypes.Requireable<string | boolean>;
-    submit_element: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    submit_button_variant: any;
-    submit_button_icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    submit_button_status: PropTypes.Requireable<string>;
-};
-export default class Input 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>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        custom_element: PropTypes.Requireable<object>;
-        custom_method: PropTypes.Requireable<(...args: any[]) => any>;
-        on_change: PropTypes.Requireable<(...args: any[]) => any>;
-        on_submit: PropTypes.Requireable<(...args: any[]) => any>;
-        on_focus: PropTypes.Requireable<(...args: any[]) => any>;
-        on_blur: PropTypes.Requireable<(...args: any[]) => any>;
-        on_submit_focus: PropTypes.Requireable<(...args: any[]) => any>;
-        on_submit_blur: PropTypes.Requireable<(...args: any[]) => any>;
-        on_state_update: PropTypes.Requireable<(...args: any[]) => any>;
-        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>;
-        type: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string | number>;
-        value: PropTypes.Requireable<string | number>;
-        id: PropTypes.Requireable<string>;
-        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        label_direction: PropTypes.Requireable<string>;
-        label_sr_only: PropTypes.Requireable<string | boolean>;
-        status: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        status_state: PropTypes.Requireable<string>;
-        status_props: PropTypes.Requireable<object>;
-        status_no_animation: PropTypes.Requireable<string | boolean>;
-        input_state: PropTypes.Requireable<string>;
-        global_status_id: PropTypes.Requireable<string>;
-        autocomplete: PropTypes.Requireable<string>;
-        submit_button_title: PropTypes.Requireable<string>;
-        clear_button_title: PropTypes.Requireable<string>;
-        placeholder: PropTypes.Requireable<string>;
-        clear: PropTypes.Requireable<string | boolean>;
-        keep_placeholder: PropTypes.Requireable<string | boolean>;
-        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        align: PropTypes.Requireable<string>;
-        selectall: PropTypes.Requireable<string | boolean>;
-        stretch: PropTypes.Requireable<string | boolean>;
-        disabled: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        class: PropTypes.Requireable<string>;
-        input_class: PropTypes.Requireable<string>;
-        input_attributes: PropTypes.Requireable<string | object>;
-        input_element: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        icon_size: PropTypes.Requireable<string | number>;
-        icon_position: PropTypes.Requireable<string>;
-        inner_ref: PropTypes.Requireable<object>;
-        readOnly: PropTypes.Requireable<string | boolean>;
-        submit_element: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        submit_button_variant: any;
-        submit_button_icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        submit_button_status: PropTypes.Requireable<string>;
+import * as React from 'react';
+export type InputSize = 'default' | 'small' | 'medium' | 'large' | number;
+export type InputValue = string | number;
+export type InputLabel =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type InputLabelDirection = 'horizontal' | 'vertical';
+export type InputLabelSrOnly = string | boolean;
+export type InputStatus =
+  | string
+  | boolean
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type InputStatusNoAnimation = string | boolean;
+export type InputClear = string | boolean;
+export type InputKeepPlaceholder = string | boolean;
+export type InputSuffix =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type InputAlign = 'left' | 'center' | 'right';
+export type InputSelectall = string | boolean;
+export type InputStretch = string | boolean;
+export type InputDisabled = string | boolean;
+export type InputSkeleton = string | boolean;
+export type InputInputAttributes = string | Object;
+export type InputInputElement =
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type InputIcon =
+  | string
+  | React.ReactNode
+  | ((...args: any[]) => any);
+export type InputIconSize = string | number;
+export type InputIconPosition = 'left' | 'right';
+export type InputInnerRef = ((...args: any[]) => any) | Object;
+export type InputReadOnly = string | boolean;
+export type InputSubmitElement =
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type InputSubmitButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'signal'
+  | 'unstyled';
+export type InputSubmitButtonIcon =
+  | string
+  | React.ReactNode
+  | ((...args: any[]) => any);
+export type InputSpace =
+  | 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: {
-        type: string;
-        size: any;
-        value: string;
-        id: any;
-        label: any;
-        label_direction: any;
-        label_sr_only: any;
-        status: any;
-        status_state: string;
-        status_props: any;
-        status_no_animation: any;
-        input_state: any;
-        global_status_id: any;
-        autocomplete: string;
-        placeholder: any;
-        clear: any;
-        keep_placeholder: any;
-        suffix: any;
-        align: any;
-        selectall: any;
-        stretch: any;
-        disabled: any;
-        skeleton: any;
-        input_class: any;
-        class: any;
-        input_attributes: any;
-        input_element: any;
-        inner_ref: any;
-        icon: any;
-        icon_size: any;
-        icon_position: string;
-        readOnly: boolean;
-        submit_element: any;
-        submit_button_title: any;
-        clear_button_title: any;
-        submit_button_variant: string;
-        submit_button_icon: string;
-        submit_button_status: any;
-        className: any;
-        children: any;
-        custom_element: any;
-        custom_method: any;
-        on_change: any;
-        on_submit: any;
-        on_focus: any;
-        on_blur: any;
-        on_submit_focus: any;
-        on_submit_blur: any;
-        on_state_update: any;
-    };
-    static enableWebComponent(): void;
-    static getDerivedStateFromProps(props: any, state: any): any;
-    static hasValue(value: any): boolean;
-    static getValue(props: any): any;
-    constructor(props: any, context: any);
-    _ref: any;
-    _id: any;
-    onFocusHandler: (event: any) => void;
-    _selectallTimeout: NodeJS.Timeout;
-    onBlurHandler: (event: any) => void;
-    onChangeHandler: (event: any) => void;
-    onKeyDownHandler: (event: any) => void;
-    clearValue: (event: any) => void;
+export type InputTop = string | number | boolean;
+export type InputRight = string | number | boolean;
+export type InputBottom = string | number | boolean;
+export type InputLeft = string | number | boolean;
+export type InputChildren = 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 InputProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * 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?: InputSize;
+
+  /**
+   * The content value of the input.
+   */
+  value?: InputValue;
+  id?: string;
+
+  /**
+   * Prepends the Form Label component. If no ID is provided, a random ID is created.
+   */
+  label?: InputLabel;
+
+  /**
+   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`
+   */
+  label_direction?: InputLabelDirection;
+
+  /**
+   * Use `true` to make the label only readable by screen readers.
+   */
+  label_sr_only?: InputLabelSrOnly;
+
+  /**
+   * 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?: InputStatus;
+
+  /**
+   * 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?: InputStatusNoAnimation;
+
+  /**
+   * 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?: InputClear;
+
+  /**
+   * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.
+   */
+  keep_placeholder?: InputKeepPlaceholder;
+
+  /**
+   * 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?: InputSuffix;
+
+  /**
+   * Defines the text alignment of the input. Can be `left`, `right` or `center`. Defaults to `left`.
+   */
+  align?: InputAlign;
+
+  /**
+   * 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?: InputSelectall;
+
+  /**
+   * If set to `true`, then the input field will be 100% in `width`.
+   */
+  stretch?: InputStretch;
+  disabled?: InputDisabled;
+
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
+  skeleton?: InputSkeleton;
+  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?: InputIcon;
+
+  /**
+   * The icon size of the icon shows. Defaults to `medium`.
+   */
+  icon_size?: InputIconSize;
+
+  /**
+   * Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set.
+   */
+  icon_position?: InputIconPosition;
+
+  /**
+   * 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;
+
+  /**
+   * Accepts a React element which will show up like the "submit button" would do on `type="search"`.
+   */
+  submit_element?: InputSubmitElement;
+  submit_button_variant?: InputSubmitButtonVariant;
+  submit_button_icon?: InputSubmitButtonIcon;
+  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?: InputSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: InputTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: InputRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: InputBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: InputLeft;
+  className?: string;
+  children?: InputChildren;
+  custom_element?: Object;
+  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 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;
+  on_state_update?: (...args: any[]) => any;
+}
+export default class Input extends React.Component<InputProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import PropTypes from "prop-types";
-import React from "react";
-export const SubmitButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;

package/components/input/InputPassword.d.ts

@@ -1,146 +1,18 @@
-export default class InputPassword extends React.PureComponent<any, any, any> {
-    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>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        custom_element: PropTypes.Requireable<object>;
-        custom_method: PropTypes.Requireable<(...args: any[]) => any>;
-        on_change: PropTypes.Requireable<(...args: any[]) => any>;
-        on_submit: PropTypes.Requireable<(...args: any[]) => any>;
-        on_focus: PropTypes.Requireable<(...args: any[]) => any>;
-        on_blur: PropTypes.Requireable<(...args: any[]) => any>;
-        on_submit_focus: PropTypes.Requireable<(...args: any[]) => any>;
-        on_submit_blur: PropTypes.Requireable<(...args: any[]) => any>;
-        on_state_update: PropTypes.Requireable<(...args: any[]) => any>;
-        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>;
-        type: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string | number>;
-        value: PropTypes.Requireable<string | number>;
-        id: PropTypes.Requireable<string>;
-        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        label_direction: PropTypes.Requireable<string>;
-        label_sr_only: PropTypes.Requireable<string | boolean>;
-        status: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        status_state: PropTypes.Requireable<string>;
-        status_props: PropTypes.Requireable<object>;
-        status_no_animation: PropTypes.Requireable<string | boolean>;
-        input_state: PropTypes.Requireable<string>;
-        global_status_id: PropTypes.Requireable<string>;
-        autocomplete: PropTypes.Requireable<string>;
-        submit_button_title: PropTypes.Requireable<string>;
-        clear_button_title: PropTypes.Requireable<string>;
-        placeholder: PropTypes.Requireable<string>;
-        clear: PropTypes.Requireable<string | boolean>;
-        keep_placeholder: PropTypes.Requireable<string | boolean>;
-        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        align: PropTypes.Requireable<string>;
-        selectall: PropTypes.Requireable<string | boolean>;
-        stretch: PropTypes.Requireable<string | boolean>;
-        disabled: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        class: PropTypes.Requireable<string>;
-        input_class: PropTypes.Requireable<string>;
-        input_attributes: PropTypes.Requireable<string | object>;
-        input_element: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        icon_size: PropTypes.Requireable<string | number>;
-        icon_position: PropTypes.Requireable<string>;
-        inner_ref: PropTypes.Requireable<object>;
-        readOnly: PropTypes.Requireable<string | boolean>;
-        submit_element: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        submit_button_variant: any;
-        submit_button_icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        submit_button_status: PropTypes.Requireable<string>;
-        show_password: PropTypes.Requireable<string>;
-        hide_password: PropTypes.Requireable<string>;
-        on_show_password: PropTypes.Requireable<(...args: any[]) => any>;
-        on_hide_password: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        type: string;
-        size: any;
-        value: string;
-        id: any;
-        label: any;
-        label_direction: any;
-        label_sr_only: any;
-        status: any;
-        status_state: string;
-        status_props: any;
-        status_no_animation: any;
-        input_state: any;
-        global_status_id: any;
-        autocomplete: string;
-        placeholder: any;
-        clear: any;
-        keep_placeholder: any;
-        suffix: any;
-        align: any;
-        selectall: any;
-        stretch: any;
-        disabled: any;
-        skeleton: any;
-        input_class: any;
-        class: any;
-        input_attributes: any;
-        input_element: any;
-        inner_ref: any;
-        icon: any;
-        icon_size: any;
-        icon_position: string;
-        readOnly: boolean;
-        submit_element: any;
-        submit_button_title: any;
-        clear_button_title: any;
-        submit_button_variant: string;
-        submit_button_icon: string;
-        submit_button_status: any;
-        className: any;
-        children: any;
-        custom_element: any;
-        custom_method: any;
-        on_change: any;
-        on_submit: any;
-        on_focus: any;
-        on_blur: any;
-        on_submit_focus: any;
-        on_submit_blur: any;
-        on_state_update: any;
-        show_password: any;
-        hide_password: any;
-        on_show_password: any;
-        on_hide_password: any;
-    };
-    constructor(props: any);
-    _id: any;
-    _ref: any;
-    toggleVisibility: (event: any) => void;
+import * as React from 'react';
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface InputPasswordProps extends React.HTMLProps<HTMLElement> {
+  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;
 }
-import React from "react";
-import PropTypes from "prop-types";