@dnb/eufemia 10.54.0 → 10.55.0

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

@@ -5,17 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _componentHelper = require("../../shared/component-helper");
 var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper"));
 var _SpacingHelper = require("../space/SpacingHelper");
-var _filterValidProps = require("../../shared/helpers/filterValidProps");
 var _SkeletonHelper = require("../skeleton/SkeletonHelper");
 var _format = _interopRequireDefault(require("date-fns/format"));
-var _nb = _interopRequireDefault(require("date-fns/locale/nb"));
-var _enGB = _interopRequireDefault(require("date-fns/locale/en-GB"));
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
 var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel"));
@@ -25,382 +21,24 @@ var _DatePickerRange = _interopRequireDefault(require("./DatePickerRange"));
 var _DatePickerInput = _interopRequireDefault(require("./DatePickerInput"));
 var _DatePickerAddon = _interopRequireDefault(require("./DatePickerAddon"));
 var _DatePickerFooter = _interopRequireDefault(require("./DatePickerFooter"));
+var _filterValidProps = require("../../shared/helpers/filterValidProps");
+var _shared = require("../../shared");
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-class DatePicker extends _react.default.PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "setTrianglePosition", () => {
-      const {
-        show_input,
-        align_picker
-      } = this.props;
-      const triangleWidth = 16;
-      if ((0, _componentHelper.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) {
-          (0, _componentHelper.warn)(e);
-        }
-      }
-    });
-    _defineProperty(this, "setOutsideClickHandler", () => {
-      this.outsideClick = (0, _componentHelper.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 && !(0, _componentHelper.isTrue)(this.props.show_submit_button) && !(0, _componentHelper.isTrue)(this.props.show_cancel_button)) {
-        this.hidePicker(args);
-      }
-    });
-    _defineProperty(this, "onSubmitHandler", args => {
-      this.hidePicker(args);
-      (0, _componentHelper.dispatchCustomElementEvent)(this, 'on_submit', this.getReturnObject(args));
-    });
-    _defineProperty(this, "onCancelHandler", args => {
-      this.hidePicker(args);
-      (0, _componentHelper.dispatchCustomElementEvent)(this, 'on_cancel', this.getReturnObject(args));
-    });
-    _defineProperty(this, "onResetHandler", args => {
-      this.hidePicker(args);
-      (0, _componentHelper.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
-      });
-      (0, _componentHelper.dispatchCustomElementEvent)(this, 'on_show', this.getReturnObject(args));
-      this.setTrianglePosition();
-      this.setOutsideClickHandler();
-    });
-    _defineProperty(this, "hidePicker", args => {
-      if ((0, _componentHelper.isTrue)(this.props.prevent_close)) {
-        return;
-      }
-      if (args && args.event && args.event.persist) {
-        args.event.persist();
-      }
-      this.setState({
-        opened: false,
-        _listenForPropChanges: false
-      }, () => {
-        (0, _componentHelper.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) {
-              (0, _componentHelper.warn)(e);
-            }
-          }
-        });
-      }, (0, _componentHelper.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 || (0, _componentHelper.makeUniqueId)();
-    const opened = (0, _componentHelper.isTrue)(props.opened);
-    this.state = {
-      showInput: (0, _componentHelper.isTrue)(props.show_input),
-      opened,
-      hidden: !opened,
-      direction: props.direction,
-      _listenForPropChanges: true
-    };
-    if (props.end_date && !(0, _componentHelper.isTrue)(props.range)) {
-      (0, _componentHelper.warn)(`The DatePicker got a "end_date". You have to set range={true} as well!.`);
-    }
-    this._innerRef = _react.default.createRef();
-    this._triangleRef = _react.default.createRef();
-    this._submitButtonRef = _react.default.createRef();
-  }
-  removeOutsideClickHandler() {
-    if (this.outsideClick) {
-      this.outsideClick.remove();
-    }
-  }
-  componentWillUnmount() {
-    clearTimeout(this._hideTimeout);
-    this.removeOutsideClickHandler();
-  }
-  componentDidMount() {
-    if ((0, _componentHelper.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 ? (0, _format.default)(startDate, 'PPPP') : null;
-    if ((0, _componentHelper.isTrue)(range) && startDate && endDate) {
-      currentDate = `${start} ${currentDate} - ${end} ${(0, _format.default)(endDate, 'PPPP')}`;
-    }
-    return currentDate ? selected_date.replace(/%s/, currentDate) : '';
-  }
-  render() {
-    var _this$context, _this$context2, _this$context3;
-    const props = (0, _componentHelper.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, (0, _filterValidProps.pickFormElementProps)((_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.FormRow), (0, _filterValidProps.pickFormElementProps)((_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : _this$context3.formElement), this.context.DatePicker);
-    if (props.locale !== _enGB.default && /en-/.test(this.context.locale)) {
-      props.locale = _enGB.default;
-    }
-    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 ((0, _componentHelper.isTrue)(only_month)) {
-      hide_days = true;
-      hide_navigation = (0, _componentHelper.isTrue)(hide_navigation_buttons) ? false : true;
-    }
-    const {
-      opened,
-      hidden,
-      showInput
-    } = this.state;
-    const id = this._id;
-    const showStatus = (0, _componentHelper.getStatusState)(status);
-    const pickerParams = {};
-    if (showStatus || suffix) {
-      pickerParams['aria-describedby'] = (0, _componentHelper.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: (0, _classnames.default)("dnb-date-picker dnb-form-component", ((0, _componentHelper.isTrue)(range) || (0, _componentHelper.isTrue)(show_submit_button) || (0, _componentHelper.isTrue)(show_cancel_button) || (0, _componentHelper.isTrue)(show_reset_button)) && 'dnb-date-picker--show-footer', (0, _SpacingHelper.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}`, (0, _componentHelper.isTrue)(stretch) && `dnb-date-picker--stretch`, size && `dnb-date-picker--${size}`)
-    };
-    if (locale !== null && locale !== void 0 && locale.code) {
-      mainParams.lang = locale.code;
-    }
-    (0, _SkeletonHelper.skeletonDOMAttributes)(pickerParams, skeleton, this.context);
-    (0, _componentHelper.validateDOMAttributes)(this.props, attributes);
-    (0, _componentHelper.validateDOMAttributes)(null, submitParams);
-    (0, _componentHelper.validateDOMAttributes)(null, pickerParams);
-    return _react.default.createElement(_DatePickerProvider.default, _extends({}, this.props, {
-      attributes: attributes,
-      setReturnObject: fn => this.getReturnObject = fn,
-      enhanceWithMethods: {
-        hidePicker: this.hidePicker
-      }
-    }), _react.default.createElement("span", mainParams, label && _react.default.createElement(_FormLabel.default, {
-      id: id + '-label',
-      for_id: id,
-      text: label,
-      label_direction: label_direction,
-      sr_only: label_sr_only,
-      disabled: disabled,
-      skeleton: skeleton
-    }), _react.default.createElement("span", _extends({
-      className: "dnb-date-picker__inner",
-      ref: this._innerRef
-    }, pickerParams), _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(_FormStatus.default, _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.default.createElement("span", {
-      className: "dnb-date-picker__row"
-    }, _react.default.createElement("span", {
-      className: "dnb-date-picker__shell",
-      id: `${id}-shell`
-    }, _react.default.createElement(_DatePickerInput.default, _extends({
-      id: id,
-      title: title,
-      disabled: (0, _componentHelper.isTrue)(disabled),
-      stretch: (0, _componentHelper.isTrue)(stretch),
-      skeleton: (0, _componentHelper.isTrue)(skeleton),
-      maskOrder: mask_order,
-      maskPlaceholder: mask_placeholder,
-      isRange: (0, _componentHelper.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.default.createElement("span", {
-      className: "dnb-date-picker__container"
-    }, _react.default.createElement("span", {
-      className: "dnb-date-picker__triangle",
-      ref: this._triangleRef
-    }), !hidden && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_DatePickerRange.default, {
-      id: id,
-      firstDayOfWeek: first_day,
-      locale: locale,
-      resetDate: (0, _componentHelper.isTrue)(reset_date),
-      isRange: (0, _componentHelper.isTrue)(range),
-      isLink: (0, _componentHelper.isTrue)(link),
-      isSync: (0, _componentHelper.isTrue)(sync),
-      hideDays: (0, _componentHelper.isTrue)(hide_days),
-      hideNav: (0, _componentHelper.isTrue)(hide_navigation),
-      views: (0, _componentHelper.isTrue)(hide_navigation_buttons) ? [{
-        nextBtn: false,
-        prevBtn: false
-      }] : null,
-      onlyMonth: (0, _componentHelper.isTrue)(only_month),
-      hideNextMonthWeek: (0, _componentHelper.isTrue)(hide_last_week),
-      noAutofocus: (0, _componentHelper.isTrue)(disable_autofocus),
-      onChange: this.onPickerChange
-    }), (addon_element || shortcuts) && _react.default.createElement(_DatePickerAddon.default, _extends({}, props, {
-      renderElement: addon_element,
-      shortcuts: shortcuts
-    })), _react.default.createElement(_DatePickerFooter.default, {
-      isRange: (0, _componentHelper.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.default.createElement(_Suffix.default, {
-      className: "dnb-date-picker__suffix",
-      id: id + '-suffix',
-      context: props
-    }, suffix))), _react.default.createElement("p", {
-      className: "dnb-sr-only",
-      "aria-live": "assertive"
-    }, selectedDateTitle)));
-  }
-}
-exports.default = DatePicker;
-_defineProperty(DatePicker, "contextType", _Context.default);
-_defineProperty(DatePicker, "defaultProps", {
-  id: null,
-  title: null,
-  date: undefined,
-  start_date: undefined,
-  end_date: undefined,
-  month: undefined,
-  start_month: undefined,
-  end_month: undefined,
+const defaultProps = {
   mask_order: 'dd/mm/yyyy',
   mask_placeholder: 'dd/mm/åååå',
   date_format: 'yyyy-MM-dd',
@@ -413,126 +51,352 @@ _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: _nb.default,
   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.default.string,
-  title: _propTypes.default.string,
-  date: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
-  start_date: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
-  end_date: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
-  month: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
-  start_month: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
-  end_month: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
-  min_date: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
-  max_date: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
-  correct_invalid_date: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  mask_order: _propTypes.default.string,
-  mask_placeholder: _propTypes.default.string,
-  date_format: _propTypes.default.string,
-  return_format: _propTypes.default.string,
-  hide_navigation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  hide_navigation_buttons: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  hide_days: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  only_month: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  hide_last_week: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  disable_autofocus: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  enable_keyboard_nav: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  show_input: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  show_submit_button: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  show_cancel_button: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  show_reset_button: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  submit_button_text: _propTypes.default.string,
-  cancel_button_text: _propTypes.default.string,
-  reset_button_text: _propTypes.default.string,
-  reset_date: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  first_day: _propTypes.default.string,
-  locale: _propTypes.default.object,
-  range: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  link: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  sync: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
-  label_direction: _propTypes.default.oneOf(['horizontal', 'vertical']),
-  label_sr_only: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  input_element: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
-  addon_element: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-  shortcuts: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func]),
-  disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  stretch: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  size: _propTypes.default.oneOf(['default', 'small', 'medium', 'large']),
-  status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
-  status_state: _propTypes.default.string,
-  status_props: _propTypes.default.object,
-  status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  globalStatus: _propTypes.default.shape({
-    id: _propTypes.default.string,
-    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
-  }),
-  suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
-  opened: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  prevent_close: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  direction: _propTypes.default.oneOf(['auto', 'top', 'bottom']),
-  align_picker: _propTypes.default.oneOf(['auto', 'left', 'right']),
-  className: _propTypes.default.string
-}, _SpacingHelper.spacingPropTypes), {}, {
-  on_days_render: _propTypes.default.func,
-  on_change: _propTypes.default.func,
-  on_type: _propTypes.default.func,
-  on_show: _propTypes.default.func,
-  on_hide: _propTypes.default.func,
-  on_submit: _propTypes.default.func,
-  on_cancel: _propTypes.default.func,
-  on_reset: _propTypes.default.func,
-  onBlur: _propTypes.default.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] = (0, _react.useState)(propsOpened);
+  const [hidden, setHidden] = (0, _react.useState)(!opened);
+  const [startDate, setStartDate] = (0, _react.useState)();
+  const [endDate, setEndDate] = (0, _react.useState)();
+  const showInput = props.show_input;
+  const context = (0, _react.useContext)(_Context.default);
+  const blurDelay = 201;
+  const id = props.id || (0, _componentHelper.makeUniqueId)();
+  const innerRef = (0, _react.useRef)();
+  const triangleRef = (0, _react.useRef)();
+  const submitButtonRef = (0, _react.useRef)();
+  const getReturnObject = (0, _react.useRef)();
+  const hideTimeout = (0, _react.useRef)();
+  const outsideClick = (0, _react.useRef)();
+  const translation = (0, _shared.useTranslation)().DatePicker;
+  if (end_date && !range) {
+    (0, _componentHelper.warn)(`The DatePicker got a "end_date". You have to set range={true} as well!.`);
+  }
+  const removeOutsideClickHandler = (0, _react.useCallback)(() => {
+    if (outsideClick.current) {
+      outsideClick.current.remove();
+    }
+  }, []);
+  const hidePicker = (0, _react.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) {
+          (0, _componentHelper.warn)(e);
+        }
+      }
+    }, no_animation ? 1 : blurDelay);
+    removeOutsideClickHandler();
+  }, [no_animation, prevent_close, on_hide, removeOutsideClickHandler]);
+  const setOutsideClickHandler = (0, _react.useCallback)(() => {
+    outsideClick.current = (0, _componentHelper.detectOutsideClick)(innerRef.current, _ref => {
+      let {
+        event
+      } = _ref;
+      hidePicker(_objectSpread(_objectSpread({}, event), {}, {
+        focusOnHide: event === null || event === void 0 ? void 0 : event['code']
+      }));
+    });
+  }, [hidePicker]);
+  const setTrianglePosition = (0, _react.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) {
+        (0, _componentHelper.warn)(e);
+      }
+    }
+  }, [show_input, align_picker]);
+  const showPicker = (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    if (propsOpened) {
+      showPicker();
+    }
+    return () => {
+      clearTimeout(hideTimeout.current);
+      removeOutsideClickHandler();
+    };
+  }, [propsOpened, removeOutsideClickHandler, showPicker]);
+  const onPickerChange = (0, _react.useCallback)(_ref2 => {
+    let {
+        hidePicker: shouldHidePicker = true
+      } = _ref2,
+      args = _objectWithoutProperties(_ref2, _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 = (0, _react.useCallback)(event => {
+    hidePicker(event);
+    on_submit === null || on_submit === void 0 ? void 0 : on_submit(_objectSpread({}, getReturnObject.current({
+      event
+    })));
+  }, [hidePicker, on_submit]);
+  const onCancelHandler = (0, _react.useCallback)(event => {
+    hidePicker();
+    on_cancel === null || on_cancel === void 0 ? void 0 : on_cancel(_objectSpread({}, getReturnObject.current(event)));
+  }, [hidePicker, on_cancel]);
+  const onResetHandler = (0, _react.useCallback)(event => {
+    hidePicker();
+    on_reset === null || on_reset === void 0 ? void 0 : on_reset(_objectSpread({}, getReturnObject.current(event)));
+  }, [hidePicker, on_reset]);
+  const togglePicker = (0, _react.useCallback)(args => {
+    !opened ? showPicker(args) : hidePicker(args);
+  }, [opened, showPicker, hidePicker]);
+  const formatSelectedDateTitle = (0, _react.useCallback)(() => {
+    const {
+      selected_date,
+      start,
+      end
+    } = translation;
+    let currentDate = startDate ? (0, _format.default)(startDate, 'PPPP') : null;
+    if (range && startDate && endDate) {
+      currentDate = `${start} ${currentDate} - ${end} ${(0, _format.default)(endDate, 'PPPP')}`;
+    }
+    return currentDate ? selected_date.replace(/%s/, currentDate) : '';
+  }, [range, translation, startDate, endDate]);
+  const extendedProps = (0, _componentHelper.extendPropsWithContext)(props, defaultProps, {
+    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
+  }, context.getTranslation(props).DatePicker, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.FormRow), (0, _filterValidProps.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 = (0, _componentHelper.getStatusState)(status);
+  const pickerParams = {};
+  if (showStatus || suffix) {
+    pickerParams['aria-describedby'] = (0, _componentHelper.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: (0, _classnames.default)("dnb-date-picker dnb-form-component", (range || show_submit_button || show_cancel_button || show_reset_button) && 'dnb-date-picker--show-footer', (0, _SpacingHelper.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 = (0, _componentHelper.validateDOMAttributes)(props, attributes);
+  const remainingSubmitProps = (0, _componentHelper.validateDOMAttributes)(null, submitParams);
+  const remainingPickerProps = (0, _componentHelper.validateDOMAttributes)(null, (0, _SkeletonHelper.skeletonDOMAttributes)(pickerParams, skeleton, context));
+  return _react.default.createElement(_DatePickerProvider.default, _extends({}, props, {
+    attributes: remainingDOMProps,
+    setReturnObject: fn => getReturnObject.current = fn,
+    hidePicker: hidePicker
+  }), _react.default.createElement("span", mainParams, label && _react.default.createElement(_FormLabel.default, {
+    id: id + '-label',
+    forId: id,
+    text: label,
+    label_direction: label_direction,
+    srOnly: label_sr_only,
+    disabled: disabled,
+    skeleton: skeleton
+  }), _react.default.createElement("span", _extends({
+    className: "dnb-date-picker__inner",
+    ref: innerRef
+  }, remainingPickerProps), _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(_FormStatus.default, _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.default.createElement("span", {
+    className: "dnb-date-picker__row"
+  }, _react.default.createElement("span", {
+    className: "dnb-date-picker__shell",
+    id: `${id}-shell`
+  }, _react.default.createElement(_DatePickerInput.default, _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.default.createElement("span", {
+    className: "dnb-date-picker__container"
+  }, _react.default.createElement("span", {
+    className: "dnb-date-picker__triangle",
+    ref: triangleRef
+  }), !hidden && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_DatePickerRange.default, {
+    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.default.createElement(_DatePickerAddon.default, {
+    renderElement: addon_element,
+    shortcuts: shortcuts
+  }), _react.default.createElement(_DatePickerFooter.default, {
+    isRange: range,
+    onSubmit: onSubmitHandler,
+    onCancel: onCancelHandler,
+    onReset: onResetHandler,
+    submitButtonText: submit_button_text,
+    cancelButtonText: cancel_button_text,
+    resetButtonText: reset_button_text
+  })))), suffix && _react.default.createElement(_Suffix.default, {
+    className: "dnb-date-picker__suffix",
+    id: id + '-suffix',
+    context: props
+  }, suffix))), _react.default.createElement("p", {
+    className: "dnb-sr-only",
+    "aria-live": "assertive"
+  }, selectedDateTitle)));
+}
+var _default = DatePicker;
+exports.default = _default;
 DatePicker._supportsSpacingProps = true;
 //# sourceMappingURL=DatePicker.js.map