@dnb/eufemia 9.22.0 → 9.23.0-beta.1

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

@@ -1,188 +1,100 @@
-import * as React from 'react';
-import ToggleButtonGroup from './ToggleButtonGroup';
-export type ToggleButtonLabel =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type ToggleButtonLabelDirection = 'horizontal' | 'vertical';
-export type ToggleButtonLabelSrOnly = string | boolean;
-export type ToggleButtonChecked = string | boolean;
-export type ToggleButtonVariant = 'default' | 'checkbox' | 'radio';
-export type ToggleButtonDisabled = string | boolean;
-export type ToggleButtonSkeleton = string | boolean;
-export type ToggleButtonStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type ToggleButtonStatusNoAnimation = string | boolean;
-export type ToggleButtonSuffix =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type ToggleButtonValue = string | number | Object | any[];
-export type ToggleButtonIcon =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
-export type ToggleButtonIconPosition = 'left' | 'right';
-export type ToggleButtonAttributes = string | Object;
-export type ToggleButtonReadOnly = string | boolean;
-export type ToggleButtonSpace =
-  | 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 ToggleButtonTop = string | number | boolean;
-export type ToggleButtonRight = string | number | boolean;
-export type ToggleButtonBottom = string | number | boolean;
-export type ToggleButtonLeft = string | number | boolean;
-export type ToggleButtonChildren = string | ((...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".
+ * The toggle-button component is our enhancement of the classic toggle-button button.
  */
-export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
-  /**
-   * <em>(required)</em> the text shown in the ToggleButton.
-   */
-  text?: string;
-
-  /**
-   * Use either the `label` property or provide a custom one.
-   */
-  label?: ToggleButtonLabel;
-  label_direction?: ToggleButtonLabelDirection;
-  label_sr_only?: ToggleButtonLabelSrOnly;
-
-  /**
-   * The `title` of the input - describing it a bit further for accessibility reasons.
-   */
-  title?: string;
-
-  /**
-   * Determine whether the ToggleButton is checked or not. The default will be `false`.
-   */
-  checked?: ToggleButtonChecked;
-  variant?: ToggleButtonVariant;
-  left_component?: React.ReactNode;
-  disabled?: ToggleButtonDisabled;
-
-  /**
-   * If set to `true`, an overlaying skeleton with animation will be shown.
-   */
-  skeleton?: ToggleButtonSkeleton;
-  id?: 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?: ToggleButtonStatus;
-
-  /**
-   * 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?: ToggleButtonStatusNoAnimation;
-
-  /**
-   * 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?: ToggleButtonSuffix;
-
-  /**
-   * <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?: ToggleButtonValue;
-
-  /**
-   * Icon to be included in the toggle button.
-   */
-  icon?: ToggleButtonIcon;
-
-  /**
-   * Position of the icon inside the toggle button. Set to `left` or `right`. Defaults to `right` if not set.
-   */
-  icon_position?: ToggleButtonIconPosition;
-
-  /**
-   * Define icon width and height. Defaults to 16px
-   */
-  icon_size?: string;
-  attributes?: ToggleButtonAttributes;
-  readOnly?: ToggleButtonReadOnly;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: ToggleButtonSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: ToggleButtonTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: ToggleButtonRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: ToggleButtonBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: ToggleButtonLeft;
-  class?: string;
-  className?: string;
-  children?: ToggleButtonChildren;
-  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;
-  on_state_update?: (...args: any[]) => any;
-}
-export default class ToggleButton extends React.Component<
-  ToggleButtonProps,
-  any
-> {
-  static defaultProps: object;
-  static Group = ToggleButtonGroup;
-  render(): JSX.Element;
+export default class ToggleButton extends React.PureComponent<any, any, any> {
+    static Group: typeof ToggleButtonGroup;
+    static tagName: string;
+    static contextType: React.Context<{}>;
+    static propTypes: {
+        class: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<string | ((...args: any[]) => any)>;
+        custom_element: PropTypes.Requireable<object>;
+        custom_method: PropTypes.Requireable<(...args: any[]) => any>;
+        on_change: PropTypes.Requireable<(...args: any[]) => any>;
+        on_state_update: 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>;
+        text: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        label_direction: PropTypes.Requireable<string>;
+        label_sr_only: PropTypes.Requireable<string | boolean>;
+        title: PropTypes.Requireable<string>;
+        checked: PropTypes.Requireable<string | boolean>;
+        variant: PropTypes.Requireable<string>;
+        left_component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<string | boolean>;
+        skeleton: PropTypes.Requireable<string | boolean>;
+        id: 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>;
+        value: PropTypes.Requireable<string | number | object>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        icon_position: PropTypes.Requireable<string>;
+        icon_size: PropTypes.Requireable<string>;
+        attributes: PropTypes.Requireable<string | object>;
+        readOnly: PropTypes.Requireable<string | boolean>;
+    };
+    static defaultProps: {
+        text: any;
+        label: any;
+        label_direction: any;
+        label_sr_only: any;
+        title: any;
+        checked: any;
+        variant: any;
+        left_component: any;
+        disabled: any;
+        skeleton: any;
+        id: any;
+        status: any;
+        status_state: string;
+        status_props: any;
+        status_no_animation: any;
+        global_status_id: any;
+        suffix: any;
+        value: string;
+        icon: any;
+        icon_position: string;
+        icon_size: any;
+        attributes: any;
+        readOnly: boolean;
+        class: any;
+        className: any;
+        children: any;
+        custom_element: any;
+        custom_method: any;
+        on_change: any;
+        on_state_update: any;
+    };
+    static enableWebComponent(): void;
+    static parseChecked: (state: any) => boolean;
+    static getDerivedStateFromProps(props: any, state: any): any;
+    constructor(props: any, context: any);
+    _id: any;
+    _refButton: React.RefObject<any>;
+    onKeyDownHandler: (event: any) => void;
+    onKeyUpHandler: (event: any) => void;
+    onClickHandler: ({ event }: {
+        event: any;
+    }) => any;
+    callOnChange: ({ checked, event }: {
+        checked: any;
+        event: any;
+    }) => void;
 }
+import React from "react";
+import ToggleButtonGroup from "./ToggleButtonGroup";
+import PropTypes from "prop-types";

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

@@ -1,171 +1,107 @@
-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;
+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>;
     };
-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;
+    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;
 }
+import React from "react";
+import PropTypes from "prop-types";

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

@@ -0,0 +1,3 @@
+export default ToggleButtonGroupContext;
+declare const ToggleButtonGroupContext: React.Context<{}>;
+import React from "react";

package/components/toggle-button/group/web-component.d.ts

@@ -0,0 +1,3 @@
+export default ToggleButtonGroup;
+export * from "../ToggleButtonGroup";
+import ToggleButtonGroup from "../ToggleButtonGroup";

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

@@ -1,8 +1,3 @@
-/**
- * Component Entry
- *
- */
-
-import ToggleButton from './ToggleButton'
-export default ToggleButton
-export * from './ToggleButton'
+export default ToggleButton;
+export * from "./ToggleButton";
+import ToggleButton from "./ToggleButton";

package/components/toggle-button/style/index.d.ts

@@ -1,6 +1 @@
-/**
- * Web Style Import
- *
- */
-
-import './dnb-toggle-button.scss'
+export {};

package/components/toggle-button/style/themes/ui.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/components/toggle-button/web-component.d.ts

@@ -0,0 +1,3 @@
+export default ToggleButton;
+export * from "./ToggleButton";
+import ToggleButton from "./ToggleButton";