@dnb/eufemia 9.48.0-beta.1 → 10.0.0-beta.2

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

@@ -1,86 +1,44 @@
 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 FormRowWrap = string | boolean;
+import type { SectionSpacing, SectionStyleTypes } from '../Section';
+import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 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;
-    };
-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> {
+export interface FormRowProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   id?: string;
 
   /**
    * Use either the `label` property or provide a custom one.
    */
-  label?: FormRowLabel;
+  label?: FormLabelText;
 
   /**
    * Use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`.
    */
-  label_direction?: FormRowLabelDirection;
+  label_direction?: FormLabelLabelDirection;
 
   /**
    * Use `true` to make the label only readable by screen readers.
    */
-  label_sr_only?: FormRowLabelSrOnly;
+  label_sr_only?: boolean;
   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;
+  no_label?: boolean;
 
   /**
    * 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;
+  no_fieldset?: boolean;
 
   /**
    * Send along a different locale to all nested components.
@@ -90,7 +48,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   /**
    * 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;
+  wrap?: boolean;
 
   /**
    * To define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.
@@ -100,65 +58,40 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   /**
    * Will force both `direction` and `label_direction` to be "vertical" if set to `true`.
    */
-  vertical?: FormRowVertical;
+  vertical?: boolean;
 
   /**
    * Will center all children vertically as long as the screen does not hit a mobile width.
    */
-  centered?: FormRowCentered;
+  centered?: boolean;
 
   /**
-   * 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.
+   * 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;
+  section_style?: SectionStyleTypes;
 
   /**
-   * To modify the `spacing`. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to null.
+   * 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;
+  section_spacing?: SectionSpacing;
   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;
+  responsive?: boolean;
 
   /**
    * If set to `true`, every component inside will be disabled. Defaults to `false`.
    */
-  disabled?: FormRowDisabled;
+  disabled?: boolean;
 
   /**
    * If set to `true`, it enables skeleton for nested components. Defaults to `false`.
    */
-  skeleton?: FormRowSkeleton;
+  skeleton?: SkeletonShow;
   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;
 }

package/cjs/components/form-row/FormRowHelpers.d.ts

@@ -1,6 +1,6 @@
 export declare type FormRowProps = {
     label_direction?: 'vertical' | 'horizontal';
-    vertical?: string | boolean;
+    vertical?: boolean;
 };
 export declare function prepareFormRowContext<Props>(props: Props & FormRowProps): Props & FormRowProps;
 export declare const includeValidProps: (props: FormRowProps, excludeProps?: Record<string, unknown>) => FormRowProps;

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

@@ -1,60 +1,16 @@
 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 FormSetWrap = string | boolean;
+import type { SectionSpacing, SectionStyleTypes } from '../Section';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
+import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
 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;
-    };
-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> {
+export interface FormSetProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * Define what HTML element should be used. Defaults to `<form>`.
    */
@@ -63,50 +19,50 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, then a `div` HTML element will be used instead of `form`. Defaults to `false`.
    */
-  no_form?: FormSetNoForm;
+  no_form?: boolean;
 
   /**
    * If set to `true`, every component inside will be disabled. Defaults to `false`.
    */
-  disabled?: FormSetDisabled;
+  disabled?: boolean;
 
   /**
    * If set to `true`, it enables skeleton for nested components. Defaults to `false`.
    */
-  skeleton?: FormSetSkeleton;
+  skeleton?: SkeletonShow;
 
   /**
    * 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;
+  prevent_submit?: boolean;
   id?: string;
 
   /**
    * Use either the `label` property or provide a custom one.
    */
-  label?: FormSetLabel;
+  label?: FormLabelText;
 
   /**
    * Use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`.
    */
-  label_direction?: FormSetLabelDirection;
+  label_direction?: FormLabelLabelDirection;
 
   /**
    * Use `true` to make the label only readable by screen readers.
    */
-  label_sr_only?: FormSetLabelSrOnly;
+  label_sr_only?: boolean;
   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;
+  no_label?: boolean;
 
   /**
    * 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;
+  no_fieldset?: boolean;
 
   /**
    * Send along a different locale to all nested components.
@@ -116,7 +72,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   /**
    * 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;
+  wrap?: boolean;
 
   /**
    * To define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.
@@ -126,55 +82,30 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   /**
    * Will force both `direction` and `label_direction` to be "vertical" if set to `true`.
    */
-  vertical?: FormSetVertical;
+  vertical?: boolean;
 
   /**
    * Will center all children vertically as long as the screen does not hit a mobile width.
    */
-  centered?: FormSetCentered;
+  centered?: boolean;
 
   /**
-   * 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.
+   * 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;
+  section_style?: SectionStyleTypes;
 
   /**
-   * To modify the `spacing`. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to null.
+   * 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;
+  section_spacing?: SectionSpacing;
   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;
+  responsive?: boolean;
   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;
 

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

@@ -1,14 +1,12 @@
 import * as React from 'react';
-export type FormStatusShow = string | boolean;
+import type { IconIcon, IconSize } from '../Icon';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type FormStatusText =
   | string
   | boolean
   | ((...args: any[]) => any)
   | React.ReactNode;
-export type FormStatusIcon =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
 export type FormStatusState =
   | boolean
   | string
@@ -19,47 +17,13 @@ export type FormStatusState =
 export type FormStatusVariant = 'flat' | 'outlined';
 export type FormStatusSize = 'default' | 'large';
 export type FormStatusAttributes = string | Record<string, unknown>;
-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;
-    };
-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> {
+export interface FormStatusProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   id?: string;
 
   /**
@@ -70,7 +34,7 @@ export interface FormStatusProps extends React.HTMLProps<HTMLElement> {
   /**
    * Provide `false` if you want to animate the visibility. Defaults to `true`.
    */
-  show?: FormStatusShow;
+  show?: boolean;
 
   /**
    * The `text` appears as the status message. Beside plain text, You can send in a React component as well.
@@ -81,12 +45,12 @@ export interface FormStatusProps extends React.HTMLProps<HTMLElement> {
   /**
    * The `icon` show before the status text. Defaults to `exclamation`.
    */
-  icon?: FormStatusIcon;
+  icon?: IconIcon;
 
   /**
    * The icon size of the icon shows. Defaults to `medium`.
    */
-  icon_size?: string;
+  icon_size?: IconSize;
 
   /**
    * Defines the visual appearance of the status. These are the statuses `error`, `warn`, `info` and `marketing`. The default status is `error`.
@@ -116,47 +80,22 @@ export interface FormStatusProps extends React.HTMLProps<HTMLElement> {
   /**
    * NB: Animation is disabled as of now. <del>use `true` to omit the animation on content visibility. Defaults to `false`.</del>
    */
-  no_animation?: FormStatusNoAnimation;
+  no_animation?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: FormStatusSkeleton;
+  skeleton?: SkeletonShow;
 
   /**
    * If set to `true`, then the FormStatus will be 100% in available `width`. "NB:" Only use this on independent status messages.
    */
-  stretch?: FormStatusStretch;
+  stretch?: boolean;
 
   /**
    * 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;
 
   /**
@@ -171,10 +110,6 @@ export default class FormStatus extends React.Component<
   static defaultProps: object;
   render(): JSX.Element;
 }
-/**
- * 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.
@@ -182,10 +117,6 @@ export interface ErrorIconProps {
   title?: string;
 }
 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.
@@ -193,10 +124,6 @@ export interface WarnIconProps {
   title?: string;
 }
 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.
@@ -204,10 +131,6 @@ export interface InfoIconProps {
   title?: string;
 }
 export const InfoIcon: React.FC<InfoIconProps>;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface MarketingIconProps {
   /**
    * The `title` attribute in the status.

package/cjs/components/global-error/GlobalError.d.ts

@@ -1,31 +1,16 @@
 import * as React from 'react';
+import type { SpacingProps } from '../space/types';
 export type GlobalErrorStatusContent = string | Record<string, unknown>;
 export type GlobalErrorTitle = string | React.ReactNode;
 export type GlobalErrorText = string | React.ReactNode;
 export type GlobalErrorBack = string | React.ReactNode;
-export type GlobalErrorSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type GlobalErrorTop = string | number | boolean;
-export type GlobalErrorRight = string | number | boolean;
-export type GlobalErrorBottom = string | number | boolean;
-export type GlobalErrorLeft = string | number | boolean;
 export type GlobalErrorChildren =
   | 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 GlobalErrorProps extends React.HTMLProps<HTMLElement> {
+export interface GlobalErrorProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * Status code defines the view showing up.
    */
@@ -60,11 +45,6 @@ export interface GlobalErrorProps extends React.HTMLProps<HTMLElement> {
    * Defining a `alt` text for the SVG graphic will overwrite the default provided by `status_content`.
    */
   alt?: string;
-  space?: GlobalErrorSpace;
-  top?: GlobalErrorTop;
-  right?: GlobalErrorRight;
-  bottom?: GlobalErrorBottom;
-  left?: GlobalErrorLeft;
   className?: string;
 
   /**