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

package/components/step-indicator/StepIndicatorItem.d.ts

@@ -1,113 +1,86 @@
-export default class StepIndicatorItem extends React.PureComponent<any, any, any> {
-    static contextType: React.Context<any>;
-    static propTypes: {
-        mode: PropTypes.Requireable<string>;
-        title: PropTypes.Validator<PropTypes.ReactNodeLike>;
-        step_title: PropTypes.Requireable<string>;
-        hide_numbers: PropTypes.Requireable<string | boolean>;
-        on_item_render: PropTypes.Requireable<(...args: any[]) => any>;
-        on_change: PropTypes.Requireable<(...args: any[]) => any>;
-        on_render: PropTypes.Requireable<(...args: any[]) => any>;
-        on_click: PropTypes.Requireable<(...args: any[]) => any>;
-        is_current: PropTypes.Requireable<boolean>;
-        inactive: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        status: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        status_state: PropTypes.Requireable<string>;
-        currentItemNum: PropTypes.Validator<number>;
-        use_navigation: PropTypes.Requireable<string | boolean>;
-        is_active: PropTypes.Requireable<string | boolean>;
-        url: PropTypes.Requireable<string>;
-        url_future: PropTypes.Requireable<string>;
-        url_passed: PropTypes.Requireable<string>;
-    };
-    static defaultProps: {
-        mode: any;
-        step_title: string;
-        hide_numbers: boolean;
-        on_item_render: any;
-        on_change: any;
-        on_render: any;
-        on_click: any;
-        is_current: any;
-        inactive: any;
-        disabled: any;
-        status: any;
-        status_state: string;
-        use_navigation: any;
-        is_active: any;
-        url: any;
-        url_future: any;
-        url_passed: any;
-    };
-    constructor(props: any, context: any);
-    _heightAnim: AnimateHeight;
-    _ref: React.RefObject<any>;
-    _prevStep: any;
-    onClickHandler: ({ event, item, currentItemNum }: {
-        event: any;
-        item: any;
-        currentItemNum: any;
-    }) => void;
-    canWarn: () => boolean;
+import * as React from 'react';
+export type StepIndicatorItemTitle = string | React.ReactNode;
+export type StepIndicatorItemHideNumbers = string | boolean;
+export type StepIndicatorItemStatus = string | React.ReactNode;
+export type StepIndicatorItemStatusState = 'warn' | 'info' | 'error';
+export type StepIndicatorItemUseNavigation = string | boolean;
+export type StepIndicatorItemIsActive = string | 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 StepIndicatorItemProps
+  extends React.HTMLProps<HTMLElement> {
+  /**
+   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   */
+  mode?: string;
+  title: StepIndicatorItemTitle;
+  step_title?: string;
+
+  /**
+   * Define whether to show automatically counted numbers or not. Defaults to `false`.
+   */
+  hide_numbers?: StepIndicatorItemHideNumbers;
+
+  /**
+   * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
+   */
+  on_item_render?: (...args: any[]) => any;
+
+  /**
+   * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
+   */
+  on_change?: (...args: any[]) => any;
+  on_render?: (...args: any[]) => any;
+
+  /**
+   * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+   */
+  on_click?: (...args: any[]) => any;
+  is_current?: boolean;
+  inactive?: boolean;
+  disabled?: boolean;
+  status?: StepIndicatorItemStatus;
+  status_state?: StepIndicatorItemStatusState;
+  currentItemNum: number;
+  use_navigation?: StepIndicatorItemUseNavigation;
+  is_active?: StepIndicatorItemIsActive;
+  url?: string;
+  url_future?: string;
+  url_passed?: string;
 }
-export function StepItemButton({ children, className, status, status_state, inner_ref, ...props }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-    status: any;
-    status_state: any;
-    inner_ref: any;
-}): JSX.Element;
-export namespace StepItemButton {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const inner_ref: PropTypes.Requireable<object>;
-        const className: PropTypes.Requireable<string>;
-        const status: PropTypes.Requireable<string>;
-        const status_state: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        const children_1: any;
-        export { children_1 as children };
-        const inner_ref_1: any;
-        export { inner_ref_1 as inner_ref };
-        const className_1: any;
-        export { className_1 as className };
-        const status_1: any;
-        export { status_1 as status };
-        const status_state_1: any;
-        export { status_state_1 as status_state };
-    }
+export default class StepIndicatorItem extends React.Component<
+  StepIndicatorItemProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-export function StepItemWrapper({ children, number, hide_numbers, status, }: {
-    children: any;
-    number: any;
-    hide_numbers: any;
-    status: any;
-}): JSX.Element;
-export namespace StepItemWrapper {
-    export namespace propTypes_1 {
-        const children_2: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export { children_2 as children };
-        export const number: PropTypes.Requireable<number>;
-        export const hide_numbers: PropTypes.Requireable<boolean>;
-        const status_2: PropTypes.Requireable<string>;
-        export { status_2 as status };
-    }
-    export { propTypes_1 as propTypes };
-    export namespace defaultProps_1 {
-        const children_3: any;
-        export { children_3 as children };
-        const number_1: any;
-        export { number_1 as number };
-        const hide_numbers_1: any;
-        export { hide_numbers_1 as hide_numbers };
-        const status_3: any;
-        export { status_3 as status };
-    }
-    export { defaultProps_1 as defaultProps };
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface StepItemButtonProps {
+  children?: React.ReactNode;
+  inner_ref?: Object;
+  className?: string;
+  status?: string;
+  status_state?: string;
 }
-import React from "react";
-import AnimateHeight from "../../shared/AnimateHeight";
-import PropTypes from "prop-types";
+export const StepItemButton: React.FC<StepItemButtonProps>;
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface StepItemWrapperProps {
+  children?: React.ReactNode;
+  number?: number;
+
+  /**
+   * Define whether to show automatically counted numbers or not. Defaults to `false`.
+   */
+  hide_numbers?: boolean;
+  status?: string;
+}
+export const StepItemWrapper: React.FC<StepItemWrapperProps>;

package/components/step-indicator/StepIndicatorList.d.ts

@@ -1,6 +1,7 @@
 export default class StepIndicatorList extends React.PureComponent<any, any, any> {
-    static contextType: React.Context<any>;
+    static contextType: typeof StepIndicatorContext;
     constructor(props: any);
     constructor(props: any, context: any);
 }
 import React from "react";
+import StepIndicatorContext from "./StepIndicatorContext";

package/components/step-indicator/StepIndicatorModal.d.ts

@@ -1,8 +1,9 @@
 export default class StepIndicatorModal extends React.PureComponent<any, any, any> {
-    static contextType: React.Context<any>;
+    static contextType: typeof StepIndicatorContext;
     constructor(props: any);
     _triggerRef: React.RefObject<any>;
     closeHandler: (...args: any[]) => void;
     renderPortal(): React.ReactPortal;
 }
 import React from "react";
+import StepIndicatorContext from "./StepIndicatorContext";

package/components/step-indicator/StepIndicatorSidebar.d.ts

@@ -1,53 +1,59 @@
-export default class StepIndicatorSidebar 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: {
-        sidebar_id: PropTypes.Validator<string>;
-        mode: PropTypes.Requireable<string>;
-        current_step: PropTypes.Requireable<string | number>;
-        data: PropTypes.Requireable<string | string[] | PropTypes.InferProps<{
-            title: PropTypes.Validator<PropTypes.ReactNodeLike>;
-            is_current: PropTypes.Requireable<boolean>;
-            inactive: PropTypes.Requireable<boolean>;
-            disabled: PropTypes.Requireable<boolean>;
-            status: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            status_state: PropTypes.Requireable<string>;
-            on_click: PropTypes.Requireable<(...args: any[]) => any>;
-            on_render: PropTypes.Requireable<(...args: any[]) => any>;
-            url: PropTypes.Requireable<string>;
-            is_active: PropTypes.Requireable<string | boolean>;
-            url_future: PropTypes.Requireable<string>;
-            url_passed: PropTypes.Requireable<string>;
-        }>[]>;
-        /** Used for testing */
-        internalId: PropTypes.Requireable<string>;
-        showInitialData: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        mode: any;
-        current_step: any;
-        data: any[];
-    };
-    constructor(props: any);
-    constructor(props: any, context: any);
-    getContextAndProps(): any;
-    _hasSkeletonData: boolean;
+import * as React from 'react';
+export type StepIndicatorSidebarMode = 'static' | 'strict' | 'loose';
+export type StepIndicatorSidebarCurrentStep = string | number;
+export type StepIndicatorSidebarData =
+  | string
+  | string[]
+  | {
+      title: string | React.ReactNode;
+      is_current?: boolean;
+      inactive?: boolean;
+      disabled?: boolean;
+      status?: string | React.ReactNode;
+      status_state?: 'warn' | 'info' | 'error';
+
+      /**
+       * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+       */
+      on_click?: (...args: any[]) => any;
+      on_render?: (...args: any[]) => any;
+      url?: string;
+      is_active?: string | boolean;
+      url_future?: string;
+      url_passed?: string;
+    }[];
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface StepIndicatorSidebarProps
+  extends React.HTMLProps<HTMLElement> {
+  /**
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   */
+  sidebar_id: string;
+
+  /**
+   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   */
+  mode?: StepIndicatorSidebarMode;
+
+  /**
+   * Defines the active number marked step starting by 0. Defaults to `0`.
+   */
+  current_step?: StepIndicatorSidebarCurrentStep;
+
+  /**
+   * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
+   */
+  data?: StepIndicatorSidebarData;
+  internalId?: string;
+  showInitialData?: boolean;
+}
+export default class StepIndicatorSidebar extends React.Component<
+  StepIndicatorSidebarProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/step-indicator/StepIndicatorTriggerButton.d.ts

@@ -1,20 +1,21 @@
-export default class StepIndicatorTriggerButton extends React.PureComponent<any, any, any> {
-    static contextType: React.Context<any>;
-    static propTypes: {
-        sidebar_id: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        inner_ref: PropTypes.Requireable<object>;
-    };
-    static defaultProps: {
-        sidebar_id: any;
-        className: any;
-        inner_ref: any;
-    };
-    constructor(props: any, context: any);
-    _heightAnim: AnimateHeight;
-    _buttonRef: any;
-    _prevStep: any;
+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 StepIndicatorTriggerButtonProps
+  extends React.HTMLProps<HTMLElement> {
+  /**
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   */
+  sidebar_id?: string;
+  className?: string;
+  inner_ref?: Object;
+}
+export default class StepIndicatorTriggerButton extends React.Component<
+  StepIndicatorTriggerButtonProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import AnimateHeight from "../../shared/AnimateHeight";
-import PropTypes from "prop-types";

package/components/switch/Switch.d.ts

@@ -1,104 +1,165 @@
+import * as React from 'react';
+export type SwitchLabel =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type SwitchLabelPosition = 'left' | 'right';
+export type SwitchDefaultState = string | boolean;
+export type SwitchChecked = string | boolean;
+export type SwitchDisabled = string | boolean;
+export type SwitchSize = 'default' | 'medium' | 'large';
+export type SwitchStatus =
+  | string
+  | boolean
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type SwitchStatusNoAnimation = string | boolean;
+export type SwitchSuffix =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type SwitchAttributes = string | Object;
+export type SwitchReadOnly = string | boolean;
+export type SwitchSkeleton = string | boolean;
+export type SwitchSpace =
+  | 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 SwitchTop = string | number | boolean;
+export type SwitchRight = string | number | boolean;
+export type SwitchBottom = string | number | boolean;
+export type SwitchLeft = string | number | boolean;
+export type SwitchChildren = string | ((...args: any[]) => any);
+
 /**
- * The switch component is our enhancement of the classic radio button. It acts like a switch. Example: On/off, yes/no.
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
-export default class Switch 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: {
-        class: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<string | ((...args: any[]) => any)>;
-        custom_element: PropTypes.Requireable<object>;
-        custom_method: PropTypes.Requireable<(...args: any[]) => any>;
-        on_change: PropTypes.Requireable<(...args: any[]) => any>;
-        on_change_end: 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>;
-        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        label_position: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        default_state: PropTypes.Requireable<string | boolean>;
-        checked: PropTypes.Requireable<string | boolean>;
-        disabled: PropTypes.Requireable<string | boolean>;
-        id: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        status: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        status_state: PropTypes.Requireable<string>;
-        status_props: PropTypes.Requireable<object>;
-        global_status_id: PropTypes.Requireable<string>;
-        status_no_animation: PropTypes.Requireable<string | boolean>;
-        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        value: PropTypes.Requireable<string>;
-        attributes: PropTypes.Requireable<string | object>;
-        readOnly: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-    };
-    static defaultProps: {
-        label: any;
-        label_position: any;
-        title: any;
-        default_state: any;
-        checked: any;
-        disabled: any;
-        id: any;
-        size: any;
-        status: any;
-        status_state: string;
-        status_props: any;
-        global_status_id: any;
-        status_no_animation: any;
-        suffix: any;
-        value: any;
-        attributes: any;
-        readOnly: boolean;
-        skeleton: any;
-        class: any;
-        className: any;
-        children: any;
-        custom_element: any;
-        custom_method: any;
-        on_change: any;
-        on_change_end: any;
-        on_state_update: any;
-    };
-    static enableWebComponent(): void;
-    static parseChecked: (state: any) => boolean;
-    static getDerivedStateFromProps(props: any, state: any): any;
-    constructor(props: any);
-    _refInput: React.RefObject<any>;
-    _id: any;
-    helperParams: {
-        onMouseDown: (e: any) => any;
-    };
-    onKeyDownHandler: (event: any) => void;
-    onChangeHandler: (event: any) => any;
-    _onChangeEndId: NodeJS.Timeout;
+export interface SwitchProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * Use either the `label` property or provide a custom one.
+   */
+  label?: SwitchLabel;
+
+  /**
+   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
+   */
+  label_position?: SwitchLabelPosition;
+
+  /**
+   * <em>(required)</em> the `title` of the input - describing it a bit further for accessibility reasons.
+   */
+  title?: string;
+  default_state?: SwitchDefaultState;
+
+  /**
+   * Determine whether the switch is checked or not. The default will be `false`.
+   */
+  checked?: SwitchChecked;
+  disabled?: SwitchDisabled;
+  id?: string;
+
+  /**
+   * The size of the switch. For now there is "medium" (default) and "large".
+   */
+  size?: SwitchSize;
+
+  /**
+   * 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?: SwitchStatus;
+
+  /**
+   * 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;
+
+  /**
+   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   */
+  global_status_id?: string;
+  status_no_animation?: SwitchStatusNoAnimation;
+
+  /**
+   * Text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component.
+   */
+  suffix?: SwitchSuffix;
+  value?: string;
+  attributes?: SwitchAttributes;
+  readOnly?: SwitchReadOnly;
+
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
+  skeleton?: SwitchSkeleton;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: SwitchSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: SwitchTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: SwitchRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: SwitchBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: SwitchLeft;
+  class?: string;
+  className?: string;
+  children?: SwitchChildren;
+  custom_element?: Object;
+  custom_method?: (...args: any[]) => any;
+
+  /**
+   * Will be called on state changes made by the user. Returns a boolean `{ checked, event }`.
+   */
+  on_change?: (...args: any[]) => any;
+
+  /**
+   * Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean `{ checked, event }`.
+   */
+  on_change_end?: (...args: any[]) => any;
+  on_state_update?: (...args: any[]) => any;
+}
+export default class Switch extends React.Component<SwitchProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";