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

package/components/heading/Heading.d.ts

@@ -1,90 +1,154 @@
-export const levelResolution: {
-    1: string;
-    2: string;
-    3: string;
-    4: string;
-    5: string;
-    6: string;
-};
-declare class Heading extends React.PureComponent<any, any, any> {
-    static tagName: string;
-    static contextType: React.Context<{
-        heading: any;
-    }>;
-    static propTypes: {
-        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>;
-        group: PropTypes.Requireable<string>;
-        text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        size: PropTypes.Requireable<string>;
-        level: PropTypes.Requireable<string | number>;
-        increase: PropTypes.Requireable<string | boolean>;
-        decrease: PropTypes.Requireable<string | boolean>;
-        up: PropTypes.Requireable<string | boolean>;
-        down: PropTypes.Requireable<string | boolean>;
-        skip_correction: PropTypes.Requireable<boolean>;
-        debug: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
-        debug_counter: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
-        counter: PropTypes.Requireable<any>;
-        inherit: PropTypes.Requireable<string | boolean>;
-        reset: PropTypes.Requireable<string | number | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        element: PropTypes.Requireable<string>;
+import * as React from 'react';
+export type HeadingText = React.ReactNode | ((...args: any[]) => any);
+export type HeadingSize =
+  | 'auto'
+  | 'xx-large'
+  | 'x-large'
+  | 'large'
+  | 'medium'
+  | 'basis'
+  | 'small'
+  | 'x-small';
+export type HeadingLevel = number | string;
+export type HeadingIncrease = string | boolean;
+export type HeadingDecrease = string | boolean;
+export type HeadingUp = string | boolean;
+export type HeadingDown = string | boolean;
+export type HeadingDebug = boolean | ((...args: any[]) => any);
+export type HeadingDebugCounter = boolean | ((...args: any[]) => any);
+export type HeadingInherit = string | boolean;
+export type HeadingReset = number | string | boolean;
+export type HeadingSkeleton = string | boolean;
+export type HeadingSpace =
+  | 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;
-        group: any;
-        text: any;
-        size: string;
-        level: any;
-        increase: any;
-        decrease: any;
-        up: any;
-        down: any;
-        skip_correction: any;
-        debug: any;
-        debug_counter: any;
-        counter: any;
-        reset: any;
-        inherit: any;
-        skeleton: any;
-        element: string;
-        class: any;
-        className: any;
-        children: any;
-    };
-    static enableWebComponent(): void;
-    static getDerivedStateFromProps(props: any, state: any): any;
-    constructor(props: any, context: any);
-    _ref: React.RefObject<any>;
+export type HeadingTop = string | number | boolean;
+export type HeadingRight = string | number | boolean;
+export type HeadingBottom = string | number | boolean;
+export type HeadingLeft = string | number | boolean;
+export type HeadingChildren = 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 HeadingProps extends React.HTMLProps<HTMLElement> {
+  id?: string;
+  group?: string;
+
+  /**
+   * <em>(required)</em> a heading, can be text or React.Node.
+   */
+  text?: HeadingText;
+
+  /**
+   * Define the typography <a href="/uilib/typography/font-size">font-size</a> by a size <em>type</em>, e.g. `x-large`. Defaults to the predefined heading sizes.
+   */
+  size?: HeadingSize;
+  level?: HeadingLevel;
+
+  /**
+   * If set to true, the heading level will be incremented by 1.
+   */
+  increase?: HeadingIncrease;
+
+  /**
+   * If set to true, the heading level will be decremented by 1.
+   */
+  decrease?: HeadingDecrease;
+  up?: HeadingUp;
+  down?: HeadingDown;
+
+  /**
+   * If set to true, the heading will not be corrected and warnings will not be shown. Warnings do not show up in "production builds" else either.
+   */
+  skip_correction?: boolean;
+
+  /**
+   * If set to true, the content will have a prefix, showing the heading level.
+   */
+  debug?: HeadingDebug;
+
+  /**
+   * If set to true, the content will have both a prefix and a JSON log attached to both headings and level contexts.
+   */
+  debug_counter?: HeadingDebugCounter;
+  counter?: any;
+
+  /**
+   * If set to true, the heading last used level will be inherited. Also from inside a level context.
+   */
+  inherit?: HeadingInherit;
+
+  /**
+   * If set to true, the heading level will be reset to 2. You can give it a custom level if you need to, e.g. `reset(1)`.
+   */
+  reset?: HeadingReset;
+
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
+  skeleton?: HeadingSkeleton;
+
+  /**
+   * Define what HTML element should be used. If you use, e.g. a `span`, then `role="heading"` and `aria-level` gets set. Defaults to semantic heading element.
+   */
+  element?: string;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: HeadingSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: HeadingTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: HeadingRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: HeadingBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: HeadingLeft;
+  class?: string;
+  className?: string;
+
+  /**
+   * <em>(required)</em> a heading, can be text or React.Node.
+   */
+  children?: HeadingChildren;
 }
-declare namespace Heading {
-    export { HeadingProvider as Level };
-    export function Increase(props: any): JSX.Element;
-    export function Decrease(props: any): JSX.Element;
-    export function Up(props: any): JSX.Element;
-    export function Down(props: any): JSX.Element;
-    export function Reset(props: any): JSX.Element;
-    export { resetLevels };
-    export { setNextLevel };
+export default class Heading extends React.Component<HeadingProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-export default Heading;
-import React from "react";
-import PropTypes from "prop-types";
-import HeadingProvider from "./HeadingProvider";
-import { resetLevels } from "./HeadingHelpers";
-import { setNextLevel } from "./HeadingHelpers";
-import { resetAllLevels } from "./HeadingHelpers";
-export { resetAllLevels, resetLevels, setNextLevel };

package/components/heading/HeadingProvider.d.ts

@@ -1,37 +1,58 @@
-export default class HeadingProvider extends React.PureComponent<any, any, any> {
-    static contextType: React.Context<{
-        heading: any;
-    }>;
-    static propTypes: {
-        id: PropTypes.Requireable<string>;
-        group: PropTypes.Requireable<string>;
-        level: PropTypes.Requireable<string | number>;
-        increase: PropTypes.Requireable<string | boolean>;
-        decrease: PropTypes.Requireable<string | boolean>;
-        up: PropTypes.Requireable<string | boolean>;
-        down: PropTypes.Requireable<string | boolean>;
-        inherit: PropTypes.Requireable<string | boolean>;
-        counter: PropTypes.Requireable<any>;
-        reset: PropTypes.Requireable<string | number | boolean>;
-        text: PropTypes.Requireable<any>;
-        children: PropTypes.Requireable<any>;
-    };
-    static defaultProps: {
-        id: any;
-        group: any;
-        level: any;
-        increase: any;
-        decrease: any;
-        up: any;
-        down: any;
-        inherit: any;
-        counter: any;
-        reset: any;
-        text: any;
-        children: any;
-    };
-    static getDerivedStateFromProps(props: any, state: any): any;
-    constructor(props: any, context: any);
+import * as React from 'react';
+export type HeadingProviderLevel = number | string;
+export type HeadingProviderIncrease = string | boolean;
+export type HeadingProviderDecrease = string | boolean;
+export type HeadingProviderUp = string | boolean;
+export type HeadingProviderDown = string | boolean;
+export type HeadingProviderInherit = string | boolean;
+export type HeadingProviderReset = number | string | boolean;
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface HeadingProviderProps
+  extends React.HTMLProps<HTMLElement> {
+  id?: string;
+  group?: string;
+  level?: HeadingProviderLevel;
+
+  /**
+   * If set to true, the heading level will be incremented by 1.
+   */
+  increase?: HeadingProviderIncrease;
+
+  /**
+   * If set to true, the heading level will be decremented by 1.
+   */
+  decrease?: HeadingProviderDecrease;
+  up?: HeadingProviderUp;
+  down?: HeadingProviderDown;
+
+  /**
+   * If set to true, the heading last used level will be inherited. Also from inside a level context.
+   */
+  inherit?: HeadingProviderInherit;
+  counter?: any;
+
+  /**
+   * If set to true, the heading level will be reset to 2. You can give it a custom level if you need to, e.g. `reset(1)`.
+   */
+  reset?: HeadingProviderReset;
+
+  /**
+   * <em>(required)</em> a heading, can be text or React.Node.
+   */
+  text?: any;
+
+  /**
+   * <em>(required)</em> a heading, can be text or React.Node.
+   */
+  children?: any;
+}
+export default class HeadingProvider extends React.Component<
+  HeadingProviderProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/help-button/HelpButton.d.ts

@@ -1,34 +1,238 @@
-export default class HelpButton 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 tagName: string;
-    static propTypes: any;
-    static defaultProps: {
-        variant: string;
-        icon: any;
-        icon_position: string;
-        modal_content: any;
-        modal_props: any;
+import * as React from 'react';
+export type HelpButtonText = string | React.ReactNode;
+export type HelpButtonSize = 'default' | 'small' | 'medium' | 'large';
+export type HelpButtonIconSize = string | number;
+export type HelpButtonTooltip =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type HelpButtonStatus =
+  | string
+  | boolean
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type HelpButtonStatusNoAnimation = string | boolean;
+export type HelpButtonTo = string | Object | ((...args: any[]) => any);
+export type HelpButtonWrap = string | boolean;
+export type HelpButtonBounding = string | boolean;
+export type HelpButtonStretch = string | boolean;
+export type HelpButtonSkeleton = string | boolean;
+export type HelpButtonDisabled = string | boolean;
+export type HelpButtonChildren =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type HelpButtonElement =
+  | ((...args: any[]) => any)
+  | Object
+  | React.ReactNode;
+export type HelpButtonSpace =
+  | 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): any;
-    constructor(props: any);
-    constructor(props: any, context: any);
+export type HelpButtonTop = string | number | boolean;
+export type HelpButtonRight = string | number | boolean;
+export type HelpButtonBottom = string | number | boolean;
+export type HelpButtonLeft = string | number | boolean;
+export type HelpButtonOnClick = string | ((...args: any[]) => any);
+export type HelpButtonIcon =
+  | string
+  | React.ReactNode
+  | ((...args: any[]) => any);
+export type HelpButtonIconPosition = 'left' | 'right';
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface HelpButtonProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * The content of the button can be a string or a React Element.
+   */
+  text?: HelpButtonText;
+
+  /**
+   * `button`, `reset` or `submit` for the `type` HTML attribute (default to `button`) .
+   */
+  type?: string;
+
+  /**
+   * Title of the button. Optional, but should always be included because of accessibility.
+   */
+  title?: React.ReactNode;
+
+  /**
+   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`.
+   */
+  variant?: any;
+
+  /**
+   * The size of the button. For now there is "medium", "default" and "large".
+   */
+  size?: HelpButtonSize;
+
+  /**
+   * Define icon width and height. Defaults to 16px
+   */
+  icon_size?: HelpButtonIconSize;
+
+  /**
+   * Provide a string or a React Element to be shown as the tooltip content.
+   */
+  tooltip?: HelpButtonTooltip;
+
+  /**
+   * Set it to either `status="error"` or a 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?: HelpButtonStatus;
+
+  /**
+   * 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?: HelpButtonStatusNoAnimation;
+
+  /**
+   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   */
+  global_status_id?: string;
+  id?: string;
+
+  /**
+   * Any extra modifying class.
+   */
+  class?: string;
+
+  /**
+   * If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button.
+   */
+  href?: string;
+
+  /**
+   * Use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.
+   */
+  to?: HelpButtonTo;
+
+  /**
+   * If you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself.
+   */
+  custom_content?: React.ReactNode;
+
+  /**
+   * If set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`.
+   */
+  wrap?: HelpButtonWrap;
+
+  /**
+   * Set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case.
+   */
+  bounding?: HelpButtonBounding;
+
+  /**
+   * Set it to `true` in order to stretch the button to the available space. Defaults to false.
+   */
+  stretch?: HelpButtonStretch;
+
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
+  skeleton?: HelpButtonSkeleton;
+  disabled?: HelpButtonDisabled;
+  inner_ref?: Object;
+  className?: string;
+  innerRef?: Object;
+
+  /**
+   * The content of the button can be a string or a React Element.
+   */
+  children?: HelpButtonChildren;
+
+  /**
+   * Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.
+   */
+  element?: HelpButtonElement;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: HelpButtonSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: HelpButtonTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: HelpButtonRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: HelpButtonBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: HelpButtonLeft;
+  custom_element?: Object;
+  custom_method?: (...args: any[]) => any;
+
+  /**
+   * Will be called on a click event. Returns an object with the native event: `{ event }`.
+   */
+  on_click?: HelpButtonOnClick;
+
+  /**
+   * To be included in the button. <a href="/icons/primary">Primary Icons</a> can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements.
+   */
+  icon?: HelpButtonIcon;
+
+  /**
+   * Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.
+   */
+  icon_position?: HelpButtonIconPosition;
+
+  /**
+   * The content which will appear when triggering the modal.
+   */
+  modal_content?: React.ReactNode;
+
+  /**
+   * Accepts all <a href="/uilib/components/modal/properties">Modal properties</a> as an object, if `children` is given.
+   */
+  modal_props?: Object;
+}
+export default class HelpButton extends React.Component<
+  HelpButtonProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";