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

package/components/progress-indicator/ProgressIndicatorCircular.d.ts

@@ -1,34 +1,39 @@
-export default class ProgressIndicatorCircular extends React.PureComponent<any, any, any> {
-    static propTypes: {
-        size: PropTypes.Requireable<string>;
-        visible: PropTypes.Requireable<boolean>;
-        complete: PropTypes.Requireable<boolean>;
-        progress: PropTypes.Requireable<string | number>;
-        maxOffset: PropTypes.Requireable<number>;
-        onComplete: PropTypes.Requireable<(...args: any[]) => any>;
-        callOnCompleteHandler: PropTypes.Requireable<(...args: any[]) => any>;
-        title: PropTypes.Requireable<string>;
-    };
-    static defaultProps: {
-        size: any;
-        visible: boolean;
-        complete: boolean;
-        progress: any;
-        maxOffset: number;
-        onComplete: any;
-        callOnCompleteHandler: any;
-        title: any;
-    };
-    static getDerivedStateFromProps(props: any, state: any): any;
-    constructor(props: any);
-    useAnimationFrame: boolean;
-    _refDark: React.RefObject<any>;
-    _refLight: React.RefObject<any>;
-    stopAnimation(): void;
-    startAnimationFirstTime(): void;
-    startupTimeout: NodeJS.Timeout;
-    startAnimation(): void;
-    animate(element: any, animateOnStart?: boolean, callback?: any): void;
+import * as React from 'react';
+export type ProgressIndicatorCircularProgress = 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 ProgressIndicatorCircularProps
+  extends React.HTMLProps<HTMLElement> {
+  /**
+   * Defines the size, like `large` or `medium`. Defaults to `medium`.
+   */
+  size?: string;
+
+  /**
+   * Defines the visibility of the progress. Toggling the `visible` property to false will force a fade-out animation. Defaults to `true`.
+   */
+  visible?: boolean;
+  complete?: boolean;
+
+  /**
+   * To visualize a static "percentage" (0-100) as a progress state. Defaults to `null`.
+   */
+  progress?: ProgressIndicatorCircularProgress;
+  maxOffset?: number;
+  onComplete?: (...args: any[]) => any;
+  callOnCompleteHandler?: (...args: any[]) => any;
+
+  /**
+   * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.
+   */
+  title?: string;
+}
+export default class ProgressIndicatorCircular extends React.Component<
+  ProgressIndicatorCircularProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/progress-indicator/ProgressIndicatorLinear.d.ts

@@ -1,25 +1,38 @@
-export default class ProgressIndicatorLinear extends React.PureComponent<any, any, any> {
-    static propTypes: {
-        size: PropTypes.Requireable<string>;
-        visible: PropTypes.Requireable<boolean>;
-        complete: PropTypes.Requireable<boolean>;
-        progress: PropTypes.Requireable<string | number>;
-        onComplete: PropTypes.Requireable<(...args: any[]) => any>;
-        callOnCompleteHandler: PropTypes.Requireable<(...args: any[]) => any>;
-        title: PropTypes.Requireable<string>;
-    };
-    static defaultProps: {
-        size: any;
-        visible: boolean;
-        complete: boolean;
-        progress: any;
-        onComplete: any;
-        callOnCompleteHandler: any;
-        title: any;
-    };
-    static getDerivedStateFromProps(props: any, state: any): any;
-    constructor(props: any);
-    onCompleteIsFn: boolean;
+import * as React from 'react';
+export type ProgressIndicatorLinearProgress = 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 ProgressIndicatorLinearProps
+  extends React.HTMLProps<HTMLElement> {
+  /**
+   * Defines the size, like `large` or `medium`. Defaults to `medium`.
+   */
+  size?: string;
+
+  /**
+   * Defines the visibility of the progress. Toggling the `visible` property to false will force a fade-out animation. Defaults to `true`.
+   */
+  visible?: boolean;
+  complete?: boolean;
+
+  /**
+   * To visualize a static "percentage" (0-100) as a progress state. Defaults to `null`.
+   */
+  progress?: ProgressIndicatorLinearProgress;
+  onComplete?: (...args: any[]) => any;
+  callOnCompleteHandler?: (...args: any[]) => any;
+
+  /**
+   * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.
+   */
+  title?: string;
+}
+export default class ProgressIndicatorLinear extends React.Component<
+  ProgressIndicatorLinearProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/radio/Radio.d.ts

@@ -1,94 +1,124 @@
+import * as React from 'react';
+import RadioGroup from './RadioGroup';
+export type RadioLabel =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type RadioLabelSrOnly = string | boolean;
+export type RadioLabelPosition = 'left' | 'right';
+export type RadioChecked = string | boolean;
+export type RadioDisabled = string | boolean;
+export type RadioSize = 'default' | 'medium' | 'large';
+export type RadioStatus =
+  | string
+  | boolean
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type RadioStatusNoAnimation = string | boolean;
+export type RadioSuffix =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type RadioAttributes = string | Object;
+export type RadioSkeleton = string | boolean;
+export type RadioReadOnly = string | boolean;
+export type RadioSpace =
+  | string
+  | number
+  | boolean
+  | {
+      top?: string | number | boolean;
+      right?: string | number | boolean;
+      bottom?: string | number | boolean;
+      left?: string | number | boolean;
+    };
+export type RadioTop = string | number | boolean;
+export type RadioRight = string | number | boolean;
+export type RadioBottom = string | number | boolean;
+export type RadioLeft = string | number | boolean;
+export type RadioChildren = string | ((...args: any[]) => any);
+
 /**
- * The radio component is our enhancement of the classic radio button.
+ * 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 Radio extends React.PureComponent<any, any, any> {
-    static tagName: string;
-    static contextType: React.Context<{}>;
-    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_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_sr_only: PropTypes.Requireable<string | boolean>;
-        label_position: PropTypes.Requireable<string>;
-        checked: PropTypes.Requireable<string | boolean>;
-        disabled: PropTypes.Requireable<string | boolean>;
-        id: PropTypes.Requireable<string>;
-        element: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        group: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        status: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        status_state: PropTypes.Requireable<string>;
-        status_props: PropTypes.Requireable<object>;
-        status_no_animation: PropTypes.Requireable<string | boolean>;
-        global_status_id: PropTypes.Requireable<string>;
-        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        value: PropTypes.Requireable<string>;
-        attributes: PropTypes.Requireable<string | object>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        readOnly: PropTypes.Requireable<string | boolean>;
-    };
-    static defaultProps: {
-        label: any;
-        label_sr_only: any;
-        label_position: any;
-        checked: any;
-        disabled: boolean;
-        id: any;
-        size: any;
-        element: string;
-        group: any;
-        status: any;
-        status_state: string;
-        status_props: any;
-        status_no_animation: any;
-        global_status_id: any;
-        suffix: any;
-        value: string;
-        attributes: any;
-        readOnly: boolean;
-        skeleton: any;
-        class: any;
-        className: any;
-        children: any;
-        custom_element: any;
-        custom_method: any;
-        on_change: any;
-        on_state_update: any;
-    };
-    static Group: typeof RadioGroup;
-    static enableWebComponent(): void;
-    static parseChecked: (state: any) => boolean;
-    static getDerivedStateFromProps(props: any, state: any): any;
-    constructor(props: any);
-    _refInput: React.RefObject<any>;
-    _id: any;
-    onKeyDownHandler: (event: any) => void;
-    onChangeHandler: (_event: any) => any;
-    isContextGroupOrSingle: () => boolean;
-    isPlainGroup: () => any;
-    isInNoGroup: () => boolean;
-    onClickHandler: (event: any) => any;
-    callOnChange: ({ value, checked, event }: {
-        value: any;
-        checked: any;
-        event: any;
-    }) => void;
+export interface RadioProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * Use either the `label` property or provide a custom one.
+   */
+  label?: RadioLabel;
+  label_sr_only?: RadioLabelSrOnly;
+
+  /**
+   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
+   */
+  label_position?: RadioLabelPosition;
+
+  /**
+   * Determine whether the radio is checked or not. Default will be `false`.
+   */
+  checked?: RadioChecked;
+  disabled?: RadioDisabled;
+  id?: string;
+  element?: React.ReactNode;
+
+  /**
+   * Use a unique group identifier to define the Radio buttons that belongs together.
+   */
+  group?: string;
+
+  /**
+   * The size of the Radio button. For now there is "medium" (default) and "large".
+   */
+  size?: RadioSize;
+
+  /**
+   * 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?: RadioStatus;
+
+  /**
+   * 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?: RadioStatusNoAnimation;
+
+  /**
+   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   */
+  global_status_id?: string;
+  suffix?: RadioSuffix;
+
+  /**
+   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
+   */
+  value?: string;
+  attributes?: RadioAttributes;
+  skeleton?: RadioSkeleton;
+  readOnly?: RadioReadOnly;
+  space?: RadioSpace;
+  top?: RadioTop;
+  right?: RadioRight;
+  bottom?: RadioBottom;
+  left?: RadioLeft;
+  class?: string;
+  className?: string;
+  children?: RadioChildren;
+  custom_element?: Object;
+  custom_method?: (...args: any[]) => any;
+
+  /**
+   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
+   */
+  on_change?: (...args: any[]) => any;
+  on_state_update?: (...args: any[]) => any;
+}
+export default class Radio extends React.Component<RadioProps, any> {
+  static defaultProps: object;
+  static Group = RadioGroup;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";
-import RadioGroup from "./RadioGroup";

package/components/radio/RadioGroup.d.ts

@@ -1,105 +1,123 @@
+import * as React from 'react';
+export type RadioGroupLabel =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type RadioGroupLabelDirection = 'horizontal' | 'vertical';
+export type RadioGroupLabelSrOnly = string | boolean;
+export type RadioGroupLabelPosition = 'left' | 'right';
+export type RadioGroupNoFieldset = string | boolean;
+export type RadioGroupDisabled = string | boolean;
+export type RadioGroupSkeleton = string | boolean;
+export type RadioGroupSize = 'default' | 'medium' | 'large';
+export type RadioGroupStatus =
+  | string
+  | boolean
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type RadioGroupStatusNoAnimation = string | boolean;
+export type RadioGroupSuffix =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type RadioGroupLayoutDirection = 'column' | 'row';
+export type RadioGroupVertical = string | boolean;
+export type RadioGroupAttributes = string | Object;
+export type RadioGroupSpace =
+  | string
+  | number
+  | boolean
+  | {
+      top?: string | number | boolean;
+      right?: string | number | boolean;
+      bottom?: string | number | boolean;
+      left?: string | number | boolean;
+    };
+export type RadioGroupTop = string | number | boolean;
+export type RadioGroupRight = string | number | boolean;
+export type RadioGroupBottom = string | number | boolean;
+export type RadioGroupLeft = string | number | boolean;
+export type RadioGroupChildren =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+
 /**
- * The radio component is our enhancement of the classic radio button. It acts like a radio. 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 RadioGroup 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<PropTypes.ReactNodeLike>;
-        custom_element: PropTypes.Requireable<object>;
-        custom_method: PropTypes.Requireable<(...args: any[]) => any>;
-        on_change: 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_direction: PropTypes.Requireable<string>;
-        label_sr_only: PropTypes.Requireable<string | boolean>;
-        label_position: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        no_fieldset: PropTypes.Requireable<string | boolean>;
-        disabled: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        id: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        status: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        status_state: PropTypes.Requireable<string>;
-        status_props: PropTypes.Requireable<object>;
-        status_no_animation: PropTypes.Requireable<string | boolean>;
-        global_status_id: PropTypes.Requireable<string>;
-        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        layout_direction: PropTypes.Requireable<string>;
-        vertical: PropTypes.Requireable<string | boolean>;
-        value: PropTypes.Requireable<string>;
-        attributes: PropTypes.Requireable<string | object>;
-    };
-    static defaultProps: {
-        label: any;
-        label_direction: any;
-        label_sr_only: any;
-        label_position: any;
-        title: any;
-        no_fieldset: any;
-        disabled: any;
-        skeleton: any;
-        id: any;
-        name: any;
-        size: any;
-        status: any;
-        status_state: string;
-        status_props: any;
-        status_no_animation: any;
-        global_status_id: any;
-        suffix: any;
-        vertical: any;
-        layout_direction: string;
-        value: any;
-        attributes: any;
-        class: any;
-        className: any;
-        children: any;
-        custom_element: any;
-        custom_method: any;
-        on_change: 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;
-    _name: any;
-    onChangeHandler: ({ value, event }: {
-        value: any;
-        event: any;
-    }) => void;
+export interface RadioGroupProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * Use either the `label` property or provide a custom one.
+   */
+  label?: RadioGroupLabel;
+  label_direction?: RadioGroupLabelDirection;
+  label_sr_only?: RadioGroupLabelSrOnly;
+
+  /**
+   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
+   */
+  label_position?: RadioGroupLabelPosition;
+  title?: string;
+  no_fieldset?: RadioGroupNoFieldset;
+  disabled?: RadioGroupDisabled;
+  skeleton?: RadioGroupSkeleton;
+  id?: string;
+  name?: string;
+
+  /**
+   * The size of the Radio button. For now there is "medium" (default) and "large".
+   */
+  size?: RadioGroupSize;
+
+  /**
+   * 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?: RadioGroupStatus;
+
+  /**
+   * 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?: RadioGroupStatusNoAnimation;
+
+  /**
+   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   */
+  global_status_id?: string;
+  suffix?: RadioGroupSuffix;
+  layout_direction?: RadioGroupLayoutDirection;
+  vertical?: RadioGroupVertical;
+
+  /**
+   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
+   */
+  value?: string;
+  attributes?: RadioGroupAttributes;
+  space?: RadioGroupSpace;
+  top?: RadioGroupTop;
+  right?: RadioGroupRight;
+  bottom?: RadioGroupBottom;
+  left?: RadioGroupLeft;
+  class?: string;
+  className?: string;
+  children?: RadioGroupChildren;
+  custom_element?: Object;
+  custom_method?: (...args: any[]) => any;
+
+  /**
+   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
+   */
+  on_change?: (...args: any[]) => any;
+}
+export default class RadioGroup extends React.Component<
+  RadioGroupProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/section/Section.d.ts

@@ -33,7 +33,6 @@ export type SectionChildren =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-
 export interface SectionProps extends React.HTMLProps<HTMLElement> {
   /**
    * To define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.

package/components/skeleton/Skeleton.d.ts

@@ -39,10 +39,10 @@ export type SkeletonChildren =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
+
 export interface SkeletonProps extends React.HTMLProps<HTMLElement> {
   /**
    * Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`.