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

package/components/form-label/FormLabel.d.ts

@@ -1,67 +1,117 @@
-export default class FormLabel 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>;
-        for_id: PropTypes.Requireable<string>;
-        element: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        id: PropTypes.Requireable<string>;
-        class: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        label_direction: PropTypes.Requireable<string>;
-        vertical: PropTypes.Requireable<string | boolean>;
-        sr_only: PropTypes.Requireable<string | boolean>;
+import * as React from 'react';
+export type FormLabelText =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type FormLabelDisabled = string | boolean;
+export type FormLabelSkeleton = string | boolean;
+export type FormLabelLabelDirection = 'vertical' | 'horizontal';
+export type FormLabelVertical = string | boolean;
+export type FormLabelSrOnly = string | boolean;
+export type FormLabelSpace =
+  | 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: {
-        for_id: any;
-        element: string;
-        title: any;
-        text: any;
-        id: any;
-        class: any;
-        disabled: any;
-        skeleton: any;
-        label_direction: any;
-        vertical: any;
-        sr_only: any;
-        className: any;
-        children: any;
-    };
-    static enableWebComponent(): void;
-    static getContent(props: any): any;
-    constructor(props: any);
-    constructor(props: any, context: any);
+export type FormLabelTop = string | number | boolean;
+export type FormLabelRight = string | number | boolean;
+export type FormLabelBottom = string | number | boolean;
+export type FormLabelLeft = string | number | boolean;
+export type FormLabelChildren =
+  | 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 FormLabelProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * <em>(required)</em> the `id` of the input.
+   */
+  for_id?: string;
+
+  /**
+   * Defines the HTML element used. Defaults to `label`.
+   */
+  element?: string;
+
+  /**
+   * The `title` attribute of the label.
+   */
+  title?: string;
+
+  /**
+   * The `text` of the label.
+   */
+  text?: FormLabelText;
+  id?: string;
+  class?: string;
+  disabled?: FormLabelDisabled;
+
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
+  skeleton?: FormLabelSkeleton;
+  label_direction?: FormLabelLabelDirection;
+
+  /**
+   * Will force both `direction` and `label_direction` to be "vertical" if set to `true`.
+   */
+  vertical?: FormLabelVertical;
+  sr_only?: FormLabelSrOnly;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: FormLabelSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: FormLabelTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: FormLabelRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: FormLabelBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: FormLabelLeft;
+  className?: string;
+  children?: FormLabelChildren;
+}
+export default class FormLabel extends React.Component<
+  FormLabelProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/form-row/FormRow.d.ts

@@ -1,169 +1,181 @@
-export const formRowPropTypes: {
-    className: PropTypes.Requireable<string>;
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    custom_element: PropTypes.Requireable<object>;
-    custom_method: 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>;
-    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>;
-};
-export namespace formRowDefaultProps {
-    export const id: any;
-    export const label: any;
-    export const label_direction: any;
-    export const label_sr_only: any;
-    export const label_id: any;
-    export const label_class: any;
-    export const no_label: boolean;
-    export const no_fieldset: any;
-    export const locale: any;
-    export const indent: any;
-    export const wrap: any;
-    export const direction: any;
-    export const vertical: any;
-    export const centered: any;
-    export const indent_offset: any;
-    export const section_style: any;
-    export const section_spacing: any;
-    export const global_status_id: any;
-    export const responsive: any;
-    export const disabled: any;
-    export const skeleton: any;
-    const _class: any;
-    export { _class as class };
-    export const skipContentWrapperIfNested: boolean;
-    export const className: any;
-    export const children: any;
-    export const custom_element: any;
-    export const custom_method: any;
-}
-export default class FormRow 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>;
-        custom_element: PropTypes.Requireable<object>;
-        custom_method: 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>;
-        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>;
-    };
-    static defaultProps: {
-        id: any;
-        label: any;
-        label_direction: any;
-        label_sr_only: any;
-        label_id: any;
-        label_class: any;
-        no_label: boolean;
-        no_fieldset: any;
-        locale: any;
-        indent: any;
-        wrap: any;
-        direction: any;
-        vertical: any;
-        centered: any;
-        indent_offset: any;
-        section_style: any;
-        section_spacing: any;
-        global_status_id: any;
-        responsive: any;
-        disabled: any;
-        skeleton: any;
-        class: any;
-        skipContentWrapperIfNested: boolean;
-        className: any;
-        children: any;
-        custom_element: any;
-        custom_method: any;
+import * as React from 'react';
+export type FormRowLabel =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type FormRowLabelDirection = 'vertical' | 'horizontal';
+export type FormRowLabelSrOnly = string | boolean;
+export type FormRowNoLabel = string | boolean;
+export type FormRowNoFieldset = string | boolean;
+export type FormRowIndent = string | boolean;
+export type FormRowWrap = string | boolean;
+export type FormRowDirection = 'vertical' | 'horizontal';
+export type FormRowVertical = string | boolean;
+export type FormRowCentered = string | boolean;
+export type FormRowSectionSpacing = string | boolean;
+export type FormRowResponsive = string | boolean;
+export type FormRowDisabled = string | boolean;
+export type FormRowSkeleton = string | boolean;
+export type FormRowSpace =
+  | 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 enableWebComponent(): void;
-    static getContent(props: any): {
-        label: any;
-        children: any;
-    };
-    constructor(props: any);
-    _id: any;
-    isIsUsed: boolean;
+export type FormRowTop = string | number | boolean;
+export type FormRowRight = string | number | boolean;
+export type FormRowBottom = string | number | boolean;
+export type FormRowLeft = string | number | boolean;
+export type FormRowChildren =
+  | 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 FormRowProps extends React.HTMLProps<HTMLElement> {
+  id?: string;
+
+  /**
+   * Use either the `label` property or provide a custom one.
+   */
+  label?: FormRowLabel;
+
+  /**
+   * Use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`.
+   */
+  label_direction?: FormRowLabelDirection;
+
+  /**
+   * Use `true` to make the label only readable by screen readers.
+   */
+  label_sr_only?: FormRowLabelSrOnly;
+  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?: FormRowNoLabel;
+
+  /**
+   * 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?: FormRowNoFieldset;
+
+  /**
+   * 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?: FormRowIndent;
+
+  /**
+   * 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?: FormRowWrap;
+
+  /**
+   * To define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.
+   */
+  direction?: FormRowDirection;
+
+  /**
+   * Will force both `direction` and `label_direction` to be "vertical" if set to `true`.
+   */
+  vertical?: FormRowVertical;
+
+  /**
+   * Will center all children vertically as long as the screen does not hit a mobile width.
+   */
+  centered?: FormRowCentered;
+
+  /**
+   * 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?: FormRowSectionSpacing;
+  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?: FormRowResponsive;
+
+  /**
+   * If set to `true`, every component inside will be disabled. Defaults to `false`.
+   */
+  disabled?: FormRowDisabled;
+
+  /**
+   * If set to `true`, it enables skeleton for nested components. Defaults to `false`.
+   */
+  skeleton?: FormRowSkeleton;
+  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?: FormRowSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: FormRowTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: FormRowRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: FormRowBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: FormRowLeft;
+  className?: string;
+  children?: FormRowChildren;
+  custom_element?: Object;
+  custom_method?: (...args: any[]) => any;
+}
+export default class FormRow extends React.Component<FormRowProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-export function prepareFormRowContext(props: any): any;
-import PropTypes from "prop-types";
-import React from "react";