@dnb/eufemia 10.62.4 → 10.63.0

package/components/button/Button.d.ts

@@ -65,7 +65,7 @@ export type ButtonProps = {
    */
   text?: ButtonText;
   /**
-   * `button`, `reset` or `submit` for the `type` HTML attribute. Defaults to `button` for legacy reasons.
+   * The type HTML attribute. Defaults to `button` for legacy reasons.
    */
   type?: string;
   /**
@@ -81,7 +81,7 @@ export type ButtonProps = {
    */
   size?: ButtonSize;
   /**
-   * To be included in the button. <a href="/icons/primary">Primary Icons</a> can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements.
+   * To be included in the button. [Primary Icons](/icons/primary) can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements.
    */
   icon?: ButtonIcon;
   /**
@@ -110,7 +110,7 @@ export type ButtonProps = {
   status_props?: FormStatusProps;
   status_no_animation?: boolean;
   /**
-   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
    */
   globalStatus?: GlobalStatusConfigObject;
   id?: string;
@@ -155,9 +155,6 @@ export type ButtonProps = {
   className?: string;
   class?: string;
   innerRef?: any;
-  /**
-   * The content of the button can be a string or a React Element.
-   */
   children?: ButtonChildren;
   /**
    * Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.

package/components/button/Button.js

@@ -248,14 +248,14 @@ Button.defaultProps = {
 };
 function Content(_ref) {
   let {
-    title,
-    content,
-    custom_content,
-    icon,
-    icon_size,
-    bounding,
-    skeleton,
-    isIconOnly
+    title = null,
+    content = null,
+    custom_content = null,
+    icon = null,
+    icon_size = 'default',
+    bounding = null,
+    skeleton = null,
+    isIconOnly = null
   } = _ref;
   return React.createElement(React.Fragment, null, isTrue(bounding) && (_span || (_span = React.createElement("span", {
     key: "button-bounding",
@@ -292,16 +292,6 @@ process.env.NODE_ENV !== "production" ? Content.propTypes = {
   skeleton: PropTypes.bool,
   isIconOnly: PropTypes.bool
 } : void 0;
-Content.defaultProps = {
-  custom_content: null,
-  title: null,
-  content: null,
-  icon: null,
-  icon_size: 'default',
-  bounding: null,
-  skeleton: null,
-  isIconOnly: null
-};
 Button._formElement = true;
 Button._supportsSpacingProps = true;
 //# sourceMappingURL=Button.js.map

package/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["React","PropTypes","classnames","Context","warn","makeUniqueId","isTrue","extendPropsWithContextInClassComponent","validateDOMAttributes","processChildren","getStatusState","dispatchCustomElementEvent","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","pickFormElementProps","IconPrimary","FormStatus","Anchor","pickIcon","opensNewTab","launch","Tooltip","buttonVariantPropType","variant","oneOf","Button","PureComponent","getContent","props","constructor","_defineProperty","src","event","afterContent","isValidElement","setState","_id","id","status","tooltip","_ref","createRef","state","componentDidMount","innerRef","current","inner_ref","render","_this$context","_this$context2","_this$context3","_this$context4","_this$context4$theme","defaultProps","skeleton","context","FormRow","formElement","class","classProp","className","size","title","custom_content","status_state","status_props","status_no_animation","globalStatus","disabled","text","_text","icon","_icon","icon_position","icon_size","wrap","bounding","stretch","element","attributes","_objectWithoutProperties","_excluded","showStatus","usedVariant","usedSize","iconSize","content","isIconOnly","Boolean","Element","href","to","omitClass","target","classes","theme","darkBackground","params","_objectSpread","on_click","onClick","getOnClickHandler","type","undefined","createElement","Fragment","_extends","ref","Content","show","label","text_id","no_animation","targetElement","process","env","NODE_ENV","propTypes","oneOfType","string","node","func","number","bool","object","shape","message","rel","children","_span","key","_span2","_span3","array","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/button/Button.js"],"sourcesContent":["/**\n * Web Button Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  warn,\n  makeUniqueId,\n  isTrue,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  processChildren,\n  getStatusState,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport FormStatus from '../form-status/FormStatus'\nimport Anchor, { pickIcon, opensNewTab } from '../anchor/Anchor'\nimport { launch } from '../../icons'\nimport Tooltip from '../tooltip/Tooltip'\n\nexport const buttonVariantPropType = {\n  variant: PropTypes.oneOf([\n    'primary',\n    'secondary',\n    'tertiary',\n    'signal',\n\n    /**\n     * For internal use only (as of now)\n     */\n    'unstyled',\n  ]),\n}\n\n/**\n * The button component should be used as the call-to-action in a form, or as a user interaction mechanism. Generally speaking, a button should not be used when a link would do the trick. Exceptions are made at times when it is used as a navigation element in the action-nav element.\n */\nexport default class Button extends React.PureComponent {\n  static contextType = Context\n\n  static getContent(props) {\n    return processChildren(props)\n  }\n\n  constructor(props) {\n    super(props)\n\n    this._id =\n      props.id || ((props.status || props.tooltip) && makeUniqueId()) // cause we need an id anyway\n    this._ref = React.createRef()\n\n    this.state = { afterContent: null }\n  }\n\n  componentDidMount() {\n    if (this.props.innerRef) {\n      typeof this.props.innerRef === 'function'\n        ? this.props.innerRef(this._ref.current)\n        : (this.props.innerRef.current = this._ref.current)\n    }\n    if (this.props.inner_ref) {\n      typeof this.props.innerRef === 'function'\n        ? this.props.inner_ref(this._ref.current)\n        : (this.props.inner_ref.current = this._ref.current)\n    }\n  }\n\n  getOnClickHandler = (src) => (event) => {\n    const afterContent = dispatchCustomElementEvent(src, 'on_click', {\n      event,\n    })\n    if (afterContent && React.isValidElement(afterContent)) {\n      this.setState({\n        afterContent,\n      })\n    }\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      Button.defaultProps,\n      { skeleton: this.context?.skeleton },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Button\n    )\n\n    const {\n      class: classProp, // @deprecated – can be removed in v11\n      className,\n      variant,\n      size,\n      title,\n      custom_content,\n      tooltip,\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      id, // eslint-disable-line\n      disabled,\n      text: _text, // eslint-disable-line\n      icon: _icon, // eslint-disable-line\n      icon_position,\n      icon_size,\n      wrap,\n      bounding, // eslint-disable-line\n      stretch,\n      skeleton,\n      element,\n      inner_ref, // eslint-disable-line\n      innerRef, // eslint-disable-line\n      ...attributes\n    } = props\n\n    const showStatus = getStatusState(status)\n\n    let { text, icon } = props\n    let usedVariant = variant\n    let usedSize = size\n    let iconSize = icon_size\n    const content = Button.getContent(this.props)\n\n    if (\n      variant === 'tertiary' &&\n      (text || content) &&\n      !icon &&\n      icon !== false\n    ) {\n      warn(\n        `Icon required: A Tertiary Button requires an icon to be WCAG compliant in most cases, because variant tertiary has no underline.\n(Override this warning using icon={false}, or consider using one of the other variants)`\n      )\n    }\n\n    // if only has Icon, then resize it and define it as secondary\n    const isIconOnly = Boolean(!text && !content && icon)\n    if (isIconOnly) {\n      if (!usedVariant) {\n        usedVariant = 'secondary'\n      }\n      if (!iconSize && (usedSize === 'default' || usedSize === 'large')) {\n        iconSize = 'medium'\n      }\n      if (!usedSize) {\n        usedSize = 'medium'\n      }\n    } else if (content) {\n      if (!usedVariant) {\n        usedVariant = 'primary'\n      }\n      if (!usedSize) {\n        usedSize = 'default'\n      }\n    }\n    if (!iconSize && variant === 'tertiary' && icon_position === 'top') {\n      iconSize = 'medium'\n    }\n\n    const Element = element\n      ? element\n      : props.href || props.to\n      ? Anchor\n      : 'button'\n    if (Element === Anchor) {\n      attributes.omitClass = true\n      if (opensNewTab(props.target, props.href) && !icon) {\n        icon = launch\n      }\n    }\n\n    const classes = classnames(\n      'dnb-button',\n      `dnb-button--${usedVariant || 'primary'}`,\n      usedSize && usedSize !== 'default' && `dnb-button--size-${usedSize}`,\n      this.context?.theme?.darkBackground &&\n        `dnb-button--on-dark-background`,\n      icon && `dnb-button--icon-position-${icon_position}`,\n      isTrue(stretch) && 'dnb-button--stretch',\n      icon && iconSize && `dnb-button--icon-size-${iconSize}`,\n      (text || content || custom_content) && 'dnb-button--has-text',\n      icon && 'dnb-button--has-icon',\n      wrap && 'dnb-button--wrap',\n      status && `dnb-button__status--${status_state}`,\n      createSkeletonClass(\n        variant === 'tertiary' ? 'font' : 'shape',\n        skeleton,\n        this.context\n      ),\n      createSpacingClasses(props),\n      classProp, // @deprecated – can be removed in v11\n      className,\n      props.href || props.to ? '' : null, // dnb-anchor--no-underline dnb-anchor--no-hover\n      Element === Anchor && 'dnb-anchor--no-style'\n    )\n\n    const params = {\n      className: classes,\n      title,\n      id: this._id,\n      disabled: isTrue(disabled),\n      ...attributes,\n    }\n\n    if (props.on_click || props.onClick) {\n      params.onClick = this.getOnClickHandler(props)\n    }\n\n    if (Element !== Anchor && !params.type) {\n      params.type = params.type === '' ? undefined : 'button'\n    }\n    if (isIconOnly) {\n      params['aria-label'] = params['aria-label'] || title\n    }\n\n    skeletonDOMAttributes(params, skeleton, this.context)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    return (\n      <>\n        <Element ref={this._ref} {...params}>\n          <Content\n            {...this.props}\n            icon={icon}\n            icon_size={iconSize}\n            content={text || content}\n            custom_content={custom_content}\n            isIconOnly={isIconOnly}\n            skeleton={isTrue(skeleton)}\n          />\n        </Element>\n\n        {this.state.afterContent}\n\n        <FormStatus\n          show={showStatus}\n          id={this._id + '-form-status'}\n          globalStatus={globalStatus}\n          label={text}\n          text={status}\n          state={status_state}\n          text_id={this._id + '-status'} // used for \"aria-describedby\"\n          no_animation={status_no_animation}\n          skeleton={skeleton}\n          {...status_props}\n        />\n\n        {tooltip && this._ref && (\n          <Tooltip\n            id={this._id + '-tooltip'}\n            targetElement={this._ref}\n            tooltip={tooltip}\n          />\n        )}\n      </>\n    )\n  }\n}\n\nButton.propTypes = {\n  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  type: PropTypes.string,\n  title: PropTypes.string,\n  variant: buttonVariantPropType.variant,\n  size: PropTypes.oneOf(['default', 'small', 'medium', 'large']),\n  icon: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.node,\n    PropTypes.func,\n  ]),\n  icon_position: PropTypes.oneOf(['left', 'right', 'top']),\n  icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  tooltip: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  status: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  status_state: PropTypes.string,\n  status_props: PropTypes.object,\n  status_no_animation: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  globalStatus: PropTypes.shape({\n    id: PropTypes.string,\n    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  }),\n  id: PropTypes.string,\n  href: PropTypes.string,\n  target: PropTypes.string,\n  rel: PropTypes.string,\n  to: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.object,\n    PropTypes.func,\n  ]),\n  custom_content: PropTypes.node,\n  wrap: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  bounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n  className: PropTypes.string,\n  /**\n   * @deprecated – use className instead. Will be removed in v11.\n   */\n  class: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  element: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.object,\n    PropTypes.node,\n  ]),\n\n  ...spacingPropTypes,\n\n  on_click: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n}\n\nButton.defaultProps = {\n  type: null, // set the type because of the anchor/href situation – can be made more smart in future\n  text: null,\n  variant: null,\n  size: null,\n  title: null,\n  icon: null,\n  icon_position: 'right',\n  icon_size: null,\n  href: null,\n  target: null,\n  rel: null,\n  to: null,\n  id: null,\n  custom_content: null,\n  wrap: null,\n  bounding: null,\n  stretch: null,\n  skeleton: null,\n  disabled: null,\n  tooltip: null,\n  status: null,\n  status_state: 'error',\n  status_props: null,\n  status_no_animation: null,\n  globalStatus: null,\n  inner_ref: null,\n\n  className: null,\n  /**\n   * @deprecated – use className instead. Will be removed in v11.\n   */\n  class: null,\n  innerRef: null,\n  children: null,\n  element: null,\n\n  on_click: null,\n  onClick: null,\n}\n\nfunction Content({\n  title,\n  content,\n  custom_content,\n  icon,\n  icon_size,\n  bounding,\n  skeleton,\n  isIconOnly,\n}) {\n  return (\n    <>\n      {isTrue(bounding) && (\n        <span key=\"button-bounding\" className=\"dnb-button__bounding\" />\n      )}\n\n      {custom_content && (\n        <React.Fragment key=\"button-custom-content\">\n          {custom_content}\n        </React.Fragment>\n      )}\n\n      {content && (\n        <>\n          <span\n            key=\"button-alignment\"\n            className=\"dnb-button__alignment\"\n            aria-hidden\n          >\n            &zwnj;\n          </span>\n          <span\n            key=\"button-text\"\n            className=\"dnb-button__text dnb-skeleton--show-font\"\n          >\n            {content}\n          </span>\n        </>\n      )}\n\n      {\n        // on empty text, use a zero-width non-joiner\n        // so the icon button gets vertical aligned\n        // we need the dnb-button__text for alignment\n        !content && icon && (\n          <span\n            key=\"button-alignment\"\n            className=\"dnb-button__alignment\"\n            aria-hidden\n          >\n            &zwnj;\n          </span>\n        )\n      }\n\n      {icon &&\n        (pickIcon(icon, 'dnb-button__icon') || (\n          <IconPrimary\n            key=\"button-icon\"\n            className=\"dnb-button__icon\"\n            icon={icon}\n            size={icon_size}\n            aria-hidden={isIconOnly && !title ? null : true}\n            skeleton={skeleton}\n          />\n        ))}\n    </>\n  )\n}\n\nContent.propTypes = {\n  title: PropTypes.string,\n  custom_content: PropTypes.node,\n  content: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.array,\n    PropTypes.node,\n  ]),\n  icon: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.node,\n    PropTypes.func,\n  ]),\n  icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  bounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  skeleton: PropTypes.bool,\n  isIconOnly: PropTypes.bool,\n}\n\nContent.defaultProps = {\n  custom_content: null,\n  title: null,\n  content: null,\n  icon: null,\n  icon_size: 'default',\n  bounding: null,\n  skeleton: null,\n  isIconOnly: null,\n}\n\nButton._formElement = true\nButton._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["React","PropTypes","classnames","Context","warn","makeUniqueId","isTrue","extendPropsWithContextInClassComponent","validateDOMAttributes","processChildren","getStatusState","dispatchCustomElementEvent","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","pickFormElementProps","IconPrimary","FormStatus","Anchor","pickIcon","opensNewTab","launch","Tooltip","buttonVariantPropType","variant","oneOf","Button","PureComponent","getContent","props","constructor","_defineProperty","src","event","afterContent","isValidElement","setState","_id","id","status","tooltip","_ref","createRef","state","componentDidMount","innerRef","current","inner_ref","render","_this$context","_this$context2","_this$context3","_this$context4","_this$context4$theme","defaultProps","skeleton","context","FormRow","formElement","class","classProp","className","size","title","custom_content","status_state","status_props","status_no_animation","globalStatus","disabled","text","_text","icon","_icon","icon_position","icon_size","wrap","bounding","stretch","element","attributes","_objectWithoutProperties","_excluded","showStatus","usedVariant","usedSize","iconSize","content","isIconOnly","Boolean","Element","href","to","omitClass","target","classes","theme","darkBackground","params","_objectSpread","on_click","onClick","getOnClickHandler","type","undefined","createElement","Fragment","_extends","ref","Content","show","label","text_id","no_animation","targetElement","process","env","NODE_ENV","propTypes","oneOfType","string","node","func","number","bool","object","shape","message","rel","children","_span","key","_span2","_span3","array","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/button/Button.js"],"sourcesContent":["/**\n * Web Button Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  warn,\n  makeUniqueId,\n  isTrue,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  processChildren,\n  getStatusState,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport FormStatus from '../form-status/FormStatus'\nimport Anchor, { pickIcon, opensNewTab } from '../anchor/Anchor'\nimport { launch } from '../../icons'\nimport Tooltip from '../tooltip/Tooltip'\n\nexport const buttonVariantPropType = {\n  variant: PropTypes.oneOf([\n    'primary',\n    'secondary',\n    'tertiary',\n    'signal',\n\n    /**\n     * For internal use only (as of now)\n     */\n    'unstyled',\n  ]),\n}\n\n/**\n * The button component should be used as the call-to-action in a form, or as a user interaction mechanism. Generally speaking, a button should not be used when a link would do the trick. Exceptions are made at times when it is used as a navigation element in the action-nav element.\n */\nexport default class Button extends React.PureComponent {\n  static contextType = Context\n\n  static getContent(props) {\n    return processChildren(props)\n  }\n\n  constructor(props) {\n    super(props)\n\n    this._id =\n      props.id || ((props.status || props.tooltip) && makeUniqueId()) // cause we need an id anyway\n    this._ref = React.createRef()\n\n    this.state = { afterContent: null }\n  }\n\n  componentDidMount() {\n    if (this.props.innerRef) {\n      typeof this.props.innerRef === 'function'\n        ? this.props.innerRef(this._ref.current)\n        : (this.props.innerRef.current = this._ref.current)\n    }\n    if (this.props.inner_ref) {\n      typeof this.props.innerRef === 'function'\n        ? this.props.inner_ref(this._ref.current)\n        : (this.props.inner_ref.current = this._ref.current)\n    }\n  }\n\n  getOnClickHandler = (src) => (event) => {\n    const afterContent = dispatchCustomElementEvent(src, 'on_click', {\n      event,\n    })\n    if (afterContent && React.isValidElement(afterContent)) {\n      this.setState({\n        afterContent,\n      })\n    }\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      Button.defaultProps,\n      { skeleton: this.context?.skeleton },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Button\n    )\n\n    const {\n      class: classProp, // @deprecated – can be removed in v11\n      className,\n      variant,\n      size,\n      title,\n      custom_content,\n      tooltip,\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      id, // eslint-disable-line\n      disabled,\n      text: _text, // eslint-disable-line\n      icon: _icon, // eslint-disable-line\n      icon_position,\n      icon_size,\n      wrap,\n      bounding, // eslint-disable-line\n      stretch,\n      skeleton,\n      element,\n      inner_ref, // eslint-disable-line\n      innerRef, // eslint-disable-line\n      ...attributes\n    } = props\n\n    const showStatus = getStatusState(status)\n\n    let { text, icon } = props\n    let usedVariant = variant\n    let usedSize = size\n    let iconSize = icon_size\n    const content = Button.getContent(this.props)\n\n    if (\n      variant === 'tertiary' &&\n      (text || content) &&\n      !icon &&\n      icon !== false\n    ) {\n      warn(\n        `Icon required: A Tertiary Button requires an icon to be WCAG compliant in most cases, because variant tertiary has no underline.\n(Override this warning using icon={false}, or consider using one of the other variants)`\n      )\n    }\n\n    // if only has Icon, then resize it and define it as secondary\n    const isIconOnly = Boolean(!text && !content && icon)\n    if (isIconOnly) {\n      if (!usedVariant) {\n        usedVariant = 'secondary'\n      }\n      if (!iconSize && (usedSize === 'default' || usedSize === 'large')) {\n        iconSize = 'medium'\n      }\n      if (!usedSize) {\n        usedSize = 'medium'\n      }\n    } else if (content) {\n      if (!usedVariant) {\n        usedVariant = 'primary'\n      }\n      if (!usedSize) {\n        usedSize = 'default'\n      }\n    }\n    if (!iconSize && variant === 'tertiary' && icon_position === 'top') {\n      iconSize = 'medium'\n    }\n\n    const Element = element\n      ? element\n      : props.href || props.to\n      ? Anchor\n      : 'button'\n    if (Element === Anchor) {\n      attributes.omitClass = true\n      if (opensNewTab(props.target, props.href) && !icon) {\n        icon = launch\n      }\n    }\n\n    const classes = classnames(\n      'dnb-button',\n      `dnb-button--${usedVariant || 'primary'}`,\n      usedSize && usedSize !== 'default' && `dnb-button--size-${usedSize}`,\n      this.context?.theme?.darkBackground &&\n        `dnb-button--on-dark-background`,\n      icon && `dnb-button--icon-position-${icon_position}`,\n      isTrue(stretch) && 'dnb-button--stretch',\n      icon && iconSize && `dnb-button--icon-size-${iconSize}`,\n      (text || content || custom_content) && 'dnb-button--has-text',\n      icon && 'dnb-button--has-icon',\n      wrap && 'dnb-button--wrap',\n      status && `dnb-button__status--${status_state}`,\n      createSkeletonClass(\n        variant === 'tertiary' ? 'font' : 'shape',\n        skeleton,\n        this.context\n      ),\n      createSpacingClasses(props),\n      classProp, // @deprecated – can be removed in v11\n      className,\n      props.href || props.to ? '' : null, // dnb-anchor--no-underline dnb-anchor--no-hover\n      Element === Anchor && 'dnb-anchor--no-style'\n    )\n\n    const params = {\n      className: classes,\n      title,\n      id: this._id,\n      disabled: isTrue(disabled),\n      ...attributes,\n    }\n\n    if (props.on_click || props.onClick) {\n      params.onClick = this.getOnClickHandler(props)\n    }\n\n    if (Element !== Anchor && !params.type) {\n      params.type = params.type === '' ? undefined : 'button'\n    }\n    if (isIconOnly) {\n      params['aria-label'] = params['aria-label'] || title\n    }\n\n    skeletonDOMAttributes(params, skeleton, this.context)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    return (\n      <>\n        <Element ref={this._ref} {...params}>\n          <Content\n            {...this.props}\n            icon={icon}\n            icon_size={iconSize}\n            content={text || content}\n            custom_content={custom_content}\n            isIconOnly={isIconOnly}\n            skeleton={isTrue(skeleton)}\n          />\n        </Element>\n\n        {this.state.afterContent}\n\n        <FormStatus\n          show={showStatus}\n          id={this._id + '-form-status'}\n          globalStatus={globalStatus}\n          label={text}\n          text={status}\n          state={status_state}\n          text_id={this._id + '-status'} // used for \"aria-describedby\"\n          no_animation={status_no_animation}\n          skeleton={skeleton}\n          {...status_props}\n        />\n\n        {tooltip && this._ref && (\n          <Tooltip\n            id={this._id + '-tooltip'}\n            targetElement={this._ref}\n            tooltip={tooltip}\n          />\n        )}\n      </>\n    )\n  }\n}\n\nButton.propTypes = {\n  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  type: PropTypes.string,\n  title: PropTypes.string,\n  variant: buttonVariantPropType.variant,\n  size: PropTypes.oneOf(['default', 'small', 'medium', 'large']),\n  icon: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.node,\n    PropTypes.func,\n  ]),\n  icon_position: PropTypes.oneOf(['left', 'right', 'top']),\n  icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  tooltip: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  status: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  status_state: PropTypes.string,\n  status_props: PropTypes.object,\n  status_no_animation: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  globalStatus: PropTypes.shape({\n    id: PropTypes.string,\n    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  }),\n  id: PropTypes.string,\n  href: PropTypes.string,\n  target: PropTypes.string,\n  rel: PropTypes.string,\n  to: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.object,\n    PropTypes.func,\n  ]),\n  custom_content: PropTypes.node,\n  wrap: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  bounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n  className: PropTypes.string,\n  /**\n   * @deprecated – use className instead. Will be removed in v11.\n   */\n  class: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  element: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.object,\n    PropTypes.node,\n  ]),\n\n  ...spacingPropTypes,\n\n  on_click: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n}\n\nButton.defaultProps = {\n  type: null, // set the type because of the anchor/href situation – can be made more smart in future\n  text: null,\n  variant: null,\n  size: null,\n  title: null,\n  icon: null,\n  icon_position: 'right',\n  icon_size: null,\n  href: null,\n  target: null,\n  rel: null,\n  to: null,\n  id: null,\n  custom_content: null,\n  wrap: null,\n  bounding: null,\n  stretch: null,\n  skeleton: null,\n  disabled: null,\n  tooltip: null,\n  status: null,\n  status_state: 'error',\n  status_props: null,\n  status_no_animation: null,\n  globalStatus: null,\n  inner_ref: null,\n\n  className: null,\n  /**\n   * @deprecated – use className instead. Will be removed in v11.\n   */\n  class: null,\n  innerRef: null,\n  children: null,\n  element: null,\n\n  on_click: null,\n  onClick: null,\n}\n\nfunction Content({\n  title = null,\n  content = null,\n  custom_content = null,\n  icon = null,\n  icon_size = 'default',\n  bounding = null,\n  skeleton = null,\n  isIconOnly = null,\n}) {\n  return (\n    <>\n      {isTrue(bounding) && (\n        <span key=\"button-bounding\" className=\"dnb-button__bounding\" />\n      )}\n\n      {custom_content && (\n        <React.Fragment key=\"button-custom-content\">\n          {custom_content}\n        </React.Fragment>\n      )}\n\n      {content && (\n        <>\n          <span\n            key=\"button-alignment\"\n            className=\"dnb-button__alignment\"\n            aria-hidden\n          >\n            &zwnj;\n          </span>\n          <span\n            key=\"button-text\"\n            className=\"dnb-button__text dnb-skeleton--show-font\"\n          >\n            {content}\n          </span>\n        </>\n      )}\n\n      {\n        // on empty text, use a zero-width non-joiner\n        // so the icon button gets vertical aligned\n        // we need the dnb-button__text for alignment\n        !content && icon && (\n          <span\n            key=\"button-alignment\"\n            className=\"dnb-button__alignment\"\n            aria-hidden\n          >\n            &zwnj;\n          </span>\n        )\n      }\n\n      {icon &&\n        (pickIcon(icon, 'dnb-button__icon') || (\n          <IconPrimary\n            key=\"button-icon\"\n            className=\"dnb-button__icon\"\n            icon={icon}\n            size={icon_size}\n            aria-hidden={isIconOnly && !title ? null : true}\n            skeleton={skeleton}\n          />\n        ))}\n    </>\n  )\n}\n\nContent.propTypes = {\n  title: PropTypes.string,\n  custom_content: PropTypes.node,\n  content: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.array,\n    PropTypes.node,\n  ]),\n  icon: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.node,\n    PropTypes.func,\n  ]),\n  icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  bounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  skeleton: PropTypes.bool,\n  isIconOnly: PropTypes.bool,\n}\n\nButton._formElement = true\nButton._supportsSpacingProps = true\n"],"mappings":"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"}

package/components/button/ButtonDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const ButtonProperties: PropertiesTableProps;

package/components/button/ButtonDocs.js

@@ -0,0 +1,128 @@
+export const ButtonProperties = {
+  type: {
+    doc: 'The type HTML attribute. Defaults to `button` for legacy reasons.',
+    type: ['button', 'reset', 'submit'],
+    status: 'optional'
+  },
+  text: {
+    doc: 'The content of the button can be a string or a React Element.',
+    type: ['string', 'React.ReactNode'],
+    status: 'optional'
+  },
+  'aria-label': {
+    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',
+    type: 'string',
+    status: 'optional'
+  },
+  title: {
+    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',
+    type: 'string',
+    status: 'optional'
+  },
+  variant: {
+    doc: 'Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only).',
+    type: ['primary', 'secondary', 'tertiary', 'signal'],
+    status: 'optional'
+  },
+  size: {
+    doc: 'The size of the button. For now there is `small`, `medium`, `default` and `large`.',
+    type: ['small', 'medium', 'default', 'large'],
+    status: 'optional'
+  },
+  icon: {
+    doc: 'To be included in the button. [Primary Icons](/icons/primary) can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements.',
+    type: ['string', 'React.ReactNode'],
+    status: 'optional'
+  },
+  icon_position: {
+    doc: 'Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.',
+    type: ['left', 'right', 'top'],
+    status: 'optional'
+  },
+  icon_size: {
+    doc: 'Define icon width and height. Defaults to 16px.',
+    type: 'string',
+    status: 'optional'
+  },
+  href: {
+    doc: 'If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button.',
+    type: 'string',
+    status: 'optional'
+  },
+  target: {
+    doc: 'When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.',
+    type: ['_self', '_blank', '_parent', '_top'],
+    status: 'optional'
+  },
+  rel: {
+    doc: 'When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`.',
+    type: 'string',
+    status: 'optional'
+  },
+  to: {
+    doc: 'Use this property only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.',
+    type: 'string',
+    status: 'optional'
+  },
+  wrap: {
+    doc: 'If set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  stretch: {
+    doc: 'Set it to `true` in order to stretch the button to the available space. Defaults to false.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  bounding: {
+    doc: 'Set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  element: {
+    doc: 'Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.',
+    type: 'string',
+    status: 'optional'
+  },
+  custom_content: {
+    doc: 'If you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  tooltip: {
+    doc: 'Provide a string or a React Element to be shown as the tooltip content.',
+    type: ['string', 'React.ReactNode'],
+    status: 'optional'
+  },
+  status: {
+    doc: 'Set it to either `status="error"` or a text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
+    type: ['error', 'info', 'boolean'],
+    status: 'optional'
+  },
+  status_state: {
+    doc: 'Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.',
+    type: ['error', 'info'],
+    status: 'optional'
+  },
+  status_props: {
+    doc: 'Use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'object',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=ButtonDocs.js.map

package/components/button/ButtonDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonDocs.js","names":["ButtonProperties","type","doc","status","text","title","variant","size","icon","icon_position","icon_size","href","target","rel","to","wrap","stretch","bounding","element","custom_content","skeleton","tooltip","status_state","status_props","globalStatus"],"sources":["../../../../src/components/button/ButtonDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ButtonProperties: PropertiesTableProps = {\n  type: {\n    doc: 'The type HTML attribute. Defaults to `button` for legacy reasons.',\n    type: ['button', 'reset', 'submit'],\n    status: 'optional',\n  },\n  text: {\n    doc: 'The content of the button can be a string or a React Element.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  'aria-label': {\n    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only).',\n    type: ['primary', 'secondary', 'tertiary', 'signal'],\n    status: 'optional',\n  },\n  size: {\n    doc: 'The size of the button. For now there is `small`, `medium`, `default` and `large`.',\n    type: ['small', 'medium', 'default', 'large'],\n    status: 'optional',\n  },\n  icon: {\n    doc: 'To be included in the button. [Primary Icons](/icons/primary) can be set as a string (e.g. `icon=\"chevron_right\"`), other icons should be set as React elements.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.',\n    type: ['left', 'right', 'top'],\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'Define icon width and height. Defaults to 16px.',\n    type: 'string',\n    status: 'optional',\n  },\n  href: {\n    doc: 'If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button.',\n    type: 'string',\n    status: 'optional',\n  },\n  target: {\n    doc: 'When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.',\n    type: ['_self', '_blank', '_parent', '_top'],\n    status: 'optional',\n  },\n  rel: {\n    doc: 'When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`.',\n    type: 'string',\n    status: 'optional',\n  },\n  to: {\n    doc: 'Use this property only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.',\n    type: 'string',\n    status: 'optional',\n  },\n  wrap: {\n    doc: 'If set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'Set it to `true` in order to stretch the button to the available space. Defaults to false.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  bounding: {\n    doc: 'Set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.',\n    type: 'string',\n    status: 'optional',\n  },\n  custom_content: {\n    doc: 'If you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  tooltip: {\n    doc: 'Provide a string or a React Element to be shown as the tooltip content.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'Set it to either `status=\"error\"` or a text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: ['error', 'info', 'boolean'],\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.',\n    type: ['error', 'info'],\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}

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

@@ -210,6 +210,10 @@ export type DatePickerProps = {
      * Use `right` to change the calendar alignment direction. Defaults to `left`.
      */
     alignPicker?: 'auto' | 'left' | 'right';
+    /**
+     * If set to `true`, the calendar will not be rendered inside a react portal. Defaults to `false`.
+     */
+    skipPortal?: boolean;
     className?: string;
     /**
      * Will be called right before every new calendar view gets rendered. See the example above.

package/components/date-picker/DatePicker.js

@@ -5,10 +5,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _AlignmentHelper;
 const _excluded = ["hidePicker"],
-  _excluded2 = ["label", "title", "labelDirection", "labelSrOnly", "onlyMonth", "hideLastWeek", "disableAutofocus", "hideNavigationButtons", "firstDay", "resetDate", "link", "sync", "inputElement", "addonElement", "shortcuts", "disabled", "stretch", "skeleton", "size", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "suffix", "maskOrder", "maskPlaceholder", "submitButtonText", "cancelButtonText", "resetButtonText", "showResetButton", "className", "tooltip"];
+  _excluded2 = ["label", "title", "labelDirection", "labelSrOnly", "onlyMonth", "hideLastWeek", "disableAutofocus", "hideNavigationButtons", "firstDay", "resetDate", "link", "sync", "inputElement", "addonElement", "shortcuts", "disabled", "stretch", "skeleton", "size", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "suffix", "maskOrder", "maskPlaceholder", "submitButtonText", "cancelButtonText", "resetButtonText", "showResetButton", "className", "tooltip", "skipPortal"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { warn, makeUniqueId, extendPropsWithContext, detectOutsideClick, getStatusState, combineDescribedBy, validateDOMAttributes } from '../../shared/component-helper';
 import AlignmentHelper from '../../shared/AlignmentHelper';
@@ -27,6 +27,7 @@ import DatePickerFooter from './DatePickerFooter';
 import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
 import { useTranslation } from '../../shared';
 import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps';
+import DatePickerPortal from './DatePickerPortal';
 const defaultProps = {
   maskOrder: 'dd/mm/yyyy',
   maskPlaceholder: 'dd/mm/åååå',
@@ -51,7 +52,8 @@ const defaultProps = {
   statusState: 'error',
   opened: false,
   noAnimation: false,
-  direction: 'auto'
+  direction: 'auto',
+  skipPortal: false
 };
 function DatePicker(externalProps) {
   const props = _objectSpread(_objectSpread({}, defaultProps), externalProps);
@@ -85,6 +87,7 @@ function DatePicker(externalProps) {
   const getReturnObject = useRef();
   const hideTimeout = useRef();
   const outsideClick = useRef();
+  const calendarContainerRef = useRef();
   const translation = useTranslation().DatePicker;
   if (endDateProp && !range) {
     warn(`The DatePicker got a "endDate". You have to set range={true} as well!.`);
@@ -118,7 +121,7 @@ function DatePicker(externalProps) {
     removeOutsideClickHandler();
   }, [noAnimation, preventClose, onHide, removeOutsideClickHandler]);
   const setOutsideClickHandler = useCallback(() => {
-    outsideClick.current = detectOutsideClick(innerRef.current, _ref => {
+    outsideClick.current = detectOutsideClick([innerRef.current, calendarContainerRef], _ref => {
       let {
         event
       } = _ref;
@@ -152,9 +155,13 @@ function DatePicker(externalProps) {
     setOpened(true);
     setHidden(false);
     onShow === null || onShow === void 0 ? void 0 : onShow(_objectSpread({}, getReturnObject.current(event)));
-    setTrianglePosition();
     setOutsideClickHandler();
-  }, [setTrianglePosition, setOutsideClickHandler, onShow]);
+  }, [setOutsideClickHandler, onShow]);
+  useLayoutEffect(() => {
+    if (!hidden) {
+      setTrianglePosition();
+    }
+  }, [hidden, setTrianglePosition]);
   useEffect(() => {
     if (openedProp) {
       showPicker();
@@ -246,7 +253,8 @@ function DatePicker(externalProps) {
       resetButtonText,
       showResetButton,
       className,
-      tooltip
+      tooltip,
+      skipPortal
     } = extendedProps,
     restProps = _objectWithoutProperties(extendedProps, _excluded2);
   const attributes = useMemo(() => filterOutNonAttributes(restProps), [restProps]);
@@ -268,6 +276,7 @@ function DatePicker(externalProps) {
     className: classnames("dnb-date-picker dnb-form-component", (range || showSubmitButton || showCancelButton || showResetButton) && 'dnb-date-picker--show-footer', createSpacingClasses(props), className, status && `dnb-date-picker__status--${statusState}`, labelDirection && `dnb-date-picker--${labelDirection}`, opened && 'dnb-date-picker--opened', hidden && 'dnb-date-picker--hidden', showInput && 'dnb-date-picker--show-input', alignPicker && `dnb-date-picker--${alignPicker}`, stretch && `dnb-date-picker--stretch`, size && `dnb-date-picker--${size}`),
     lang: context.locale
   };
+  const containerClassNames = classnames('dnb-date-picker__container', opened ? 'dnb-date-picker__container--opened' : 'dnb-date-picker__container--closed', hidden && 'dnb-date-picker__container--hidden', showInput && 'dnb-date-picker__container--show-input', alignPicker && `dnb-date-picker__container--${alignPicker}`, size && `dnb-date-picker--${size}`);
   const remainingDOMProps = validateDOMAttributes(props, attributes);
   const remainingSubmitProps = validateDOMAttributes(null, submitParams);
   const remainingPickerProps = validateDOMAttributes(null, skeletonDOMAttributes(pickerParams, skeleton, context));
@@ -323,12 +332,17 @@ function DatePicker(externalProps) {
   }, attributes, {
     submitAttributes: remainingSubmitProps,
     onSubmit: togglePicker
-  }, statusProps)), React.createElement("span", {
-    className: "dnb-date-picker__container"
+  }, statusProps)), !hidden && React.createElement(DatePickerPortal, {
+    alignment: alignPicker,
+    skipPortal: skipPortal,
+    targetElementRef: innerRef
+  }, React.createElement("span", {
+    className: containerClassNames,
+    ref: calendarContainerRef
   }, React.createElement("span", {
     className: "dnb-date-picker__triangle",
     ref: triangleRef
-  }), !hidden && React.createElement(React.Fragment, null, React.createElement(DatePickerRange, {
+  }), React.createElement(DatePickerRange, {
     id: id,
     firstDayOfWeek: firstDay,
     resetDate: resetDate,
@@ -366,7 +380,7 @@ function DatePicker(externalProps) {
     "aria-live": "assertive"
   }, selectedDateTitle)));
 }
-const NonAttributes = ['locale', 'id', 'month', 'date', 'startDate', 'endDate', 'minDate', 'maxDate', 'enableKeyboardNav', 'hideNavigation', 'returnFormat', 'dateFormat', 'hideDays', 'correctInvalidDate', 'opened', 'direction', 'range', 'showInput', 'noAnimation', 'onDaysRender', 'onShow', 'onType', 'onHide', 'showSubmitButton', 'showCancelButton', 'selectedDate', 'selectedMonth', 'selectedYear', 'nextMonth', 'nextYear', 'openPickerText', 'placeholderCharacters', 'prevMonth', 'prevYear', 'endMonth', 'startMonth', 'alignPicker'];
+const NonAttributes = ['locale', 'id', 'month', 'date', 'startDate', 'endDate', 'minDate', 'maxDate', 'enableKeyboardNav', 'hideNavigation', 'returnFormat', 'dateFormat', 'hideDays', 'correctInvalidDate', 'opened', 'direction', 'range', 'showInput', 'noAnimation', 'onDaysRender', 'onShow', 'onType', 'onHide', 'showSubmitButton', 'showCancelButton', 'selectedDate', 'selectedMonth', 'selectedYear', 'nextMonth', 'nextYear', 'openPickerText', 'placeholderCharacters', 'prevMonth', 'prevYear', 'endMonth', 'startMonth', 'alignPicker', 'preventClose'];
 function filterOutNonAttributes(props) {
   return Object.keys(props).reduce((attributes, key) => {
     if (!NonAttributes.includes(key)) {