@dnb/eufemia 10.54.0 → 10.55.0

package/es/components/date-picker/DatePicker.js

@@ -5,20 +5,17 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _AlignmentHelper;
 const _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", "size", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "mask_order", "mask_placeholder", "align_picker", "submit_button_text", "cancel_button_text", "reset_button_text", "tooltip", "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", "show_submit_button", "show_cancel_button", "show_reset_button"];
+  _excluded2 = ["label", "title", "label_direction", "label_sr_only", "only_month", "hide_last_week", "disable_autofocus", "hide_navigation_buttons", "first_day", "reset_date", "link", "sync", "input_element", "addon_element", "shortcuts", "disabled", "stretch", "skeleton", "size", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "mask_order", "mask_placeholder", "submit_button_text", "cancel_button_text", "reset_button_text", "show_reset_button", "className", "tooltip"],
+  _excluded3 = ["locale", "id", "month", "date", "start_date", "end_date", "min_date", "max_date", "enable_keyboard_nav", "hide_navigation", "return_format", "date_format", "hide_days", "correct_invalid_date", "opened", "direction", "range"];
 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 from 'react';
-import PropTypes from 'prop-types';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
-import { warn, isTrue, makeUniqueId, extendPropsWithContextInClassComponent, dispatchCustomElementEvent, detectOutsideClick, getStatusState, combineDescribedBy, validateDOMAttributes } from '../../shared/component-helper';
+import { warn, makeUniqueId, extendPropsWithContext, detectOutsideClick, getStatusState, combineDescribedBy, validateDOMAttributes } from '../../shared/component-helper';
 import AlignmentHelper from '../../shared/AlignmentHelper';
-import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
-import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
+import { createSpacingClasses } from '../space/SpacingHelper';
 import { skeletonDOMAttributes } from '../skeleton/SkeletonHelper';
 import format from 'date-fns/format';
-import nbLocale from 'date-fns/locale/nb';
-import enLocale from 'date-fns/locale/en-GB';
 import Context from '../../shared/Context';
 import Suffix from '../../shared/helpers/Suffix';
 import FormLabel from '../form-label/FormLabel';
@@ -28,369 +25,9 @@ import DatePickerRange from './DatePickerRange';
 import DatePickerInput from './DatePickerInput';
 import DatePickerAddon from './DatePickerAddon';
 import DatePickerFooter from './DatePickerFooter';
-export default class DatePicker extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "setTrianglePosition", () => {
-      const {
-        show_input,
-        align_picker
-      } = this.props;
-      const triangleWidth = 16;
-      if (isTrue(show_input) && this._triangleRef.current && this._innerRef.current) {
-        try {
-          const shellWidth = this._innerRef.current.querySelector('.dnb-input__shell').getBoundingClientRect().width;
-          const buttonWidth = this._innerRef.current.querySelector('.dnb-input__submit-button__button').getBoundingClientRect().width;
-          if (align_picker === 'right') {
-            const distance = buttonWidth / 2 - triangleWidth / 2;
-            this._triangleRef.current.style.marginRight = `${distance / 16}rem`;
-          } else {
-            const distance = shellWidth - buttonWidth / 2 - triangleWidth / 2;
-            this._triangleRef.current.style.marginLeft = `${distance / 16}rem`;
-          }
-        } catch (e) {
-          warn(e);
-        }
-      }
-    });
-    _defineProperty(this, "setOutsideClickHandler", () => {
-      this.outsideClick = detectOutsideClick(this._innerRef.current, e => {
-        var _e$event;
-        this.hidePicker({
-          focusOnHide: e === null || e === void 0 ? void 0 : (_e$event = e.event) === null || _e$event === void 0 ? void 0 : _e$event.key
-        });
-      });
-    });
-    _defineProperty(this, "onPickerChange", _ref => {
-      let {
-          hidePicker = true
-        } = _ref,
-        args = _objectWithoutProperties(_ref, _excluded);
-      if (hidePicker && !isTrue(this.props.show_submit_button) && !isTrue(this.props.show_cancel_button)) {
-        this.hidePicker(args);
-      }
-    });
-    _defineProperty(this, "onSubmitHandler", args => {
-      this.hidePicker(args);
-      dispatchCustomElementEvent(this, 'on_submit', this.getReturnObject(args));
-    });
-    _defineProperty(this, "onCancelHandler", args => {
-      this.hidePicker(args);
-      dispatchCustomElementEvent(this, 'on_cancel', this.getReturnObject(args));
-    });
-    _defineProperty(this, "onResetHandler", args => {
-      this.hidePicker(args);
-      dispatchCustomElementEvent(this, 'on_reset', this.getReturnObject(args));
-    });
-    _defineProperty(this, "showPicker", args => {
-      if (this._hideTimeout) {
-        clearTimeout(this._hideTimeout);
-      }
-      this.setState({
-        opened: true,
-        hidden: false,
-        _listenForPropChanges: false
-      });
-      dispatchCustomElementEvent(this, 'on_show', this.getReturnObject(args));
-      this.setTrianglePosition();
-      this.setOutsideClickHandler();
-    });
-    _defineProperty(this, "hidePicker", args => {
-      if (isTrue(this.props.prevent_close)) {
-        return;
-      }
-      if (args && args.event && args.event.persist) {
-        args.event.persist();
-      }
-      this.setState({
-        opened: false,
-        _listenForPropChanges: false
-      }, () => {
-        dispatchCustomElementEvent(this, 'on_hide', this.getReturnObject(args));
-      });
-      this._hideTimeout = setTimeout(() => {
-        this.setState({
-          hidden: true,
-          _listenForPropChanges: false
-        }, () => {
-          if (args !== null && args !== void 0 && args.focusOnHide) {
-            try {
-              this._submitButtonRef.current.focus({
-                preventScroll: true
-              });
-            } catch (e) {
-              warn(e);
-            }
-          }
-        });
-      }, isTrue(this.props.no_animation) ? 1 : DatePicker.blurDelay);
-      this.removeOutsideClickHandler();
-    });
-    _defineProperty(this, "togglePicker", args => {
-      !this.state.opened ? this.showPicker(args && args.event || args) : this.hidePicker(args && args.event || args);
-    });
-    this._id = props.id || makeUniqueId();
-    const opened = isTrue(props.opened);
-    this.state = {
-      showInput: isTrue(props.show_input),
-      opened,
-      hidden: !opened,
-      direction: props.direction,
-      _listenForPropChanges: true
-    };
-    if (props.end_date && !isTrue(props.range)) {
-      warn(`The DatePicker got a "end_date". You have to set range={true} as well!.`);
-    }
-    this._innerRef = React.createRef();
-    this._triangleRef = React.createRef();
-    this._submitButtonRef = React.createRef();
-  }
-  removeOutsideClickHandler() {
-    if (this.outsideClick) {
-      this.outsideClick.remove();
-    }
-  }
-  componentWillUnmount() {
-    clearTimeout(this._hideTimeout);
-    this.removeOutsideClickHandler();
-  }
-  componentDidMount() {
-    if (isTrue(this.props.opened)) {
-      this.showPicker();
-    }
-  }
-  formatSelectedDateTitle() {
-    const {
-      range
-    } = this.props;
-    const {
-      startDate,
-      endDate
-    } = this.state;
-    const {
-      selected_date,
-      start,
-      end
-    } = this.context.getTranslation(this.props).DatePicker;
-    let currentDate = startDate ? format(startDate, 'PPPP') : null;
-    if (isTrue(range) && startDate && endDate) {
-      currentDate = `${start} ${currentDate} - ${end} ${format(endDate, 'PPPP')}`;
-    }
-    return currentDate ? selected_date.replace(/%s/, currentDate) : '';
-  }
-  render() {
-    var _this$context, _this$context2, _this$context3;
-    const props = extendPropsWithContextInClassComponent(this.props, DatePicker.defaultProps, {
-      skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
-    }, this.context.getTranslation({
-      lang: this.props.lang,
-      locale: this.props.locale.code
-    }).DatePicker, pickFormElementProps((_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.FormRow), pickFormElementProps((_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : _this$context3.formElement), this.context.DatePicker);
-    if (props.locale !== enLocale && /en-/.test(this.context.locale)) {
-      props.locale = enLocale;
-    }
-    const {
-        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,
-        size,
-        status,
-        status_state,
-        status_props,
-        status_no_animation,
-        globalStatus,
-        suffix,
-        mask_order,
-        mask_placeholder,
-        align_picker,
-        submit_button_text,
-        cancel_button_text,
-        reset_button_text,
-        tooltip,
-        hide_navigation: _hide_navigation,
-        return_format: _return_format,
-        date_format: _date_format,
-        hide_days: _hide_days,
-        month: _month,
-        date: _date,
-        start_date: _start_date,
-        end_date: _end_date,
-        min_date: _min_date,
-        max_date: _max_date,
-        correct_invalid_date: _correct_invalid_date,
-        opened: _opened,
-        direction: _direction,
-        id: _id,
-        className,
-        show_submit_button,
-        show_cancel_button,
-        show_reset_button
-      } = props,
-      attributes = _objectWithoutProperties(props, _excluded2);
-    let {
-      hide_navigation,
-      hide_days
-    } = this.props;
-    if (isTrue(only_month)) {
-      hide_days = true;
-      hide_navigation = isTrue(hide_navigation_buttons) ? false : true;
-    }
-    const {
-      opened,
-      hidden,
-      showInput
-    } = this.state;
-    const id = this._id;
-    const showStatus = getStatusState(status);
-    const pickerParams = {};
-    if (showStatus || suffix) {
-      pickerParams['aria-describedby'] = combineDescribedBy(pickerParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
-    }
-    const submitParams = {
-      ['aria-expanded']: opened,
-      ref: this._submitButtonRef,
-      tabIndex: props.tabIndex,
-      tooltip
-    };
-    const selectedDateTitle = this.formatSelectedDateTitle();
-    const mainParams = {
-      className: classnames("dnb-date-picker dnb-form-component", (isTrue(range) || isTrue(show_submit_button) || isTrue(show_cancel_button) || isTrue(show_reset_button)) && 'dnb-date-picker--show-footer', createSpacingClasses(props), className, status && `dnb-date-picker__status--${status_state}`, label_direction && `dnb-date-picker--${label_direction}`, opened && 'dnb-date-picker--opened', hidden && 'dnb-date-picker--hidden', showInput && 'dnb-date-picker--show-input', align_picker && `dnb-date-picker--${align_picker}`, isTrue(stretch) && `dnb-date-picker--stretch`, size && `dnb-date-picker--${size}`)
-    };
-    if (locale !== null && locale !== void 0 && locale.code) {
-      mainParams.lang = locale.code;
-    }
-    skeletonDOMAttributes(pickerParams, skeleton, this.context);
-    validateDOMAttributes(this.props, attributes);
-    validateDOMAttributes(null, submitParams);
-    validateDOMAttributes(null, pickerParams);
-    return React.createElement(DatePickerProvider, _extends({}, this.props, {
-      attributes: attributes,
-      setReturnObject: fn => this.getReturnObject = fn,
-      enhanceWithMethods: {
-        hidePicker: this.hidePicker
-      }
-    }), React.createElement("span", mainParams, label && React.createElement(FormLabel, {
-      id: id + '-label',
-      for_id: id,
-      text: label,
-      label_direction: label_direction,
-      sr_only: label_sr_only,
-      disabled: disabled,
-      skeleton: skeleton
-    }), React.createElement("span", _extends({
-      className: "dnb-date-picker__inner",
-      ref: this._innerRef
-    }, pickerParams), _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
-      show: showStatus,
-      id: id + '-form-status',
-      globalStatus: globalStatus,
-      label: label,
-      text_id: id + '-status',
-      width_selector: id + '-shell',
-      text: status,
-      state: status_state,
-      no_animation: status_no_animation,
-      skeleton: skeleton
-    }, status_props)), React.createElement("span", {
-      className: "dnb-date-picker__row"
-    }, React.createElement("span", {
-      className: "dnb-date-picker__shell",
-      id: `${id}-shell`
-    }, React.createElement(DatePickerInput, _extends({
-      id: id,
-      title: title,
-      disabled: isTrue(disabled),
-      stretch: isTrue(stretch),
-      skeleton: isTrue(skeleton),
-      maskOrder: mask_order,
-      maskPlaceholder: mask_placeholder,
-      isRange: isTrue(range),
-      showInput: showInput,
-      selectedDateTitle: selectedDateTitle,
-      input_element: input_element,
-      opened: opened,
-      hidden: hidden,
-      size: size,
-      status: status ? 'error' : null,
-      status_state: status_state,
-      locale: locale
-    }, attributes, {
-      submitAttributes: submitParams,
-      onSubmit: this.togglePicker,
-      onBlur: this.props.onBlur
-    }, status_props)), React.createElement("span", {
-      className: "dnb-date-picker__container"
-    }, React.createElement("span", {
-      className: "dnb-date-picker__triangle",
-      ref: this._triangleRef
-    }), !hidden && React.createElement(React.Fragment, null, React.createElement(DatePickerRange, {
-      id: id,
-      firstDayOfWeek: first_day,
-      locale: locale,
-      resetDate: isTrue(reset_date),
-      isRange: isTrue(range),
-      isLink: isTrue(link),
-      isSync: isTrue(sync),
-      hideDays: isTrue(hide_days),
-      hideNav: isTrue(hide_navigation),
-      views: isTrue(hide_navigation_buttons) ? [{
-        nextBtn: false,
-        prevBtn: false
-      }] : null,
-      onlyMonth: isTrue(only_month),
-      hideNextMonthWeek: isTrue(hide_last_week),
-      noAutofocus: isTrue(disable_autofocus),
-      onChange: this.onPickerChange
-    }), (addon_element || shortcuts) && React.createElement(DatePickerAddon, _extends({}, props, {
-      renderElement: addon_element,
-      shortcuts: shortcuts
-    })), React.createElement(DatePickerFooter, {
-      isRange: isTrue(range),
-      onSubmit: this.onSubmitHandler,
-      onCancel: this.onCancelHandler,
-      onReset: this.onResetHandler,
-      submitButtonText: submit_button_text,
-      cancelButtonText: cancel_button_text,
-      resetButtonText: reset_button_text
-    })))), suffix && React.createElement(Suffix, {
-      className: "dnb-date-picker__suffix",
-      id: id + '-suffix',
-      context: props
-    }, suffix))), React.createElement("p", {
-      className: "dnb-sr-only",
-      "aria-live": "assertive"
-    }, selectedDateTitle)));
-  }
-}
-_defineProperty(DatePicker, "contextType", Context);
-_defineProperty(DatePicker, "defaultProps", {
-  id: null,
-  title: null,
-  date: undefined,
-  start_date: undefined,
-  end_date: undefined,
-  month: undefined,
-  start_month: undefined,
-  end_month: undefined,
+import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
+import { useTranslation } from '../../shared';
+const defaultProps = {
   mask_order: 'dd/mm/yyyy',
   mask_placeholder: 'dd/mm/åååå',
   date_format: 'yyyy-MM-dd',
@@ -403,126 +40,350 @@ _defineProperty(DatePicker, "defaultProps", {
   disable_autofocus: false,
   enable_keyboard_nav: false,
   show_input: false,
-  show_submit_button: null,
-  show_cancel_button: null,
-  show_reset_button: null,
   submit_button_text: 'Ok',
   cancel_button_text: 'Avbryt',
   reset_button_text: 'Tilbakestill',
   reset_date: true,
   first_day: 'monday',
-  min_date: undefined,
-  max_date: undefined,
-  correct_invalid_date: null,
-  locale: nbLocale,
   range: false,
   link: false,
   sync: true,
-  label: null,
-  label_direction: null,
-  label_sr_only: null,
-  input_element: null,
-  addon_element: null,
-  shortcuts: null,
-  disabled: null,
-  stretch: null,
-  skeleton: null,
-  size: null,
-  status: null,
   status_state: 'error',
-  status_props: null,
-  status_no_animation: null,
-  globalStatus: null,
-  suffix: null,
   opened: false,
-  prevent_close: null,
   no_animation: false,
-  direction: 'auto',
-  align_picker: null,
-  className: null,
-  on_days_render: null,
-  on_change: null,
-  on_type: null,
-  on_show: null,
-  on_hide: null,
-  on_submit: null,
-  on_cancel: null,
-  on_reset: null,
-  onBlur: null
-});
-_defineProperty(DatePicker, "blurDelay", 201);
-process.env.NODE_ENV !== "production" ? DatePicker.propTypes = _objectSpread(_objectSpread({
-  id: PropTypes.string,
-  title: PropTypes.string,
-  date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  start_date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  end_date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  month: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  start_month: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  end_month: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  min_date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  max_date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-  correct_invalid_date: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  mask_order: PropTypes.string,
-  mask_placeholder: PropTypes.string,
-  date_format: PropTypes.string,
-  return_format: PropTypes.string,
-  hide_navigation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  hide_navigation_buttons: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  hide_days: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  only_month: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  hide_last_week: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  disable_autofocus: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  enable_keyboard_nav: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  show_input: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  show_submit_button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  show_cancel_button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  show_reset_button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  submit_button_text: PropTypes.string,
-  cancel_button_text: PropTypes.string,
-  reset_button_text: PropTypes.string,
-  reset_date: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  first_day: PropTypes.string,
-  locale: PropTypes.object,
-  range: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  link: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  sync: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
-  label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
-  label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  input_element: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
-  addon_element: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  shortcuts: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
-  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  size: PropTypes.oneOf(['default', 'small', 'medium', 'large']),
-  status: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func, PropTypes.node]),
-  status_state: PropTypes.string,
-  status_props: PropTypes.object,
-  status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  globalStatus: PropTypes.shape({
-    id: PropTypes.string,
-    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-  }),
-  suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
-  opened: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  prevent_close: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  direction: PropTypes.oneOf(['auto', 'top', 'bottom']),
-  align_picker: PropTypes.oneOf(['auto', 'left', 'right']),
-  className: PropTypes.string
-}, spacingPropTypes), {}, {
-  on_days_render: PropTypes.func,
-  on_change: PropTypes.func,
-  on_type: PropTypes.func,
-  on_show: PropTypes.func,
-  on_hide: PropTypes.func,
-  on_submit: PropTypes.func,
-  on_cancel: PropTypes.func,
-  on_reset: PropTypes.func,
-  onBlur: PropTypes.func
-}) : void 0;
-DatePicker._formElement = true;
+  direction: 'auto'
+};
+function DatePicker(externalProps) {
+  const props = _objectSpread(_objectSpread({}, defaultProps), externalProps);
+  const {
+    prevent_close,
+    on_hide,
+    on_show,
+    on_submit,
+    on_cancel,
+    on_reset,
+    no_animation,
+    show_input,
+    align_picker,
+    show_submit_button,
+    show_cancel_button,
+    range,
+    hide_days,
+    hide_navigation,
+    opened: propsOpened,
+    end_date
+  } = props;
+  const [opened, setOpened] = useState(propsOpened);
+  const [hidden, setHidden] = useState(!opened);
+  const [startDate, setStartDate] = useState();
+  const [endDate, setEndDate] = useState();
+  const showInput = props.show_input;
+  const context = useContext(Context);
+  const blurDelay = 201;
+  const id = props.id || makeUniqueId();
+  const innerRef = useRef();
+  const triangleRef = useRef();
+  const submitButtonRef = useRef();
+  const getReturnObject = useRef();
+  const hideTimeout = useRef();
+  const outsideClick = useRef();
+  const translation = useTranslation().DatePicker;
+  if (end_date && !range) {
+    warn(`The DatePicker got a "end_date". You have to set range={true} as well!.`);
+  }
+  const removeOutsideClickHandler = useCallback(() => {
+    if (outsideClick.current) {
+      outsideClick.current.remove();
+    }
+  }, []);
+  const hidePicker = useCallback(args => {
+    if (prevent_close) {
+      return;
+    }
+    if (args && args.event && args.event.persist) {
+      args.event.persist();
+    }
+    setOpened(false);
+    on_hide === null || on_hide === void 0 ? void 0 : on_hide(_objectSpread({}, getReturnObject.current(args)));
+    hideTimeout.current = setTimeout(() => {
+      setHidden(true);
+      if (args !== null && args !== void 0 && args['focusOnHide']) {
+        try {
+          submitButtonRef.current.focus({
+            preventScroll: true
+          });
+        } catch (e) {
+          warn(e);
+        }
+      }
+    }, no_animation ? 1 : blurDelay);
+    removeOutsideClickHandler();
+  }, [no_animation, prevent_close, on_hide, removeOutsideClickHandler]);
+  const setOutsideClickHandler = useCallback(() => {
+    outsideClick.current = detectOutsideClick(innerRef.current, ({
+      event
+    }) => {
+      hidePicker(_objectSpread(_objectSpread({}, event), {}, {
+        focusOnHide: event === null || event === void 0 ? void 0 : event['code']
+      }));
+    });
+  }, [hidePicker]);
+  const setTrianglePosition = useCallback(() => {
+    const triangleWidth = 16;
+    if (show_input && triangleRef.current && innerRef.current) {
+      try {
+        const shellWidth = innerRef.current.querySelector('.dnb-input__shell').getBoundingClientRect().width;
+        const buttonWidth = innerRef.current.querySelector('.dnb-input__submit-button__button').getBoundingClientRect().width;
+        if (align_picker === 'right') {
+          const distance = buttonWidth / 2 - triangleWidth / 2;
+          triangleRef.current.style.marginRight = `${distance / 16}rem`;
+        } else {
+          const distance = shellWidth - buttonWidth / 2 - triangleWidth / 2;
+          triangleRef.current.style.marginLeft = `${distance / 16}rem`;
+        }
+      } catch (e) {
+        warn(e);
+      }
+    }
+  }, [show_input, align_picker]);
+  const showPicker = useCallback(event => {
+    if (hideTimeout.current) {
+      clearTimeout(hideTimeout.current);
+    }
+    setOpened(true);
+    setHidden(false);
+    on_show === null || on_show === void 0 ? void 0 : on_show(_objectSpread({}, getReturnObject.current(event)));
+    setTrianglePosition();
+    setOutsideClickHandler();
+  }, [setTrianglePosition, setOutsideClickHandler, on_show]);
+  useEffect(() => {
+    if (propsOpened) {
+      showPicker();
+    }
+    return () => {
+      clearTimeout(hideTimeout.current);
+      removeOutsideClickHandler();
+    };
+  }, [propsOpened, removeOutsideClickHandler, showPicker]);
+  const onPickerChange = useCallback(_ref => {
+    let {
+        hidePicker: shouldHidePicker = true
+      } = _ref,
+      args = _objectWithoutProperties(_ref, _excluded);
+    if (shouldHidePicker && !show_submit_button && !show_cancel_button) {
+      hidePicker();
+    }
+    setStartDate(args.startDate);
+    setEndDate(args.endDate);
+  }, [hidePicker, show_submit_button, show_cancel_button]);
+  const onSubmitHandler = useCallback(event => {
+    hidePicker(event);
+    on_submit === null || on_submit === void 0 ? void 0 : on_submit(_objectSpread({}, getReturnObject.current({
+      event
+    })));
+  }, [hidePicker, on_submit]);
+  const onCancelHandler = useCallback(event => {
+    hidePicker();
+    on_cancel === null || on_cancel === void 0 ? void 0 : on_cancel(_objectSpread({}, getReturnObject.current(event)));
+  }, [hidePicker, on_cancel]);
+  const onResetHandler = useCallback(event => {
+    hidePicker();
+    on_reset === null || on_reset === void 0 ? void 0 : on_reset(_objectSpread({}, getReturnObject.current(event)));
+  }, [hidePicker, on_reset]);
+  const togglePicker = useCallback(args => {
+    !opened ? showPicker(args) : hidePicker(args);
+  }, [opened, showPicker, hidePicker]);
+  const formatSelectedDateTitle = useCallback(() => {
+    const {
+      selected_date,
+      start,
+      end
+    } = translation;
+    let currentDate = startDate ? format(startDate, 'PPPP') : null;
+    if (range && startDate && endDate) {
+      currentDate = `${start} ${currentDate} - ${end} ${format(endDate, 'PPPP')}`;
+    }
+    return currentDate ? selected_date.replace(/%s/, currentDate) : '';
+  }, [range, translation, startDate, endDate]);
+  const extendedProps = extendPropsWithContext(props, defaultProps, {
+    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
+  }, context.getTranslation(props).DatePicker, pickFormElementProps(context === null || context === void 0 ? void 0 : context.FormRow), pickFormElementProps(context === null || context === void 0 ? void 0 : context.formElement), context.DatePicker);
+  const {
+      label,
+      title,
+      label_direction,
+      label_sr_only,
+      only_month,
+      hide_last_week,
+      disable_autofocus,
+      hide_navigation_buttons,
+      first_day,
+      reset_date,
+      link,
+      sync,
+      input_element,
+      addon_element,
+      shortcuts,
+      disabled,
+      stretch,
+      skeleton,
+      size,
+      status,
+      status_state,
+      status_props,
+      status_no_animation,
+      globalStatus,
+      suffix,
+      mask_order,
+      mask_placeholder,
+      submit_button_text,
+      cancel_button_text,
+      reset_button_text,
+      show_reset_button,
+      className,
+      tooltip
+    } = extendedProps,
+    restProps = _objectWithoutProperties(extendedProps, _excluded2);
+  let attributes = null;
+  {
+    const {
+        locale,
+        id,
+        month,
+        date,
+        start_date,
+        end_date,
+        min_date,
+        max_date,
+        enable_keyboard_nav,
+        hide_navigation,
+        return_format,
+        date_format,
+        hide_days,
+        correct_invalid_date,
+        opened,
+        direction,
+        range
+      } = restProps,
+      rest = _objectWithoutProperties(restProps, _excluded3);
+    attributes = rest;
+  }
+  const shouldHideDays = only_month ? true : hide_days;
+  const shouldHideNavigation = only_month ? hide_navigation_buttons ? false : true : hide_navigation;
+  const showStatus = getStatusState(status);
+  const pickerParams = {};
+  if (showStatus || suffix) {
+    pickerParams['aria-describedby'] = combineDescribedBy(pickerParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
+  }
+  const submitParams = {
+    ['aria-expanded']: opened,
+    ref: submitButtonRef,
+    tabIndex: extendedProps.tabIndex,
+    tooltip
+  };
+  const selectedDateTitle = formatSelectedDateTitle();
+  const mainParams = {
+    className: classnames("dnb-date-picker dnb-form-component", (range || show_submit_button || show_cancel_button || show_reset_button) && 'dnb-date-picker--show-footer', createSpacingClasses(props), className, status && `dnb-date-picker__status--${status_state}`, label_direction && `dnb-date-picker--${label_direction}`, opened && 'dnb-date-picker--opened', hidden && 'dnb-date-picker--hidden', showInput && 'dnb-date-picker--show-input', align_picker && `dnb-date-picker--${align_picker}`, stretch && `dnb-date-picker--stretch`, size && `dnb-date-picker--${size}`),
+    lang: context.locale
+  };
+  const remainingDOMProps = validateDOMAttributes(props, attributes);
+  const remainingSubmitProps = validateDOMAttributes(null, submitParams);
+  const remainingPickerProps = validateDOMAttributes(null, skeletonDOMAttributes(pickerParams, skeleton, context));
+  return React.createElement(DatePickerProvider, _extends({}, props, {
+    attributes: remainingDOMProps,
+    setReturnObject: fn => getReturnObject.current = fn,
+    hidePicker: hidePicker
+  }), React.createElement("span", mainParams, label && React.createElement(FormLabel, {
+    id: id + '-label',
+    forId: id,
+    text: label,
+    label_direction: label_direction,
+    srOnly: label_sr_only,
+    disabled: disabled,
+    skeleton: skeleton
+  }), React.createElement("span", _extends({
+    className: "dnb-date-picker__inner",
+    ref: innerRef
+  }, remainingPickerProps), _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
+    show: showStatus,
+    id: id + '-form-status',
+    globalStatus: globalStatus,
+    label: String(label),
+    text_id: id + '-status',
+    width_selector: id + '-shell',
+    text: status,
+    state: status_state,
+    no_animation: status_no_animation,
+    skeleton: skeleton
+  }, status_props)), React.createElement("span", {
+    className: "dnb-date-picker__row"
+  }, React.createElement("span", {
+    className: "dnb-date-picker__shell",
+    id: `${id}-shell`
+  }, React.createElement(DatePickerInput, _extends({
+    id: id,
+    title: title,
+    disabled: disabled,
+    stretch: stretch,
+    skeleton: skeleton,
+    maskOrder: mask_order,
+    maskPlaceholder: mask_placeholder,
+    isRange: range,
+    showInput: showInput,
+    selectedDateTitle: selectedDateTitle,
+    input_element: input_element,
+    opened: opened,
+    hidden: hidden,
+    size: size,
+    status: status ? 'error' : null,
+    status_state: status_state,
+    lang: context.locale
+  }, attributes, {
+    submitAttributes: remainingSubmitProps,
+    onSubmit: togglePicker
+  }, status_props)), React.createElement("span", {
+    className: "dnb-date-picker__container"
+  }, React.createElement("span", {
+    className: "dnb-date-picker__triangle",
+    ref: triangleRef
+  }), !hidden && React.createElement(React.Fragment, null, React.createElement(DatePickerRange, {
+    id: id,
+    firstDayOfWeek: first_day,
+    resetDate: reset_date,
+    isRange: range,
+    isLink: link,
+    isSync: sync,
+    hideDays: shouldHideDays,
+    hideNav: shouldHideNavigation,
+    views: hide_navigation_buttons ? [{
+      nextBtn: false,
+      prevBtn: false
+    }] : null,
+    onlyMonth: only_month,
+    hideNextMonthWeek: hide_last_week,
+    noAutoFocus: disable_autofocus,
+    onChange: onPickerChange,
+    locale: context.locale
+  }), (addon_element || shortcuts) && React.createElement(DatePickerAddon, {
+    renderElement: addon_element,
+    shortcuts: shortcuts
+  }), React.createElement(DatePickerFooter, {
+    isRange: range,
+    onSubmit: onSubmitHandler,
+    onCancel: onCancelHandler,
+    onReset: onResetHandler,
+    submitButtonText: submit_button_text,
+    cancelButtonText: cancel_button_text,
+    resetButtonText: reset_button_text
+  })))), suffix && React.createElement(Suffix, {
+    className: "dnb-date-picker__suffix",
+    id: id + '-suffix',
+    context: props
+  }, suffix))), React.createElement("p", {
+    className: "dnb-sr-only",
+    "aria-live": "assertive"
+  }, selectedDateTitle)));
+}
+export default DatePicker;
 DatePicker._supportsSpacingProps = true;
 //# sourceMappingURL=DatePicker.js.map