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

package/components/skeleton/figures/Article.d.ts

@@ -1,32 +1,21 @@
-export default class SkeletonArticle 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: {
-        rows: PropTypes.Requireable<string | number>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    static defaultProps: {
-        rows: number;
-        children: any;
-    };
-    constructor(props: any);
-    rowsLength: number[];
+import * as React from 'react';
+export type SkeletonArticleRows = string | number;
+export type SkeletonArticleChildren =
+  | 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 SkeletonArticleProps
+  extends React.HTMLProps<HTMLElement> {
+  rows?: SkeletonArticleRows;
+  children?: SkeletonArticleChildren;
+}
+export default class SkeletonArticle extends React.Component<
+  SkeletonArticleProps,
+  any
+> {
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/skeleton/figures/Circle.d.ts

@@ -1,32 +1,20 @@
-export default class SkeletonCircle 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: {
-        rows: PropTypes.Requireable<string | number>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    static defaultProps: {
-        rows: number;
-        children: any;
-    };
-    constructor(props: any);
-    rowsLength: number[];
+import * as React from 'react';
+export type SkeletonCircleRows = string | number;
+export type SkeletonCircleChildren =
+  | 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 SkeletonCircleProps extends React.HTMLProps<HTMLElement> {
+  rows?: SkeletonCircleRows;
+  children?: SkeletonCircleChildren;
+}
+export default class SkeletonCircle extends React.Component<
+  SkeletonCircleProps,
+  any
+> {
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/skeleton/figures/Product.d.ts

@@ -1,32 +1,21 @@
-export default class SkeletonProduct 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: {
-        rows: PropTypes.Requireable<string | number>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    static defaultProps: {
-        rows: number;
-        children: any;
-    };
-    constructor(props: any);
-    rowsLength: number[];
+import * as React from 'react';
+export type SkeletonProductRows = string | number;
+export type SkeletonProductChildren =
+  | 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 SkeletonProductProps
+  extends React.HTMLProps<HTMLElement> {
+  rows?: SkeletonProductRows;
+  children?: SkeletonProductChildren;
+}
+export default class SkeletonProduct extends React.Component<
+  SkeletonProductProps,
+  any
+> {
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/skeleton/figures/Table.d.ts

@@ -1,32 +1,20 @@
-export default class SkeletonTable 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: {
-        rows: PropTypes.Requireable<string | number>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    static defaultProps: {
-        rows: number;
-        children: any;
-    };
-    constructor(props: any);
-    rowsLength: number[];
+import * as React from 'react';
+export type SkeletonTableRows = string | number;
+export type SkeletonTableChildren =
+  | 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 SkeletonTableProps extends React.HTMLProps<HTMLElement> {
+  rows?: SkeletonTableRows;
+  children?: SkeletonTableChildren;
+}
+export default class SkeletonTable extends React.Component<
+  SkeletonTableProps,
+  any
+> {
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/slider/Slider.d.ts

@@ -1,131 +1,231 @@
+import * as React from 'react';
+export type SliderLabel =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type SliderLabelDirection = 'horizontal' | 'vertical';
+export type SliderLabelSrOnly = string | boolean;
+export type SliderStatus =
+  | string
+  | boolean
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type SliderStatusNoAnimation = string | boolean;
+export type SliderSuffix =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type SliderMin = string | number;
+export type SliderMax = string | number;
+export type SliderValue = string | number;
+export type SliderStep = string | number;
+export type SliderVertical = string | boolean;
+export type SliderReverse = string | boolean;
+export type SliderStretch = string | boolean;
+export type SliderNumberFormat = string | Object;
+export type SliderDisabled = string | boolean;
+export type SliderHideButtons = string | boolean;
+export type SliderUseScrollwheel = string | boolean;
+export type SliderSkeleton = string | boolean;
+export type SliderSpace =
+  | 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 SliderTop = string | number | boolean;
+export type SliderRight = string | number | boolean;
+export type SliderBottom = string | number | boolean;
+export type SliderLeft = string | number | boolean;
+export type SliderChildren = string | ((...args: any[]) => any);
+
 /**
- * The slider component is our enhancement of the classic radio button. It acts like a slider. 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 Slider 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)>;
-        on_init: PropTypes.Requireable<(...args: any[]) => any>;
-        on_change: PropTypes.Requireable<(...args: any[]) => any>;
-        on_drag_start: PropTypes.Requireable<(...args: any[]) => any>;
-        on_drag_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>;
-        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>;
-        global_status_id: PropTypes.Requireable<string>;
-        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        thump_title: PropTypes.Requireable<string>;
-        add_title: PropTypes.Requireable<string>;
-        subtract_title: PropTypes.Requireable<string>;
-        min: PropTypes.Requireable<string | number>;
-        max: PropTypes.Requireable<string | number>;
-        value: PropTypes.Requireable<string | number>;
-        step: PropTypes.Requireable<string | number>;
-        vertical: PropTypes.Requireable<string | boolean>;
-        reverse: PropTypes.Requireable<string | boolean>;
-        stretch: PropTypes.Requireable<string | boolean>;
-        number_format: PropTypes.Requireable<string | object>;
-        disabled: PropTypes.Requireable<string | boolean>;
-        hide_buttons: PropTypes.Requireable<string | boolean>;
-        use_scrollwheel: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-    };
-    static defaultProps: {
-        id: any;
-        label: any;
-        label_direction: any;
-        label_sr_only: any;
-        status: any;
-        status_state: string;
-        status_props: any;
-        status_no_animation: any;
-        global_status_id: any;
-        suffix: any;
-        thump_title: any;
-        add_title: string;
-        subtract_title: string;
-        min: number;
-        max: number;
-        value: number;
-        step: any;
-        vertical: boolean;
-        reverse: boolean;
-        stretch: boolean;
-        number_format: any;
-        disabled: boolean;
-        hide_buttons: boolean;
-        use_scrollwheel: boolean;
-        skeleton: any;
-        class: any;
-        className: any;
-        children: any;
-        on_init: any;
-        on_change: any;
-        on_drag_start: any;
-        on_drag_end: any;
-        on_state_update: any;
-    };
-    static enableWebComponent(): void;
-    static getDerivedStateFromProps(props: any, state: any): any;
-    static getValue(props: any): any;
-    constructor(props: any);
-    _id: any;
-    _trackRef: React.RefObject<any>;
-    /**
-     * From okt. 6 we use only the native slider for better screen reader / touch compatibility
-     * Therefore, we do not use they custom key handling anymore – for now.
-     */
-    onFocusHandler: () => void;
-    onBlurHandler: () => void;
-    onClickHandler: (event: any) => void;
-    onSubtractClickHandler: (event: any) => void;
-    onAddClickHandler: (event: any) => void;
-    onMouseDownHandler: (event: any) => void;
-    onTouchEndHandler: (event: any) => void;
-    onMouseUpHandler: (event: any) => void;
-    onRangeChangeHandler: (event: any) => void;
-    onTouchMoveHandler: (event: any) => void;
-    onMouseMoveHandler: (event: any) => void;
-    roundValue(value: any): string | number;
-    emitChange(event: any, rawValue: any, callback: any): void;
-    setJumpedState(): void;
-    jumpedTimeout: NodeJS.Timeout;
+export interface SliderProps extends React.HTMLProps<HTMLElement> {
+  id?: string;
+
+  /**
+   * Prepends the Form Label component. If no ID is provided, a random ID is created.
+   */
+  label?: SliderLabel;
+
+  /**
+   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
+   */
+  label_direction?: SliderLabelDirection;
+
+  /**
+   * Use `true` to make the label only readable by screen readers.
+   */
+  label_sr_only?: SliderLabelSrOnly;
+
+  /**
+   * 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?: SliderStatus;
+
+  /**
+   * 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?: SliderStatusNoAnimation;
+
+  /**
+   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   */
+  global_status_id?: string;
+
+  /**
+   * Text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.
+   */
+  suffix?: SliderSuffix;
+
+  /**
+   * Give the slider thump button a title for accessibility reasons. Defaults to `null`.
+   */
+  thump_title?: string;
+
+  /**
+   * Give the add button a title for accessibility reasons. Defaults to `+`.
+   */
+  add_title?: string;
+
+  /**
+   * Give the subtract button a title for accessibility reasons. Defaults to `−`.
+   */
+  subtract_title?: string;
+
+  /**
+   * The minimum value. Defaults to `0`.
+   */
+  min?: SliderMin;
+
+  /**
+   * The maximum value. Defaults to `100`
+   */
+  max?: SliderMax;
+
+  /**
+   * <em>(required)</em> the `value` of the slider. Also the event callback result.
+   */
+  value?: SliderValue;
+
+  /**
+   * The steps the slider takes on changing the value. Defaults to `null`
+   */
+  step?: SliderStep;
+
+  /**
+   * Show the slider vertically. Defaults to `false`.
+   */
+  vertical?: SliderVertical;
+
+  /**
+   * Show the slider reversed. Defaults to `false`.
+   */
+  reverse?: SliderReverse;
+
+  /**
+   * If set to `true`, then the slider will be 100% in `width`.
+   */
+  stretch?: SliderStretch;
+
+  /**
+   * Will extend the return object with a `number` property (from `on_change` event). You can use all the options from the <a href="/uilib/components/number-format/properties">NumberFormat</a> component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `number_format={{ currency: true, decimals: 0 }}`
+   */
+  number_format?: SliderNumberFormat;
+  disabled?: SliderDisabled;
+
+  /**
+   * Removes the helper buttons. Defaults to `false`.
+   */
+  hide_buttons?: SliderHideButtons;
+
+  /**
+   * Enable mouse scroll-wheel support. Defaults to `false`.
+   */
+  use_scrollwheel?: SliderUseScrollwheel;
+
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
+  skeleton?: SliderSkeleton;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: SliderSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: SliderTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: SliderRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: SliderBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: SliderLeft;
+  class?: string;
+  className?: string;
+  children?: SliderChildren;
+
+  /**
+   * Will be called once the component is ready to use. The callback `value` is a number `{ value }`.
+   */
+  on_init?: (...args: any[]) => any;
+
+  /**
+   * Will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `number_format` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`.
+   */
+  on_change?: (...args: any[]) => any;
+
+  /**
+   * Will be called once the user stops dragging. Returns `{ event }`.
+   */
+  on_drag_start?: (...args: any[]) => any;
+
+  /**
+   * Will be called once the user starts dragging. Returns `{ event }`.
+   */
+  on_drag_end?: (...args: any[]) => any;
+  on_state_update?: (...args: any[]) => any;
+}
+export default class Slider extends React.Component<SliderProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";