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

package/components/form-set/FormSet.d.ts

@@ -1,81 +1,202 @@
-export default class FormSet 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: {
-        on_submit: PropTypes.Requireable<(...args: any[]) => any>;
-        custom_element: PropTypes.Requireable<object>;
-        custom_method: PropTypes.Requireable<(...args: any[]) => any>;
-        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>;
-        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        label_direction: PropTypes.Requireable<string>;
-        label_sr_only: PropTypes.Requireable<string | boolean>;
-        label_id: PropTypes.Requireable<string>;
-        label_class: PropTypes.Requireable<string>;
-        no_label: PropTypes.Requireable<string | boolean>;
-        no_fieldset: PropTypes.Requireable<string | boolean>;
-        locale: PropTypes.Requireable<string>;
-        indent: PropTypes.Requireable<string | boolean>;
-        wrap: PropTypes.Requireable<string | boolean>;
-        direction: PropTypes.Requireable<string>;
-        vertical: PropTypes.Requireable<string | boolean>;
-        centered: PropTypes.Requireable<string | boolean>;
-        indent_offset: PropTypes.Requireable<string>;
-        section_style: PropTypes.Requireable<string>;
-        section_spacing: PropTypes.Requireable<string | boolean>;
-        global_status_id: PropTypes.Requireable<string>;
-        responsive: PropTypes.Requireable<string | boolean>;
-        disabled: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        class: PropTypes.Requireable<string>;
-        skipContentWrapperIfNested: PropTypes.Requireable<boolean>;
-        element: PropTypes.Requireable<string>;
-        no_form: PropTypes.Requireable<string | boolean>;
-        prevent_submit: PropTypes.Requireable<string | boolean>;
+import * as React from 'react';
+export type FormSetNoForm = string | boolean;
+export type FormSetDisabled = string | boolean;
+export type FormSetSkeleton = string | boolean;
+export type FormSetPreventSubmit = string | boolean;
+export type FormSetLabel =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type FormSetLabelDirection = 'vertical' | 'horizontal';
+export type FormSetLabelSrOnly = string | boolean;
+export type FormSetNoLabel = string | boolean;
+export type FormSetNoFieldset = string | boolean;
+export type FormSetIndent = string | boolean;
+export type FormSetWrap = string | boolean;
+export type FormSetDirection = 'vertical' | 'horizontal';
+export type FormSetVertical = string | boolean;
+export type FormSetCentered = string | boolean;
+export type FormSetSectionSpacing = string | boolean;
+export type FormSetResponsive = string | boolean;
+export type FormSetSpace =
+  | 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: {
-        element: string;
-        no_form: boolean;
-        disabled: any;
-        skeleton: any;
-        prevent_submit: boolean;
-        on_submit: any;
-        custom_element: any;
-        custom_method: any;
-    };
-    static enableWebComponent(): void;
-    static getContent(props: any): any;
-    constructor(props: any);
-    _id: any;
-    onSubmitHandler: (event: any) => void;
+export type FormSetTop = string | number | boolean;
+export type FormSetRight = string | number | boolean;
+export type FormSetBottom = string | number | boolean;
+export type FormSetLeft = string | number | boolean;
+export type FormSetChildren =
+  | 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 FormSetProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * Define what HTML element should be used. Defaults to `<form>`.
+   */
+  element?: string;
+
+  /**
+   * If set to `true`, then a `div` HTML element will be used instead of `form`. Defaults to `false`.
+   */
+  no_form?: FormSetNoForm;
+
+  /**
+   * If set to `true`, every component inside will be disabled. Defaults to `false`.
+   */
+  disabled?: FormSetDisabled;
+
+  /**
+   * If set to `true`, it enables skeleton for nested components. Defaults to `false`.
+   */
+  skeleton?: FormSetSkeleton;
+
+  /**
+   * If set to `true`, components inside can&#39;t cause a page refresh. The event `on_submit` will still be triggered. Defaults to `false`.
+   */
+  prevent_submit?: FormSetPreventSubmit;
+  id?: string;
+
+  /**
+   * Use either the `label` property or provide a custom one.
+   */
+  label?: FormSetLabel;
+
+  /**
+   * Use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`.
+   */
+  label_direction?: FormSetLabelDirection;
+
+  /**
+   * Use `true` to make the label only readable by screen readers.
+   */
+  label_sr_only?: FormSetLabelSrOnly;
+  label_id?: string;
+
+  /**
+   * If you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
+   */
+  label_class?: string;
+  no_label?: FormSetNoLabel;
+
+  /**
+   * If set to `true`, then the internal `legend` element will be a `label` instead, and no `<fieldset>` is used. Keep in mind, that `<legend>` and `<fieldset>` <strong>is only used if a `label` is provided</strong>. Defaults to `false`.
+   */
+  no_fieldset?: FormSetNoFieldset;
+
+  /**
+   * Send along a different locale to all nested components.
+   */
+  locale?: string;
+
+  /**
+   * Indents the FormRow legend if the `direction` is `horizontal`. <del>Use `small`, `medium` and `large`</del>. Defaults to `false`. If set to `true`, then `medium` is used.
+   */
+  indent?: FormSetIndent;
+
+  /**
+   * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
+   */
+  wrap?: FormSetWrap;
+
+  /**
+   * To define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.
+   */
+  direction?: FormSetDirection;
+
+  /**
+   * Will force both `direction` and `label_direction` to be "vertical" if set to `true`.
+   */
+  vertical?: FormSetVertical;
+
+  /**
+   * Will center all children vertically as long as the screen does not hit a mobile width.
+   */
+  centered?: FormSetCentered;
+
+  /**
+   * In case the `direction` is `horizontal` and there is a label/legend, the content of the FormRow has to be moved up to be at the label/legend position. Depending on the components used inside, it has to be moved up based on the height. Sizes available: `xsmall`, `small`, `medium`, `m-large` (2.5rem), `x-large` and `xx-large` . Defaults to `medium`.
+   */
+  indent_offset?: string;
+
+  /**
+   * To enable the visual helper `.dnb-section` class. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to null.
+   */
+  section_style?: string;
+
+  /**
+   * To modify the `spacing`. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to null.
+   */
+  section_spacing?: FormSetSectionSpacing;
+  global_status_id?: string;
+
+  /**
+   * To force responsiveness on form components (like <a href="/uilib/components/input">Input</a> and their labels (<a href="/uilib/components/form-label">FormLabel</a>), set the prop to `true`. Defaults to `false`.
+   */
+  responsive?: FormSetResponsive;
+  class?: string;
+  skipContentWrapperIfNested?: boolean;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: FormSetSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: FormSetTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: FormSetRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: FormSetBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: FormSetLeft;
+  className?: string;
+  children?: FormSetChildren;
+
+  /**
+   * Will be called on submit. Returns an object with a native event: `{ event }`
+   */
+  on_submit?: (...args: any[]) => any;
+  custom_element?: Object;
+  custom_method?: (...args: any[]) => any;
+}
+export default class FormSet extends React.Component<FormSetProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/form-status/FormStatus.d.ts

@@ -1,147 +1,207 @@
-export function setMaxWidthToElement({ element, id, widthElement, widthSelector, }: {
-    element: any;
-    id?: any;
-    widthElement?: any;
-    widthSelector?: any;
-}): void;
-export default class FormStatus 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>;
-        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>;
-        title: PropTypes.Requireable<string>;
-        show: PropTypes.Requireable<string | boolean>;
-        text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        icon_size: PropTypes.Requireable<string>;
-        state: PropTypes.Requireable<string | boolean>;
-        variant: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        status: PropTypes.Requireable<string | boolean>;
-        global_status_id: PropTypes.Requireable<string>;
-        attributes: PropTypes.Requireable<string | object>;
-        text_id: PropTypes.Requireable<string>;
-        width_selector: PropTypes.Requireable<string>;
-        width_element: PropTypes.Requireable<object>;
-        class: PropTypes.Requireable<string>;
-        no_animation: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        stretch: PropTypes.Requireable<string | boolean>;
-        role: PropTypes.Requireable<string>;
+import * as React from 'react';
+export type FormStatusShow = string | boolean;
+export type FormStatusText =
+  | string
+  | boolean
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type FormStatusIcon =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type FormStatusState = boolean | string | 'error' | 'warn' | 'info';
+export type FormStatusVariant = 'flat' | 'outlined';
+export type FormStatusSize = 'default' | 'large';
+export type FormStatusStatus =
+  | boolean
+  | string
+  | 'error'
+  | 'warn'
+  | 'info';
+export type FormStatusAttributes = string | Object;
+export type FormStatusNoAnimation = string | boolean;
+export type FormStatusSkeleton = string | boolean;
+export type FormStatusStretch = string | boolean;
+export type FormStatusSpace =
+  | 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: {
-        id: any;
-        title: any;
-        show: boolean;
-        text: any;
-        label: any;
-        icon: string;
-        icon_size: string;
-        size: string;
-        variant: any;
-        state: string;
-        status: any;
-        global_status_id: any;
-        attributes: any;
-        text_id: any;
-        width_selector: any;
-        width_element: any;
-        class: any;
-        no_animation: any;
-        skeleton: any;
-        stretch: any;
-        role: any;
-        className: any;
-        children: any;
-    };
-    static enableWebComponent(): void;
-    static getContent(props: any): any;
-    static correctStatus(state: any): any;
-    static getIcon({ state, icon, icon_size }: {
-        state: any;
-        icon: any;
-        icon_size: any;
-    }): any;
-    static getDerivedStateFromProps(props: any, state: any): any;
-    constructor(props: any, context: any);
-    _globalStatus: any;
-    _ref: React.RefObject<any>;
-    _heightAnim: AnimateHeight;
-    init: () => void;
-    _isMounted: boolean;
-    getStatusId(): string;
-    updateWidth(): void;
-    isReadyToGetVisible(props?: Readonly<any> & Readonly<{
-        children?: React.ReactNode;
-    }>): boolean;
-    _cachedContent: any;
+export type FormStatusTop = string | number | boolean;
+export type FormStatusRight = string | number | boolean;
+export type FormStatusBottom = string | number | boolean;
+export type FormStatusLeft = string | number | boolean;
+export type FormStatusChildren =
+  | 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 FormStatusProps extends React.HTMLProps<HTMLElement> {
+  id?: string;
+
+  /**
+   * The `title` attribute in the status.
+   */
+  title?: string;
+
+  /**
+   * Provide `false` if you want to animate the visibility. Defaults to `true`.
+   */
+  show?: FormStatusShow;
+
+  /**
+   * The `text` appears as the status message. Beside plain text, You can send in a React component as well.
+   */
+  text?: FormStatusText;
+  label?: React.ReactNode;
+
+  /**
+   * The `icon` show before the status text. Defaults to `exclamation`.
+   */
+  icon?: FormStatusIcon;
+
+  /**
+   * The icon size of the icon shows. Defaults to `medium`.
+   */
+  icon_size?: string;
+
+  /**
+   * Defines the visual appearance of the status. These are the statuses `error`, `warn` and `info`. The default status is `error`.
+   */
+  state?: FormStatusState;
+
+  /**
+   * As of now, there is the `flat` and the `outlined` variant. Defaults to `flat`.
+   */
+  variant?: FormStatusVariant;
+
+  /**
+   * Defines the appearance size. There are these sizes `default`, `large`. The default status is `default`.
+   */
+  size?: FormStatusSize;
+  status?: FormStatusStatus;
+
+  /**
+   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   */
+  global_status_id?: string;
+  attributes?: FormStatusAttributes;
+  text_id?: string;
+  width_selector?: string;
+  width_element?: Object;
+  class?: string;
+
+  /**
+   * NB: Animation is disabled as of now. <del>use `true` to omit the animation on content visibility. Defaults to `false`.</del>
+   */
+  no_animation?: FormStatusNoAnimation;
+
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
+  skeleton?: FormStatusSkeleton;
+
+  /**
+   * If set to `true`, then the FormStatus will be 100% in available `width`. "NB:" Only use this on independent status messages.
+   */
+  stretch?: FormStatusStretch;
+
+  /**
+   * The `role` attribute for accessibility, defaults to `alert`
+   */
+  role?: string;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: FormStatusSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: FormStatusTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: FormStatusRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: FormStatusBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: FormStatusLeft;
+  className?: string;
+
+  /**
+   * The `text` appears as the status message. Beside plain text, You can send in a React component as well.
+   */
+  children?: FormStatusChildren;
+}
+export default class FormStatus extends React.Component<
+  FormStatusProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-export function ErrorIcon(props: any): JSX.Element;
-export namespace ErrorIcon {
-    namespace propTypes {
-        const title: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        const title_1: string;
-        export { title_1 as title };
-    }
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface ErrorIconProps {
+  /**
+   * The `title` attribute in the status.
+   */
+  title?: string;
 }
-export function WarnIcon(props: any): JSX.Element;
-export namespace WarnIcon {
-    export namespace propTypes_1 {
-        const title_2: PropTypes.Requireable<string>;
-        export { title_2 as title };
-    }
-    export { propTypes_1 as propTypes };
-    export namespace defaultProps_1 {
-        const title_3: string;
-        export { title_3 as title };
-    }
-    export { defaultProps_1 as defaultProps };
+export const ErrorIcon: React.FC<ErrorIconProps>;
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface WarnIconProps {
+  /**
+   * The `title` attribute in the status.
+   */
+  title?: string;
 }
-export function InfoIcon(props: any): JSX.Element;
-export namespace InfoIcon {
-    export namespace propTypes_2 {
-        const title_4: PropTypes.Requireable<string>;
-        export { title_4 as title };
-    }
-    export { propTypes_2 as propTypes };
-    export namespace defaultProps_2 {
-        const title_5: string;
-        export { title_5 as title };
-    }
-    export { defaultProps_2 as defaultProps };
+export const WarnIcon: React.FC<WarnIconProps>;
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface InfoIconProps {
+  /**
+   * The `title` attribute in the status.
+   */
+  title?: string;
 }
-import React from "react";
-import AnimateHeight from "../../shared/AnimateHeight";
-import PropTypes from "prop-types";
+export const InfoIcon: React.FC<InfoIconProps>;