@dnb/eufemia 9.17.2 → 9.21.0

package/components/breadcrumb/Breadcrumb.js

@@ -1,21 +1,8 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "data", "href"];
 import "core-js/modules/es.array.map.js";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import React, { useEffect, useState } from 'react';
 import classnames from 'classnames';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
@@ -24,9 +11,9 @@ import Section from '../section/Section';
 import Button from '../button/Button';
 import { useMediaQuery } from '../../shared';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
 import BreadcrumbItem from './BreadcrumbItem';
-export * from './BreadcrumbItem';
+import { convertJsxToString } from '../../shared/component-helper';
 export var defaultProps = {
   className: null,
   skeleton: false,
@@ -45,28 +32,28 @@ export var defaultProps = {
   spacing: false
 };
 
-function Breadcrumb(localProps) {
+var Breadcrumb = function Breadcrumb(localProps) {
   var _context$translation;
 
   var context = React.useContext(Context);
 
-  var _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb),
-      className = _extendPropsWithConte.className,
-      skeleton = _extendPropsWithConte.skeleton,
-      childrenItems = _extendPropsWithConte.children,
-      variant = _extendPropsWithConte.variant,
-      onClick = _extendPropsWithConte.onClick,
-      navText = _extendPropsWithConte.navText,
-      goBackText = _extendPropsWithConte.goBackText,
-      homeText = _extendPropsWithConte.homeText,
-      backToText = _extendPropsWithConte.backToText,
-      styleType = _extendPropsWithConte.styleType,
-      collapsedStyleType = _extendPropsWithConte.collapsedStyleType,
-      overrideIsCollapsed = _extendPropsWithConte.isCollapsed,
-      spacing = _extendPropsWithConte.spacing,
-      data = _extendPropsWithConte.data,
-      href = _extendPropsWithConte.href,
-      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  var _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb),
+      className = _usePropsWithContext.className,
+      skeleton = _usePropsWithContext.skeleton,
+      childrenItems = _usePropsWithContext.children,
+      variant = _usePropsWithContext.variant,
+      onClick = _usePropsWithContext.onClick,
+      navText = _usePropsWithContext.navText,
+      goBackText = _usePropsWithContext.goBackText,
+      homeText = _usePropsWithContext.homeText,
+      backToText = _usePropsWithContext.backToText,
+      styleType = _usePropsWithContext.styleType,
+      collapsedStyleType = _usePropsWithContext.collapsedStyleType,
+      overrideIsCollapsed = _usePropsWithContext.isCollapsed,
+      spacing = _usePropsWithContext.spacing,
+      data = _usePropsWithContext.data,
+      href = _usePropsWithContext.href,
+      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   var skeletonClasses = createSkeletonClass('font', skeleton, context);
   var spacingClasses = createSpacingClasses(props);
@@ -108,7 +95,7 @@ function Breadcrumb(localProps) {
   };
 
   return React.createElement("nav", _extends({
-    "aria-label": navText,
+    "aria-label": convertJsxToString(navText),
     className: classnames('dnb-breadcrumb', skeletonClasses, spacingClasses, className, spacing && 'dnb-breadcrumb--spacing'),
     "data-testid": "breadcrumb-nav"
   }, props), React.createElement(Section, {
@@ -135,7 +122,7 @@ function Breadcrumb(localProps) {
     className: "dnb-breadcrumb__collapse",
     "data-testid": "breadcrumb-collapse"
   }, React.createElement(MultipleCrumbs, null)));
-}
+};
 
 Breadcrumb.Item = BreadcrumbItem;
 export { BreadcrumbItem };

package/components/breadcrumb/Breadcrumb.tsx

@@ -10,13 +10,13 @@ import Button from '../button/Button'
 // Shared
 import { useMediaQuery } from '../../shared'
 import Context from '../../shared/Context'
-import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import { ISpacingProps } from '../../shared/interfaces'
+import { SkeletonShow } from '../skeleton/Skeleton'
+import { usePropsWithContext } from '../../shared/hooks'
 
 // Internal
 import BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'
-
-export * from './BreadcrumbItem'
+import { convertJsxToString } from '../../shared/component-helper'
 
 export interface BreadcrumbProps {
   /**
@@ -29,7 +29,7 @@ export interface BreadcrumbProps {
    * Skeleton should be applied when loading content
    * Default: null
    */
-  skeleton?: SkeletonTypes
+  skeleton?: SkeletonShow
 
   /**
    * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.
@@ -89,7 +89,7 @@ export interface BreadcrumbProps {
    * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.
    * Default: null
    */
-  isCollapsed?: boolean | string
+  isCollapsed?: boolean
 
   /**
    * Use one of the Section component style types (style_type)
@@ -128,7 +128,7 @@ export const defaultProps = {
   spacing: false,
 }
 
-function Breadcrumb(localProps: BreadcrumbProps & ISpacingProps) {
+const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   // Extract additional props from global context
@@ -149,8 +149,8 @@ function Breadcrumb(localProps: BreadcrumbProps & ISpacingProps) {
     data,
     href,
     ...props
-  } = extendPropsWithContext(
-    { ...defaultProps, ...localProps },
+  } = usePropsWithContext(
+    localProps,
     defaultProps,
     context?.translation?.Breadcrumb,
     context?.Breadcrumb
@@ -197,7 +197,7 @@ function Breadcrumb(localProps: BreadcrumbProps & ISpacingProps) {
 
   return (
     <nav
-      aria-label={navText}
+      aria-label={convertJsxToString(navText)}
       className={classnames(
         'dnb-breadcrumb',
         skeletonClasses,

package/components/breadcrumb/BreadcrumbItem.js

@@ -1,26 +1,13 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import React from 'react';
 import Button from '../button/Button';
 import IconPrimary from '../icon-primary/IconPrimary';
 import P from '../../elements/P';
 import homeIcon from '../../icons/home';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
 var defaultProps = {
   text: null,
   href: null,
@@ -29,18 +16,19 @@ var defaultProps = {
   variant: null,
   skeleton: null
 };
-export default function BreadcrumbItem(localProps) {
+
+var BreadcrumbItem = function BreadcrumbItem(localProps) {
   var context = React.useContext(Context);
   var homeText = context.translation.Breadcrumb.homeText;
 
-  var _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem),
-      text = _extendPropsWithConte.text,
-      href = _extendPropsWithConte.href,
-      icon = _extendPropsWithConte.icon,
-      onClick = _extendPropsWithConte.onClick,
-      variant = _extendPropsWithConte.variant,
-      skeleton = _extendPropsWithConte.skeleton,
-      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  var _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem),
+      text = _usePropsWithContext.text,
+      href = _usePropsWithContext.href,
+      icon = _usePropsWithContext.icon,
+      onClick = _usePropsWithContext.onClick,
+      variant = _usePropsWithContext.variant,
+      skeleton = _usePropsWithContext.skeleton,
+      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   var currentIcon = icon || variant === 'home' && homeIcon || 'chevron_left';
   var currentText = text || variant === 'home' && homeText || '';
@@ -48,23 +36,24 @@ export default function BreadcrumbItem(localProps) {
   return React.createElement("li", {
     className: "dnb-breadcrumb__item",
     "data-testid": "breadcrumb-item",
-    "aria-current": variant === 'current' ? true : undefined
+    "aria-current": variant === 'current' ? 'page' : undefined
   }, isInteractive ? React.createElement(Button, _extends({
     variant: "tertiary",
     href: href,
     icon: currentIcon,
     icon_position: "left",
-    icon_: currentIcon,
     on_click: onClick,
     text: currentText,
     skeleton: skeleton
-  }, props)) : React.createElement("span", {
+  }, props)) : React.createElement("span", _extends({
     className: "dnb-breadcrumb__item__span"
-  }, React.createElement(IconPrimary, {
+  }, props), React.createElement(IconPrimary, {
     icon: currentIcon,
     className: "dnb-breadcrumb__item__span__icon"
   }), React.createElement(P, {
     left: "0",
     "data-testid": "breadcrumb-item-text"
   }, currentText)));
-}
+};
+
+export default BreadcrumbItem;

package/components/breadcrumb/BreadcrumbItem.tsx

@@ -12,8 +12,8 @@ import homeIcon from '../../icons/home'
 
 // Shared
 import Context from '../../shared/Context'
-import { SkeletonTypes } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import { SkeletonShow } from '../skeleton/Skeleton'
+import { usePropsWithContext } from '../../shared/hooks'
 
 export interface BreadcrumbItemProps {
   /**
@@ -50,7 +50,7 @@ export interface BreadcrumbItemProps {
    * Skeleton should be applied when loading content
    * Default: null
    */
-  skeleton?: SkeletonTypes
+  skeleton?: SkeletonShow
 }
 
 const defaultProps = {
@@ -62,7 +62,7 @@ const defaultProps = {
   skeleton: null,
 }
 
-export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
+const BreadcrumbItem = (localProps: BreadcrumbItemProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   const {
@@ -73,13 +73,9 @@ export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
 
   // Extract additional props from global context
   const { text, href, icon, onClick, variant, skeleton, ...props } =
-    extendPropsWithContext(
-      { ...defaultProps, ...localProps },
-      defaultProps,
-      context?.BreadcrumbItem
-    )
+    usePropsWithContext(localProps, defaultProps, context?.BreadcrumbItem)
 
-  const currentIcon =
+  const currentIcon: IconPrimaryIcon =
     icon || (variant === 'home' && homeIcon) || 'chevron_left'
   const currentText = text || (variant === 'home' && homeText) || ''
   const isInteractive = (href || onClick) && variant !== 'current'
@@ -88,7 +84,7 @@ export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
     <li
       className="dnb-breadcrumb__item"
       data-testid="breadcrumb-item"
-      aria-current={variant === 'current' ? true : undefined}
+      aria-current={variant === 'current' ? 'page' : undefined}
     >
       {isInteractive ? (
         <Button
@@ -96,14 +92,13 @@ export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
           href={href}
           icon={currentIcon}
           icon_position="left"
-          icon_={currentIcon} // what does this do?
           on_click={onClick}
           text={currentText}
           skeleton={skeleton}
           {...props}
         />
       ) : (
-        <span className="dnb-breadcrumb__item__span">
+        <span className="dnb-breadcrumb__item__span" {...props}>
           <IconPrimary
             icon={currentIcon}
             className="dnb-breadcrumb__item__span__icon"
@@ -116,3 +111,5 @@ export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
     </li>
   )
 }
+
+export default BreadcrumbItem

package/components/button/Button.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
+import { SkeletonShow } from '../skeleton/Skeleton';
+import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
 export type ButtonText = string | React.ReactNode;
 export type ButtonVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type ButtonSize = 'default' | 'small' | 'medium' | 'large';
-export type ButtonIcon =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
+export type ButtonIcon = IconPrimaryIcon;
 export type ButtonIconPosition = 'left' | 'right' | 'top';
 export type ButtonIconSize = string | number;
 export type ButtonTooltip =
@@ -22,11 +22,11 @@ export type ButtonStatus =
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type ButtonStatusNoAnimation = string | boolean;
-export type ButtonTo = string | Object | ((...args: any[]) => any);
+export type ButtonTo = string | any | ((...args: any[]) => any);
 export type ButtonWrap = string | boolean;
 export type ButtonBounding = string | boolean;
 export type ButtonStretch = string | boolean;
-export type ButtonSkeleton = string | boolean;
+export type ButtonSkeleton = SkeletonShow;
 export type ButtonDisabled = string | boolean;
 export type ButtonChildren =
   | string
@@ -34,7 +34,7 @@ export type ButtonChildren =
   | React.ReactNode;
 export type ButtonElement =
   | ((...args: any[]) => any)
-  | Object
+  | any
   | React.ReactNode;
 export type ButtonSpace =
   | string
@@ -70,7 +70,11 @@ export type ButtonOnClick = 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".
  */
-export interface ButtonProps extends React.HTMLProps<HTMLElement> {
+export interface ButtonProps
+  extends Omit<
+    React.HTMLProps<HTMLElement>,
+    'disabled' | 'size' | 'title' | 'wrap'
+  > {
   /**
    * The content of the button can be a string or a React Element.
    */
@@ -129,7 +133,7 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
   /**
    * Use an object to define additional FormStatus properties.
    */
-  status_props?: Object;
+  status_props?: any;
   status_no_animation?: ButtonStatusNoAnimation;
 
   /**
@@ -178,9 +182,9 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
    */
   skeleton?: ButtonSkeleton;
   disabled?: ButtonDisabled;
-  inner_ref?: Object;
+  inner_ref?: any;
   className?: string;
-  innerRef?: Object;
+  innerRef?: any;
 
   /**
    * The content of the button can be a string or a React Element.
@@ -193,7 +197,7 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
   element?: ButtonElement;
 
   /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   * Has to be an any with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
    */
   space?: ButtonSpace;
 
@@ -216,7 +220,7 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
    * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
    */
   left?: ButtonLeft;
-  custom_element?: Object;
+  custom_element?: any;
   custom_method?: (...args: any[]) => any;
 
   /**

package/components/button/Button.js

@@ -44,7 +44,7 @@ import FormStatus from '../form-status/FormStatus';
 import Anchor from '../../elements/Anchor';
 import Tooltip from '../tooltip/Tooltip';
 export var buttonVariantPropType = {
-  variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'signal'])
+  variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'signal', 'unstyled'])
 };
 
 var Button = function (_React$PureComponent) {
@@ -178,14 +178,16 @@ var Button = function (_React$PureComponent) {
 
       var classes = classnames("dnb-button dnb-button--".concat(usedVariant || 'primary'), (text || content || custom_content) && 'dnb-button--has-text', createSkeletonClass(variant === 'tertiary' ? 'font' : 'shape', skeleton, this.context), createSpacingClasses(props), class_name, className, (props.href || props.to) && '', icon && "dnb-button--icon-position-".concat(icon_position, " dnb-button--has-icon") + (iconSize ? " dnb-button--icon-size-".concat(iconSize) : ""), usedSize && usedSize !== 'default' && "dnb-button--size-".concat(usedSize), isTrue(stretch) && 'dnb-button--stretch', wrap && 'dnb-button--wrap', status && "dnb-button__status--".concat(status_state));
 
-      var params = _objectSpread(_objectSpread({
+      var params = _objectSpread({
         className: classes,
         title: title,
         id: this._id,
         disabled: isTrue(disabled)
-      }, attributes), {}, {
-        onClick: this.onClickHandler
-      });
+      }, attributes);
+
+      if (this.props.on_click || this.props.onClick) {
+        params.onClick = this.onClickHandler;
+      }
 
       if (Element !== Anchor && !params.type) {
         params.type = params.type === '' ? undefined : 'button';

package/components/button/style/themes/dnb-button-theme-ui.scss

@@ -373,4 +373,7 @@
     color: var(--color-black-55);
     background-color: var(--color-black-3);
   }
+
+  // For internal usage only, we have also "unstyled"
+  // &--unstyled {}
 }

package/components/checkbox/Checkbox.d.ts

@@ -57,7 +57,7 @@ export type CheckboxChildren = string | ((...args: any[]) => any);
  */
 export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: CheckboxLabel;
 
@@ -74,7 +74,7 @@ export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   default_state?: CheckboxDefaultState;
 
   /**
-   * Determine whether the checkbox is checked or not. Default will be `false`.
+   * Determine whether the checkbox is checked or not. The default is `false`.
    */
   checked?: CheckboxChecked;
   disabled?: CheckboxDisabled;
@@ -91,7 +91,7 @@ export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   status?: CheckboxStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 

package/components/date-picker/DatePicker.d.ts

@@ -91,32 +91,32 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   title?: string;
 
   /**
-   * Defines the pre filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`.
+   * Defines the pre-filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`.
    */
   date?: DatePickerDate;
 
   /**
-   * To set the pre filled starting date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
+   * To set the pre-filled starting date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
    */
   start_date?: DatePickerStartDate;
 
   /**
-   * To set the pre filled ending date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
+   * To set the pre-filled ending date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
    */
   end_date?: DatePickerEndDate;
 
   /**
-   * To display what month should be shows in the first calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
    */
   month?: DatePickerMonth;
 
   /**
-   * To display what month should be shows in the first calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
    */
   start_month?: DatePickerStartMonth;
 
   /**
-   * To display what month should be shows in the second calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the second calendar by default. Defaults to the `date` respective `start_date`.
    */
   end_month?: DatePickerEndMonth;
 
@@ -168,7 +168,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   only_month?: DatePickerOnlyMonth;
 
   /**
-   * Use `true` to only show the last week in the current month, if it needs to be shows. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`.
+   * Use `true` to only show the last week in the current month if it needs to be shown. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`.
    */
   hide_last_week?: DatePickerHideLastWeek;
 
@@ -184,12 +184,12 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   show_input?: DatePickerShowInput;
 
   /**
-   * If set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is show by.
+   * If set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is shown.
    */
   show_submit_button?: DatePickerShowSubmitButton;
 
   /**
-   * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is show by.
+   * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is shown.
    */
   show_cancel_button?: DatePickerShowCancelButton;
 
@@ -218,12 +218,12 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   range?: DatePickerRange;
 
   /**
-   * Link both calendars, once to user is navigating between months. Only meant to use if range is set to true. Defaults to `false`.
+   * Link both calendars, once to the user is navigating between months. Only meant to use if the range is set to true. Defaults to `false`.
    */
   link?: DatePickerLink;
 
   /**
-   * Sync input values with the calendars views. Once the input values getting changed, the calendar changes its views in sync. Defaults to `true`.
+   * Sync input values with the calendars views. Once the input values get changed, the calendar changes its views in sync. Defaults to `true`.
    */
   sync?: DatePickerSync;
 
@@ -253,7 +253,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   addon_element?: DatePickerAddonElement;
 
   /**
-   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info below.
+   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.
    */
   shortcuts?: DatePickerShortcuts;
   disabled?: DatePickerDisabled;
@@ -274,7 +274,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   status?: DatePickerStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -337,7 +337,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called right before every new calendar view gets rendered. Se example above.
+   * Will be called right before every new calendar view gets rendered. See the example above.
    */
   on_days_render?: (...args: any[]) => any;
 

package/components/date-picker/DatePicker.js

@@ -19,7 +19,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _AlignmentHelper;
 
 var _excluded = ["hidePicker"],
-    _excluded2 = ["label", "title", "label_direction", "label_sr_only", "only_month", "hide_last_week", "disable_autofocus", "enable_keyboard_nav", "hide_navigation_buttons", "show_input", "range", "first_day", "reset_date", "locale", "link", "sync", "input_element", "addon_element", "shortcuts", "disabled", "stretch", "skeleton", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "mask_order", "mask_placeholder", "align_picker", "hide_navigation", "return_format", "date_format", "hide_days", "month", "date", "start_date", "end_date", "min_date", "max_date", "correct_invalid_date", "opened", "direction", "id", "className", "class", "show_submit_button", "show_cancel_button", "show_reset_button"];
+    _excluded2 = ["label", "title", "label_direction", "label_sr_only", "only_month", "hide_last_week", "disable_autofocus", "enable_keyboard_nav", "hide_navigation_buttons", "show_input", "range", "first_day", "reset_date", "locale", "link", "sync", "input_element", "addon_element", "shortcuts", "disabled", "stretch", "skeleton", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "mask_order", "mask_placeholder", "align_picker", "reset_button_text", "hide_navigation", "return_format", "date_format", "hide_days", "month", "date", "start_date", "end_date", "min_date", "max_date", "correct_invalid_date", "opened", "direction", "id", "className", "class", "show_submit_button", "show_cancel_button", "show_reset_button"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -290,6 +290,7 @@ var DatePicker = function (_React$PureComponent) {
           mask_order = props.mask_order,
           mask_placeholder = props.mask_placeholder,
           align_picker = props.align_picker,
+          reset_button_text = props.reset_button_text,
           _hide_navigation = props.hide_navigation,
           _return_format = props.return_format,
           _date_format = props.date_format,
@@ -432,7 +433,8 @@ var DatePicker = function (_React$PureComponent) {
         isRange: isTrue(range),
         onSubmit: this.onSubmitHandler,
         onCancel: this.onCancelHandler,
-        onReset: this.onResetHandler
+        onReset: this.onResetHandler,
+        resetButtonText: reset_button_text
       })))), suffix && React.createElement(Suffix, {
         className: "dnb-date-picker__suffix",
         id: id + '-suffix',

package/components/date-picker/DatePickerAddon.d.ts

@@ -10,7 +10,7 @@ export type DatePickerAddonRenderElement =
 export interface DatePickerAddonProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info below.
+   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.
    */
   shortcuts?: DatePickerAddonShortcuts;
   renderElement?: DatePickerAddonRenderElement;

package/components/date-picker/DatePickerCalendar.d.ts

@@ -9,7 +9,7 @@ export interface DatePickerCalendarProps
   nr?: number;
 
   /**
-   * To display what month should be shows in the first calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
    */
   month?: Date;
   prevBtn?: boolean;

package/components/date-picker/DatePickerFooter.d.ts

@@ -9,6 +9,7 @@ export interface DatePickerFooterProps
   onSubmit?: (...args: any[]) => any;
   onCancel?: (...args: any[]) => any;
   onReset?: (...args: any[]) => any;
+  resetButtonText?: string;
 }
 export default class DatePickerFooter extends React.Component<
   DatePickerFooterProps,