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

package/components/toggle-button/ToggleButtonGroup.d.ts

@@ -1,107 +1,171 @@
-export default class ToggleButtonGroup 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: {
-        class: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        custom_element: PropTypes.Requireable<object>;
-        custom_method: PropTypes.Requireable<(...args: any[]) => any>;
-        on_change: 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>;
-        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        label_direction: PropTypes.Requireable<string>;
-        label_sr_only: PropTypes.Requireable<string | boolean>;
-        title: PropTypes.Requireable<string>;
-        multiselect: PropTypes.Requireable<string | boolean>;
-        variant: PropTypes.Requireable<string>;
-        left_component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        no_fieldset: PropTypes.Requireable<string | boolean>;
-        disabled: PropTypes.Requireable<string | boolean>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        id: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-        status: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        status_state: PropTypes.Requireable<string>;
-        status_props: PropTypes.Requireable<object>;
-        status_no_animation: PropTypes.Requireable<string | boolean>;
-        global_status_id: PropTypes.Requireable<string>;
-        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        vertical: PropTypes.Requireable<string | boolean>;
-        layout_direction: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string | number | object>;
-        values: PropTypes.Requireable<string | any[]>;
-        attributes: PropTypes.Requireable<string | object>;
+import * as React from 'react';
+export type ToggleButtonGroupLabel =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type ToggleButtonGroupLabelDirection = 'horizontal' | 'vertical';
+export type ToggleButtonGroupLabelSrOnly = string | boolean;
+export type ToggleButtonGroupMultiselect = string | boolean;
+export type ToggleButtonGroupVariant = 'default' | 'checkbox' | 'radio';
+export type ToggleButtonGroupNoFieldset = string | boolean;
+export type ToggleButtonGroupDisabled = string | boolean;
+export type ToggleButtonGroupSkeleton = string | boolean;
+export type ToggleButtonGroupStatus =
+  | string
+  | boolean
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type ToggleButtonGroupStatusNoAnimation = string | boolean;
+export type ToggleButtonGroupSuffix =
+  | string
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type ToggleButtonGroupVertical = string | boolean;
+export type ToggleButtonGroupLayoutDirection = 'column' | 'row';
+export type ToggleButtonGroupValue = string | number | Object | any[];
+export type ToggleButtonGroupValues = string | any[];
+export type ToggleButtonGroupAttributes = string | Object;
+export type ToggleButtonGroupSpace =
+  | 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: {
-        label: any;
-        label_direction: any;
-        label_sr_only: any;
-        title: any;
-        multiselect: any;
-        variant: any;
-        left_component: any;
-        no_fieldset: any;
-        disabled: any;
-        skeleton: any;
-        id: any;
-        name: any;
-        status: any;
-        status_state: string;
-        status_props: any;
-        status_no_animation: any;
-        global_status_id: any;
-        suffix: any;
-        vertical: any;
-        layout_direction: string;
-        value: any;
-        values: any;
-        attributes: any;
-        class: any;
-        className: any;
-        children: any;
-        custom_element: any;
-        custom_method: any;
-        on_change: any;
-    };
-    static enableWebComponent(): void;
-    static getDerivedStateFromProps(props: any, state: any): any;
-    static getValues(props: any): any;
-    constructor(props: any);
-    _refInput: React.RefObject<any>;
-    _id: any;
-    _name: any;
-    onChangeHandler: ({ value, event }: {
-        value: any;
-        event: any;
-    }) => void;
-    _tmp: any;
+export type ToggleButtonGroupTop = string | number | boolean;
+export type ToggleButtonGroupRight = string | number | boolean;
+export type ToggleButtonGroupBottom = string | number | boolean;
+export type ToggleButtonGroupLeft = string | number | boolean;
+export type ToggleButtonGroupChildren =
+  | 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 ToggleButtonGroupProps
+  extends React.HTMLProps<HTMLElement> {
+  /**
+   * Use either the `label` property or provide a custom one.
+   */
+  label?: ToggleButtonGroupLabel;
+  label_direction?: ToggleButtonGroupLabelDirection;
+  label_sr_only?: ToggleButtonGroupLabelSrOnly;
+
+  /**
+   * The `title` of the input - describing it a bit further for accessibility reasons.
+   */
+  title?: string;
+  multiselect?: ToggleButtonGroupMultiselect;
+  variant?: ToggleButtonGroupVariant;
+  left_component?: React.ReactNode;
+  no_fieldset?: ToggleButtonGroupNoFieldset;
+  disabled?: ToggleButtonGroupDisabled;
+
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
+  skeleton?: ToggleButtonGroupSkeleton;
+  id?: string;
+  name?: string;
+
+  /**
+   * 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?: ToggleButtonGroupStatus;
+
+  /**
+   * 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?: ToggleButtonGroupStatusNoAnimation;
+
+  /**
+   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   */
+  global_status_id?: string;
+
+  /**
+   * Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component.
+   */
+  suffix?: ToggleButtonGroupSuffix;
+  vertical?: ToggleButtonGroupVertical;
+  layout_direction?: ToggleButtonGroupLayoutDirection;
+
+  /**
+   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "ToggleButtonGroup".
+   */
+  value?: ToggleButtonGroupValue;
+
+  /**
+   * function values() { [native code] }
+   */
+  values?: ToggleButtonGroupValues;
+  attributes?: ToggleButtonGroupAttributes;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: ToggleButtonGroupSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: ToggleButtonGroupTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: ToggleButtonGroupRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: ToggleButtonGroupBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: ToggleButtonGroupLeft;
+  class?: string;
+  className?: string;
+  children?: ToggleButtonGroupChildren;
+  custom_element?: Object;
+  custom_method?: (...args: any[]) => any;
+
+  /**
+   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
+   */
+  on_change?: (...args: any[]) => any;
+}
+export default class ToggleButtonGroup extends React.Component<
+  ToggleButtonGroupProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";

package/components/tooltip/Tooltip.d.ts

@@ -1,80 +1,156 @@
-export { injectTooltipSemantic };
-export default class Tooltip 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: {
-        class: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        tooltip: 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>;
-        size: PropTypes.Requireable<string>;
-        active: PropTypes.Requireable<string | boolean>;
-        position: PropTypes.Requireable<string>;
-        arrow: PropTypes.Requireable<string>;
-        align: PropTypes.Requireable<string>;
-        animate_position: PropTypes.Requireable<string | boolean>;
-        fixed_position: PropTypes.Requireable<string | boolean>;
-        no_animation: PropTypes.Requireable<string | boolean>;
-        show_delay: PropTypes.Requireable<string | number>;
-        hide_delay: PropTypes.Requireable<string | number>;
-        target_selector: PropTypes.Requireable<string>;
-        target_element: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+import * as React from 'react';
+export type TooltipSize = 'basis' | 'large';
+export type TooltipActive = string | boolean;
+export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipArrow =
+  | any
+  | 'center'
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left';
+export type TooltipAlign = any | 'center' | 'right' | 'left';
+export type TooltipAnimatePosition = string | boolean;
+export type TooltipFixedPosition = string | boolean;
+export type TooltipNoAnimation = string | boolean;
+export type TooltipShowDelay = string | number;
+export type TooltipHideDelay = string | number;
+export type TooltipTargetElement = Object | React.ReactNode;
+export type TooltipSpace =
+  | 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: string;
-        size: string;
-        active: any;
-        position: string;
-        arrow: string;
-        align: any;
-        animate_position: boolean;
-        fixed_position: boolean;
-        no_animation: boolean;
-        show_delay: number;
-        hide_delay: number;
-        target_selector: any;
-        target_element: any;
-        class: any;
-        className: any;
-        children: any;
-        tooltip: any;
-    };
-    static enableWebComponent(): void;
-    static getContent(props: any): any;
-    constructor(props: any);
-    getPropsFromTooltipProp(): any;
-    _id: any;
+export type TooltipTop = string | number | boolean;
+export type TooltipRight = string | number | boolean;
+export type TooltipBottom = string | number | boolean;
+export type TooltipLeft = string | number | boolean;
+export type TooltipChildren =
+  | 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 TooltipProps extends React.HTMLProps<HTMLElement> {
+  id?: string;
+
+  /**
+   * If the tooltip should animate from one target to the next, define a unique ID.
+   */
+  group?: string;
+
+  /**
+   * Defines the spacing size of the tooltip. Can be `large` or `basis`. Defaults to `basis`.
+   */
+  size?: TooltipSize;
+
+  /**
+   * Set to `true` the tooltip will show up.
+   */
+  active?: TooltipActive;
+
+  /**
+   * Defines the offset position to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
+   */
+  position?: TooltipPosition;
+
+  /**
+   * Defines the direction where the arrow appears. Can be `center`, `top`, `right`, `bottom` and `left`. Defaults to `center`.
+   */
+  arrow?: TooltipArrow;
+
+  /**
+   * Defines the offset alignment to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
+   */
+  align?: TooltipAlign;
+  animate_position?: TooltipAnimatePosition;
+
+  /**
+   * If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   */
+  fixed_position?: TooltipFixedPosition;
+
+  /**
+   * Set to `true` if no fade-in animation should be used.
+   */
+  no_animation?: TooltipNoAnimation;
+
+  /**
+   * Define the delay until the tooltip should show up after the initial hover / active state.
+   */
+  show_delay?: TooltipShowDelay;
+
+  /**
+   * Define the delay until the tooltip should disappear up after initial visibility.
+   */
+  hide_delay?: TooltipHideDelay;
+
+  /**
+   * Specify a vanilla HTML selector by a string as the target element.
+   */
+  target_selector?: string;
+
+  /**
+   * Provide an element directly as a React Node or a React Ref that will be wrapped and rendered.
+   */
+  target_element?: TooltipTargetElement;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: TooltipSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: TooltipTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: TooltipRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: TooltipBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: TooltipLeft;
+  class?: string;
+  className?: string;
+
+  /**
+   * Provide a string or a React Element to be shown as the tooltip content.
+   */
+  children?: TooltipChildren;
+  tooltip?: React.ReactNode;
+}
+export default class Tooltip extends React.Component<TooltipProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import { injectTooltipSemantic } from "./TooltipHelpers";
-import React from "react";
-import PropTypes from "prop-types";

package/components/tooltip/TooltipContainer.d.ts

@@ -1,52 +1,70 @@
-export default class TooltipContainer extends React.PureComponent<any, any, any> {
-    static propTypes: {
-        internal_id: PropTypes.Requireable<string>;
-        targetElement: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        clientX: PropTypes.Requireable<number>;
-        active: PropTypes.Requireable<string | boolean>;
-        position: PropTypes.Requireable<string>;
-        arrow: PropTypes.Requireable<string>;
-        align: PropTypes.Requireable<string>;
-        animate_position: PropTypes.Requireable<string | boolean>;
-        fixed_position: PropTypes.Requireable<string | boolean>;
-        no_animation: PropTypes.Requireable<string | boolean>;
-        useHover: PropTypes.Requireable<boolean>;
-        style: PropTypes.Requireable<object>;
-        attributes: PropTypes.Requireable<object>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    static defaultProps: {
-        internal_id: any;
-        targetElement: any;
-        clientX: any;
-        active: boolean;
-        position: string;
-        arrow: any;
-        align: any;
-        animate_position: any;
-        fixed_position: any;
-        no_animation: any;
-        useHover: boolean;
-        style: any;
-        attributes: any;
-        children: any;
-    };
-    static getDerivedStateFromProps(props: any, state: any): any;
-    constructor(props: any);
-    constructor(props: any, context: any);
-    _rootRef: React.RefObject<any>;
-    offset: number;
-    addPositionObserver(): void;
-    resizeObserver: ResizeObserver;
-    _ddt: NodeJS.Timeout;
-    removePositionObserver(): void;
-    getGlobalStyle(): any;
-    makeStyle(position: any, arrow: any): any;
-    checkWindowPosition(style: any): any;
-    updateSize(): void;
-    handleMouseEnter: () => void;
-    handleMouseLeave: () => void;
-    _style: any;
+import * as React from 'react';
+export type TooltipContainerTargetElement =
+  | string
+  | ((...args: any[]) => any)
+  | Object
+  | React.ReactNode;
+export type TooltipContainerActive = string | boolean;
+export type TooltipContainerAnimatePosition = string | boolean;
+export type TooltipContainerFixedPosition = string | boolean;
+export type TooltipContainerNoAnimation = string | boolean;
+export type TooltipContainerChildren =
+  | 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 TooltipContainerProps
+  extends React.HTMLProps<HTMLElement> {
+  internal_id?: string;
+  targetElement?: TooltipContainerTargetElement;
+  clientX?: number;
+
+  /**
+   * Set to `true` the tooltip will show up.
+   */
+  active?: TooltipContainerActive;
+
+  /**
+   * Defines the offset position to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
+   */
+  position?: string;
+
+  /**
+   * Defines the direction where the arrow appears. Can be `center`, `top`, `right`, `bottom` and `left`. Defaults to `center`.
+   */
+  arrow?: string;
+
+  /**
+   * Defines the offset alignment to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
+   */
+  align?: string;
+  animate_position?: TooltipContainerAnimatePosition;
+
+  /**
+   * If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   */
+  fixed_position?: TooltipContainerFixedPosition;
+
+  /**
+   * Set to `true` if no fade-in animation should be used.
+   */
+  no_animation?: TooltipContainerNoAnimation;
+  useHover?: boolean;
+  style?: Object;
+  attributes?: Object;
+
+  /**
+   * Provide a string or a React Element to be shown as the tooltip content.
+   */
+  children?: TooltipContainerChildren;
+}
+export default class TooltipContainer extends React.Component<
+  TooltipContainerProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";
-import PropTypes from "prop-types";