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

package/components/space/Space.d.ts

@@ -1,66 +1,82 @@
-export { spacingPropTypes };
-export default class Space 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: {
-        stretch: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        class: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        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>;
-        element: PropTypes.Requireable<string>;
-        inline: PropTypes.Requireable<string | boolean>;
-        no_collapse: PropTypes.Requireable<string | boolean>;
+import * as React from 'react';
+export type SpaceInline = string | boolean;
+export type SpaceNoCollapse = string | boolean;
+export type SpaceSpace =
+  | 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: {
-        stretch: any;
-        skeleton: any;
-        class: any;
-        className: any;
-        children: any;
-        space: any;
-        top: any;
-        right: any;
-        bottom: any;
-        left: any;
-        id: any;
-        element: string;
-        inline: any;
-        no_collapse: any;
-    };
-    static enableWebComponent(): void;
-    static getContent(props: any): any;
-    constructor(props: any);
-    constructor(props: any, context: any);
+export type SpaceTop = string | number | boolean;
+export type SpaceRight = string | number | boolean;
+export type SpaceBottom = string | number | boolean;
+export type SpaceLeft = string | number | boolean;
+export type SpaceStretch = string | boolean;
+export type SpaceSkeleton = string | boolean;
+export type SpaceChildren =
+  | 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 SpaceProps extends React.HTMLProps<HTMLElement> {
+  id?: string;
+  element?: string;
+  inline?: SpaceInline;
+  no_collapse?: SpaceNoCollapse;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: SpaceSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: SpaceTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: SpaceRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: SpaceBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: SpaceLeft;
+  stretch?: SpaceStretch;
+  skeleton?: SpaceSkeleton;
+  class?: string;
+  className?: string;
+  children?: SpaceChildren;
+}
+export default class Space extends React.Component<SpaceProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import { spacingPropTypes } from "./SpacingHelper";
-import React from "react";
-import PropTypes from "prop-types";

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

@@ -1,75 +1,170 @@
-export default class StepIndicator extends React.PureComponent<any, any, any> {
-    static tagName: string;
-    static Sidebar: typeof StepIndicatorSidebar;
-    static propTypes: {
-        class: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        on_change: PropTypes.Requireable<(...args: any[]) => any>;
-        on_click: 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>;
-        mode: PropTypes.Requireable<string>;
-        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>;
-        }>[]>;
-        overview_title: PropTypes.Requireable<string>;
-        step_title_extended: PropTypes.Requireable<string>;
-        step_title: PropTypes.Requireable<string>;
-        current_step: PropTypes.Requireable<string | number>;
-        active_item: PropTypes.Requireable<string | number>;
-        active_url: PropTypes.Requireable<string>;
-        hide_numbers: PropTypes.Requireable<string | boolean>;
-        use_navigation: PropTypes.Requireable<string | boolean>;
-        on_item_render: PropTypes.Requireable<(...args: any[]) => any>;
-        no_animation: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        sidebar_id: PropTypes.Requireable<string>;
+import * as React from 'react';
+import StepIndicatorSidebar from './StepIndicatorSidebar';
+export type StepIndicatorMode = 'static' | 'strict' | 'loose';
+export type StepIndicatorData =
+  | 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;
+    }[];
+export type StepIndicatorTitle = string | React.ReactNode;
+export type StepIndicatorStatus = string | React.ReactNode;
+export type StepIndicatorStatusState = 'warn' | 'info' | 'error';
+export type StepIndicatorIsActive = string | boolean;
+export type StepIndicatorCurrentStep = string | number;
+export type StepIndicatorActiveItem = string | number;
+export type StepIndicatorHideNumbers = string | boolean;
+export type StepIndicatorUseNavigation = string | boolean;
+export type StepIndicatorNoAnimation = string | boolean;
+export type StepIndicatorSkeleton = string | boolean;
+export type StepIndicatorSpace =
+  | 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: {
-        mode: any;
-        data: any[];
-        overview_title: any;
-        step_title_extended: any;
-        step_title: any;
-        current_step: any;
-        active_item: any;
-        active_url: any;
-        hide_numbers: boolean;
-        use_navigation: any;
-        on_item_render: any;
-        no_animation: any;
-        skeleton: boolean;
-        class: any;
-        className: any;
-        children: any;
-        on_change: any;
-        on_click: any;
-        sidebar_id: any;
-    };
-    static enableWebComponent(): void;
-    constructor(props: any);
-    canWarn: () => boolean;
+export type StepIndicatorTop = string | number | boolean;
+export type StepIndicatorRight = string | number | boolean;
+export type StepIndicatorBottom = string | number | boolean;
+export type StepIndicatorLeft = string | number | boolean;
+export type StepIndicatorChildren =
+  | 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 StepIndicatorProps 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?: StepIndicatorMode;
+
+  /**
+   * <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?: StepIndicatorData;
+  title: StepIndicatorTitle;
+  is_current?: boolean;
+  inactive?: boolean;
+  disabled?: boolean;
+  status?: StepIndicatorStatus;
+  status_state?: StepIndicatorStatusState;
+
+  /**
+   * 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?: StepIndicatorIsActive;
+  url_future?: string;
+  url_passed?: string;
+  overview_title?: string;
+  step_title_extended?: string;
+  step_title?: string;
+
+  /**
+   * Defines the active number marked step starting by 0. Defaults to `0`.
+   */
+  current_step?: StepIndicatorCurrentStep;
+  active_item?: StepIndicatorActiveItem;
+  active_url?: string;
+
+  /**
+   * Define whether to show automatically counted numbers or not. Defaults to `false`.
+   */
+  hide_numbers?: StepIndicatorHideNumbers;
+  use_navigation?: StepIndicatorUseNavigation;
+
+  /**
+   * 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;
+
+  /**
+   * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to false.
+   */
+  no_animation?: StepIndicatorNoAnimation;
+  skeleton?: StepIndicatorSkeleton;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: StepIndicatorSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: StepIndicatorTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: StepIndicatorRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: StepIndicatorBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: StepIndicatorLeft;
+  class?: string;
+  className?: string;
+  children?: StepIndicatorChildren;
+
+  /**
+   * 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;
+}
+export default class StepIndicator extends React.Component<
+  StepIndicatorProps,
+  any
+> {
+  static defaultProps: object;
+  static Sidebar = StepIndicatorSidebar;
+  render(): JSX.Element;
 }
-import React from "react";
-import StepIndicatorSidebar from "./StepIndicatorSidebar";
-import PropTypes from "prop-types";

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

@@ -1,57 +1,19 @@
-export default StepIndicatorContext;
-export class StepIndicatorProvider 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>;
-        children: PropTypes.Validator<PropTypes.ReactNodeLike>;
-        isSidebar: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        isSidebar: boolean;
-    };
-    static getData(props: any): any;
-    static getDerivedStateFromProps(props: any, state: any): any;
-    constructor(props: any);
-    _isMounted: boolean;
-    _mediaQueryListener: () => any;
-    setActiveStep: (activeStep: any) => void;
-    onChangeState: () => void;
-    openHandler: () => void;
-    closeHandler: () => void;
-    getGlobalContext(context?: any): any;
-    makeContextValue({ state, props, context, }?: {
-        state?: {
-            hasSidebar: boolean;
-            hideSidebar: boolean;
-            activeStep: any;
-            setActiveStep: (activeStep: any) => void;
-            onChangeState: () => void;
-            openHandler: () => void;
-            closeHandler: () => void;
-        };
-        props?: Readonly<any> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        context?: 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 StepIndicatorProviderProps {
+  /**
+   * <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;
+  children: React.ReactNode;
+  isSidebar?: boolean;
+}
+export class StepIndicatorProvider extends React.Component<
+  StepIndicatorProviderProps,
+  any
+> {
+  render(): JSX.Element;
 }
-declare const StepIndicatorContext: React.Context<any>;
-import React from "react";
-import PropTypes from "prop-types";