@dnb/eufemia 9.16.3 → 9.18.0

package/{cjs/components/modal/Modal.d.ts → components/modal/types.ts}

@@ -1,325 +1,271 @@
-import * as React from 'react';
-import ModalInner from './ModalInner';
-import ModalHeader, { ModalHeaderBar, CloseButton } from './ModalHeader';
-export type ModalMode = 'modal' | 'drawer';
-export type ModalDisabled = string | boolean;
-export type ModalSpacing = string | boolean;
-export type ModalOpenDelay = string | number;
-export type ModalHideCloseButton = string | boolean;
-export type ModalPreventClose = string | boolean;
-export type ModalPreventCoreStyle = string | boolean;
-export type ModalAnimationDuration = string | number;
-export type ModalNoAnimation = string | boolean;
-export type ModalNoAnimationOnMobile = string | boolean;
-export type ModalFullscreen = 'auto' | any | any | 'true' | 'false';
-export type ModalAlignContent = 'left' | 'center' | 'centered' | 'right';
-export type ModalContainerPlacement = 'left' | 'right' | 'top' | 'bottom';
-export type ModalOpenState = 'opened' | 'closed' | boolean;
-export type ModalDirectDomReturn = string | boolean;
-export type ModalSpace =
-  | 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 ModalTop = string | number | boolean;
-export type ModalRight = string | number | boolean;
-export type ModalBottom = string | number | boolean;
-export type ModalLeft = string | number | boolean;
-export type ModalChildren = React.ReactNode | ((...args: any[]) => any);
-export type ModalTrigger = React.ReactNode | ((...args: any[]) => any);
-export type ModalTriggerHidden = string | boolean;
-export type ModalTriggerDisabled = string | boolean;
+import * as React from 'react'
+import { ISpacingProps } from '../../shared/interfaces'
+import { CloseButtonProps } from './components/CloseButton'
+import { ModalRootProps } from './ModalRoot'
+
+export type ExtendedBoolean = string | boolean
+export type ReactChildType = React.ReactNode | ((...args: any[]) => any)
+
+export type ModalMode = 'modal' | 'drawer'
+export type ModalFullscreen = 'auto' | ExtendedBoolean
+export type ModalAlignContent = 'left' | 'center' | 'centered' | 'right'
+export type ModalContainerPlacement = 'left' | 'right' | 'top' | 'bottom'
+export type ModalOpenState = 'opened' | 'closed' | boolean
 export type ModalTriggerVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
-export type ModalTriggerIcon =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
-export type ModalTriggerIconPosition = 'left' | 'right';
-export type ModalModalContent =
-  | string
-  | 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 ModalProps extends React.HTMLProps<HTMLElement> {
+  | 'signal'
+export type ModalTriggerIconPosition = 'left' | 'right'
+export type ModalContentMinWidth = string | number
+export type ModalContentMaxWidth = string | number
+
+export interface ModalProps extends ModalRootProps {
   /**
    * The id used internal in the modal/drawer root element. Defaults to `root`, so the element id will be `dnb-modal-root`.
    */
-  id?: string;
-  root_id?: string;
+  id?: string
 
-  /**
-   * The modal/drawer mode. Can be set to `drawer`. Defaults to `modal`.
-   */
-  mode?: ModalMode;
+  disabled?: ExtendedBoolean
 
   /**
-   * The Modal handles the first focus – automatically. How ever, you can defined a custom focus selector the will be used instead `focus_selector=".css-selector"`.
+   * Forces the modal/drawer to delay the opening. The delay is given in `ms`.
    */
-  focus_selector?: string;
+  open_delay?: string | number
 
   /**
-   * The ID of the trigger component, describing the modal/drawer content. Defaults to the internal `trigger`, so make sure You define the `trigger_title`.
+   * If set to `true` (boolean or string), then the user can&#39;t close the modal/drawer.
    */
-  labelled_by?: string;
+  prevent_close?: ExtendedBoolean
 
-  /**
-   * The modal/drawer title. Displays on the very top of the content.
-   */
-  title?: React.ReactNode;
-  disabled?: ModalDisabled;
+  animation_duration?: string | number
 
   /**
-   * If set to `false` then the modal/drawer content will be shown without any spacing. Defaults to `true`.
+   * If set to `true`, no open/close animation will be shown. Defaults to false.
    */
-  spacing?: ModalSpacing;
+  no_animation?: ExtendedBoolean
 
   /**
-   * Forces the modal/drawer to delay the opening. The delay is given in `ms`.
+   * Use this prop to control the open/close state by setting either: `opened` / `closed` or `true` / `false`.
    */
-  open_delay?: ModalOpenDelay;
+  open_state?: ModalOpenState
 
   /**
-   * Defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal/drawer content wrapper.
+   * The content which will appear when triggering the modal/drawer.
    */
-  content_id?: string;
-  dialog_title?: string;
+  children?: ReactChildType
 
   /**
-   * The title of the close button. Defaults to <em>Close Modal Window</em>.
+   * This event gets triggered once the modal shows up. Returns the modal id: `{ id }`.
    */
-  close_title?: string;
+  on_open?: (...args: any[]) => any
 
   /**
-   * If truthy, the close button will not be shown.
+   * This event gets triggered once the modal gets closed. Returns the modal id: `{ id, event, triggeredBy }`.
    */
-  hide_close_button?: ModalHideCloseButton;
+  on_close?: (...args: any[]) => any
 
   /**
-   * Define any valid Eufemia Button property or HTML attribute inside an object.
+   * This event gets triggered once the user tries to close the modal, but `prevent_close` is set to "true". Returns a callback `close` You can call to trigger the close mechanism. More details below. Returns the modal id: `{ id, event, close: Method, triggeredBy }`
    */
-  close_button_attributes?: Object;
+  on_close_prevent?: (...args: any[]) => any
 
   /**
-   * If set to `true` (boolean or string), then the user can&#39;t close the modal/drawer.
+   * Set a function to call the callback function, once the modal/drawer should open: `open_modal={(open) => open()}`
    */
-  prevent_close?: ModalPreventClose;
+  open_modal?: (...args: any[]) => any
 
   /**
-   * By default the modal/drawer content gets added the core style class `dnb-core-style`. Use `false` to disable this behavior.
+   * Set a function to call the callback function, once the modal/drawer should close: `close_modal={(close) => close()}`
    */
-  prevent_core_style?: ModalPreventCoreStyle;
-  animation_duration?: ModalAnimationDuration;
+  close_modal?: (...args: any[]) => any
+
+  trigger?: ReactChildType
 
   /**
-   * If set to `true`, no open/close animation will be shown. Defaults to false.
+   * Send along custom HTML attributes or properties to the trigger button.
    */
-  no_animation?: ModalNoAnimation;
+  trigger_attributes?: { [x: string]: any }
 
   /**
-   * Same as `no_animation`, but gets triggered only if the viewport width is less than `40em`. Defaults to false.
+   * If truthy, no trigger button will be show. This can be used in combination with `open_state="opened"`.
    */
-  no_animation_on_mobile?: ModalNoAnimationOnMobile;
+  trigger_hidden?: ExtendedBoolean
 
   /**
-   * If set to `true` then the modal/drawer content will be shown as fullscreen, without showing the original content behind. Can be set to `false` to omit the auto fullscreen. Defaults to `auto`.
+   * If truthy, then the trigger button can&#39;t be opened.
    */
-  fullscreen?: ModalFullscreen;
+  trigger_disabled?: ExtendedBoolean
 
   /**
-   * The minimum Modal content width, defined by a CSS width value like `50vw` (50% of the viewport). Be careful on using fixed `min_width` so you don&#39;t break responsiveness. Defaults to `30rem` (average width is set to `60vw`).
+   * The modal/drawer triggering button variant. Defaults to `secondary`.
    */
-  min_width?: string;
+  trigger_variant?: ModalTriggerVariant
 
   /**
-   * The maximum Modal content width, defined by a CSS width value like `20rem`. Defaults to `60rem` (average width is set to `60vw`).
+   * If type is set to `text`, this will be the text which triggers the modal/drawer. If set to `button` it will be the `title` attribute of the button.
    */
-  max_width?: string;
+  trigger_text?: string
 
   /**
-   * Define the inner horizontal alignment of the content. Can be set to `left`, `center`, `right` and `centered`. If `centered`, then the content will also be centered vertically. Defaults to `left`.
+   * The modal/drawer triggering button title.
    */
-  align_content?: ModalAlignContent;
+  trigger_title?: string
+  trigger_size?: string
 
   /**
-   * For `drawer` mode only. Defines the placement on what side the Drawer should be opened. Can be set to `left`, `right`, `top` and `bottom`. Defaults to `right`.
+   * The modal/drawer triggering button icon. Can be used instead of a `trigger_text`. Defaults to `question`.
    */
-  container_placement?: ModalContainerPlacement;
+  trigger_icon?: ReactChildType
 
   /**
-   * Use this prop to control the open/close state by setting either: `opened` / `closed` or `true` / `false`.
+   * Defines the modal/drawer triggering icon position. Defaults to `left` because of the tertiary button variant.
    */
-  open_state?: ModalOpenState;
-  direct_dom_return?: ModalDirectDomReturn;
+  trigger_icon_position?: ModalTriggerIconPosition
 
   /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   * Adds a custom modal trigger class name.
    */
-  space?: ModalSpace;
+  trigger_class?: string
 
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   * The content which will appear when triggering the modal/drawer.
    */
-  top?: ModalTop;
+  modal_content: ReactChildType
+}
 
+export interface ModalContentProps {
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   * The content which will appear when triggering the modal/drawer.
    */
-  right?: ModalRight;
+  modal_content: ReactChildType
 
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   * The modal/drawer mode. Can be set to `drawer`. Defaults to `modal`.
    */
-  bottom?: ModalBottom;
+  mode?: ModalMode
 
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   * The content which will appear in the bar, above the header, and side-by-side the close button.
    */
-  left?: ModalLeft;
+  bar_content?: ReactChildType
 
   /**
-   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
+   * The content which will appear in the header of the modal/drawer the modal/drawer.
    */
-  class?: string;
+  header_content?: ReactChildType
+  hide?: boolean
 
   /**
-   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
+   * The id used internal in the modal/drawer root element. Defaults to `root`, so the element id will be `dnb-modal-root`.
    */
-  className?: string;
+  id?: string
+  root_id?: string
 
   /**
-   * The content which will appear when triggering the modal/drawer.
+   * The ID of the trigger component, describing the modal/drawer content. Defaults to the internal `trigger`, so make sure You define the `trigger_title`.
    */
-  children?: ModalChildren;
+  labelled_by?: string
 
   /**
-   * This event gets triggered once the modal shows up. Returns the modal id: `{ id }`.
+   * The Modal handles the first focus – automatically. How ever, you can defined a custom focus selector the will be used instead `focus_selector=".css-selector"`.
    */
-  on_open?: (...args: any[]) => any;
+  focus_selector?: string
 
   /**
-   * This event gets triggered once the modal gets closed. Returns the modal id: `{ id, event, triggeredBy }`.
+   * Defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal/drawer content wrapper.
    */
-  on_close?: (...args: any[]) => any;
+  content_id?: string
 
   /**
-   * This event gets triggered once the user tries to close the modal, but `prevent_close` is set to "true". Returns a callback `close` You can call to trigger the close mechanism. More details below. Returns the modal id: `{ id, event, close: Method, triggeredBy }`
+   * The modal/drawer title. Displays on the very top of the content.
    */
-  on_close_prevent?: (...args: any[]) => any;
+  title?: React.ReactNode | string
+
+  dialog_title?: string
 
   /**
-   * Set a function to call the callback function, once the modal/drawer should open: `open_modal={(open) => open()}`
+   * If truthy, the close button will not be shown.
    */
-  open_modal?: (...args: any[]) => any;
+  hide_close_button?: ExtendedBoolean
 
   /**
-   * Set a function to call the callback function, once the modal/drawer should close: `close_modal={(close) => close()}`
+   * Define any valid Eufemia Button property or HTML attribute inside an object.
    */
-  close_modal?: (...args: any[]) => any;
-  trigger?: ModalTrigger;
+  close_button_attributes?: CloseButtonProps
 
   /**
-   * Send along custom HTML attributes or properties to the trigger button.
+   * If set to `false` then the modal/drawer content will be shown without any spacing. Defaults to `true`.
    */
-  trigger_attributes?: Object;
+  spacing?: ISpacingProps
 
   /**
-   * If truthy, no trigger button will be show. This can be used in combination with `open_state="opened"`.
+   * By default the modal/drawer content gets added the core style class `dnb-core-style`. Use `false` to disable this behavior.
    */
-  trigger_hidden?: ModalTriggerHidden;
+  prevent_core_style?: ExtendedBoolean
+  animation_duration?: string | number
 
   /**
-   * If truthy, then the trigger button can&#39;t be opened.
+   * If set to `true`, no open/close animation will be shown. Defaults to false.
    */
-  trigger_disabled?: ModalTriggerDisabled;
+  no_animation?: ExtendedBoolean
 
   /**
-   * The modal/drawer triggering button variant. Defaults to `secondary`.
+   * Same as `no_animation`, but gets triggered only if the viewport width is less than `40em`. Defaults to false.
    */
-  trigger_variant?: ModalTriggerVariant;
+  no_animation_on_mobile?: ExtendedBoolean
 
   /**
-   * If type is set to `text`, this will be the text which triggers the modal/drawer. If set to `button` it will be the `title` attribute of the button.
+   * The minimum Modal content width, defined by a CSS width value like `50vw` (50% of the viewport). Be careful on using fixed `min_width` so you don&#39;t break responsiveness. Defaults to `30rem` (average width is set to `60vw`).
    */
-  trigger_text?: string;
+  min_width?: ModalContentMinWidth
 
   /**
-   * The modal/drawer triggering button title.
+   * The maximum Modal content width, defined by a CSS width value like `20rem`. Defaults to `60rem` (average width is set to `60vw`).
    */
-  trigger_title?: string;
-  trigger_size?: string;
+  max_width?: ModalContentMaxWidth
 
   /**
-   * The modal/drawer triggering button icon. Can be used instead of a `trigger_text`. Defaults to `question`.
+   * If set to `true` then the modal/drawer content will be shown as fullscreen, without showing the original content behind. Can be set to `false` to omit the auto fullscreen. Defaults to `auto`.
    */
-  trigger_icon?: ModalTriggerIcon;
+  fullscreen?: ModalFullscreen
 
   /**
-   * Defines the modal/drawer triggering icon position. Defaults to `left` because of the tertiary button variant.
+   * Define the inner horizontal alignment of the content. Can be set to `left`, `center`, `right` and `centered`. If `centered`, then the content will also be centered vertically. Defaults to `left`.
    */
-  trigger_icon_position?: ModalTriggerIconPosition;
+  align_content?: string
 
   /**
-   * Adds a custom modal trigger class name.
+   * For `drawer` mode only. Defines the placement on what side the Drawer should be opened. Can be set to `left`, `right`, `top` and `bottom`. Defaults to `right`.
    */
-  trigger_class?: string;
+  container_placement?: string
 
   /**
-   * Give the page overlay a custom class name (maps to `dnb-modal__overlay`).
+   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
    */
-  overlay_class?: string;
+  class?: string
 
   /**
    * Give the content wrapper a custom class name (maps to `dnb-modal__content`).
    */
-  content_class?: string;
+  content_class?: string
 
   /**
-   * The content which will appear when triggering the modal/drawer.
+   * Give the page overlay a custom class name (maps to `dnb-modal__overlay`).
    */
-  modal_content?: ModalModalContent;
+  overlay_class?: string
+
+  closeModal: (...args: any[]) => any
 
   /**
-   * The content which will appear in the header of the modal/drawer the modal/drawer.
+   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
    */
-  header_content?: React.ReactNode;
+  className?: string
 
   /**
-   * The content which will appear in the bar, above the header, and side-by-side the close button.
+   * The content which will appear when triggering the modal/drawer.
    */
-  bar_content?: React.ReactNode;
-}
-export default class Modal extends React.Component<ModalProps, any> {
-  static defaultProps: object;
-  static Inner = ModalInner;
-  static Content = ModalInner;
-  static Header = ModalHeader;
-  static Bar = ModalHeaderBar;
-  render(): JSX.Element;
+  children?: ReactChildType
+
+  close_title: string
 }

package/components/number-format/NumberFormat.d.ts

@@ -78,12 +78,12 @@ export interface NumberFormatProps extends React.HTMLProps<HTMLElement> {
   locale?: string;
 
   /**
-   * Add a string or React component before the number, including a white space.
+   * Add a string or React component before the number, including white space.
    */
   prefix?: NumberFormatPrefix;
 
   /**
-   * Appends a string or React component after the number, including a white space.
+   * Appends a string or React component after the number, including white space.
    */
   suffix?: NumberFormatSuffix;
 
@@ -93,12 +93,12 @@ export interface NumberFormatProps extends React.HTMLProps<HTMLElement> {
   currency?: NumberFormatCurrency;
 
   /**
-   * Use either empty/false to hide the sign/name or use `code` (NOK), `name` (norske kroner) , `symbol` (kr) or `narrowSymbol` (for a shorter symbol variant). Defaults to `narrowSymbol` when locale is `no` else we default to `code`.
+   * Use either empty/false to hide the sign/name or use `code` (NOK), `name` (norske kroner) , `symbol` (kr) or `narrowSymbol` (for a shorter symbol variant). Defaults to `narrowSymbol` when the locale is `no` else we default to `code`.
    */
   currency_display?: string;
 
   /**
-   * Use either `before` or `after` to change/define the position of the currency. Defaults to `auto` (Browser API defaults, but with exception if locale is `nb-NO` or `no`, use after as the default position).
+   * Use either `before` or `after` to change/define the position of the currency. Defaults to `auto` (Browser API defaults, but with an exception, if the locale is `nb-NO` or `no`, use after as the default position).
    */
   currency_position?: NumberFormatCurrencyPosition;
 
@@ -118,7 +118,7 @@ export interface NumberFormatProps extends React.HTMLProps<HTMLElement> {
   phone?: NumberFormatPhone;
 
   /**
-   * "Organization Number": use `true` to use the default Norwegian style (123 456 789) formatting. Screen readers get a digit by digit.
+   * "Organization Number": use `true` to use the default Norwegian style (123 456 789) formatting. Screen readers get digit by digit.
    */
   org?: NumberFormatOrg;
 
@@ -138,17 +138,17 @@ export interface NumberFormatProps extends React.HTMLProps<HTMLElement> {
   options?: NumberFormatOptions;
 
   /**
-   * Set a number to define the amount of decimals. Like `decimals="0"` will ensure that decimals are simply not shown. The default decimals for currency usage, is `2` (Browser API default).
+   * Set a number to define the number of decimals. Like `decimals="0"` will ensure that decimals are simply not shown. The default decimals for currency usage are `2` (Browser API default).
    */
   decimals?: NumberFormatDecimals;
 
   /**
-   * Use `false` to disable the auto select all on first click. Defaults to `true`.
+   * Use `false` to disable the auto select all on the first click. Defaults to `true`.
    */
   selectall?: NumberFormatSelectall;
 
   /**
-   * Use `true` to always auto select all on first click. Defaults to `false`.
+   * Use `true` to always auto select all on the first click. Defaults to `false`.
    */
   always_selectall?: NumberFormatAlwaysSelectall;