@dnb/eufemia 10.55.1 → 10.57.0

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

@@ -5,11 +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", "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"];
+  _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"];
 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, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, 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,57 +26,56 @@ import DatePickerAddon from './DatePickerAddon';
 import DatePickerFooter from './DatePickerFooter';
 import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
 import { useTranslation } from '../../shared';
+import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps';
 const defaultProps = {
-  mask_order: 'dd/mm/yyyy',
-  mask_placeholder: 'dd/mm/åååå',
-  date_format: 'yyyy-MM-dd',
-  return_format: 'yyyy-MM-dd',
-  hide_navigation: false,
-  hide_navigation_buttons: false,
-  hide_days: false,
-  only_month: false,
-  hide_last_week: false,
-  disable_autofocus: false,
-  enable_keyboard_nav: false,
-  show_input: false,
-  submit_button_text: 'Ok',
-  cancel_button_text: 'Avbryt',
-  reset_button_text: 'Tilbakestill',
-  reset_date: true,
-  first_day: 'monday',
+  maskOrder: 'dd/mm/yyyy',
+  maskPlaceholder: 'dd/mm/åååå',
+  dateFormat: 'yyyy-MM-dd',
+  returnFormat: 'yyyy-MM-dd',
+  hideNavigation: false,
+  hideNavigationButtons: false,
+  hideDays: false,
+  onlyMonth: false,
+  hideLastWeek: false,
+  disableAutofocus: false,
+  enableKeyboardNav: false,
+  showInput: false,
+  submitButtonText: 'Ok',
+  cancelButtonText: 'Avbryt',
+  resetButtonText: 'Tilbakestill',
+  resetDate: true,
+  firstDay: 'monday',
   range: false,
   link: false,
   sync: true,
-  status_state: 'error',
+  statusState: 'error',
   opened: false,
-  no_animation: false,
+  noAnimation: false,
   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,
+    preventClose,
+    onHide,
+    onShow,
+    onSubmit,
+    onCancel,
+    onReset,
+    noAnimation,
+    showInput,
+    alignPicker,
+    showSubmitButton,
+    showCancelButton,
     range,
-    hide_days,
-    hide_navigation,
-    opened: propsOpened,
-    end_date
-  } = props;
-  const [opened, setOpened] = useState(propsOpened);
+    hideDays,
+    hideNavigation,
+    opened: openedProp,
+    endDate: endDateProp
+  } = convertSnakeCaseProps(props);
+  const [opened, setOpened] = useState(openedProp);
   const [hidden, setHidden] = useState(!opened);
-  const [startDate, setStartDate] = useState();
-  const [endDate, setEndDate] = useState();
-  const showInput = props.show_input;
+  const [dates, setDates] = useState({});
   const context = useContext(Context);
   const blurDelay = 201;
   const id = props.id || makeUniqueId();
@@ -88,8 +86,8 @@ function DatePicker(externalProps) {
   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!.`);
+  if (endDateProp && !range) {
+    warn(`The DatePicker got a "endDate". You have to set range={true} as well!.`);
   }
   const removeOutsideClickHandler = useCallback(() => {
     if (outsideClick.current) {
@@ -97,14 +95,14 @@ function DatePicker(externalProps) {
     }
   }, []);
   const hidePicker = useCallback(args => {
-    if (prevent_close) {
+    if (preventClose) {
       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)));
+    onHide === null || onHide === void 0 ? void 0 : onHide(_objectSpread({}, getReturnObject.current(args)));
     hideTimeout.current = setTimeout(() => {
       setHidden(true);
       if (args !== null && args !== void 0 && args['focusOnHide']) {
@@ -116,9 +114,9 @@ function DatePicker(externalProps) {
           warn(e);
         }
       }
-    }, no_animation ? 1 : blurDelay);
+    }, noAnimation ? 1 : blurDelay);
     removeOutsideClickHandler();
-  }, [no_animation, prevent_close, on_hide, removeOutsideClickHandler]);
+  }, [noAnimation, preventClose, onHide, removeOutsideClickHandler]);
   const setOutsideClickHandler = useCallback(() => {
     outsideClick.current = detectOutsideClick(innerRef.current, ({
       event
@@ -130,11 +128,11 @@ function DatePicker(externalProps) {
   }, [hidePicker]);
   const setTrianglePosition = useCallback(() => {
     const triangleWidth = 16;
-    if (show_input && triangleRef.current && innerRef.current) {
+    if (showInput && 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') {
+        if (alignPicker === 'right') {
           const distance = buttonWidth / 2 - triangleWidth / 2;
           triangleRef.current.style.marginRight = `${distance / 16}rem`;
         } else {
@@ -145,131 +143,114 @@ function DatePicker(externalProps) {
         warn(e);
       }
     }
-  }, [show_input, align_picker]);
+  }, [showInput, alignPicker]);
   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)));
+    onShow === null || onShow === void 0 ? void 0 : onShow(_objectSpread({}, getReturnObject.current(event)));
     setTrianglePosition();
     setOutsideClickHandler();
-  }, [setTrianglePosition, setOutsideClickHandler, on_show]);
+  }, [setTrianglePosition, setOutsideClickHandler, onShow]);
   useEffect(() => {
-    if (propsOpened) {
+    if (openedProp) {
       showPicker();
     }
     return () => {
       clearTimeout(hideTimeout.current);
       removeOutsideClickHandler();
     };
-  }, [propsOpened, removeOutsideClickHandler, showPicker]);
+  }, [openedProp, removeOutsideClickHandler, showPicker]);
   const onPickerChange = useCallback(_ref => {
     let {
         hidePicker: shouldHidePicker = true
       } = _ref,
       args = _objectWithoutProperties(_ref, _excluded);
-    if (shouldHidePicker && !show_submit_button && !show_cancel_button) {
+    if (shouldHidePicker && !showSubmitButton && !showCancelButton) {
       hidePicker();
     }
-    setStartDate(args.startDate);
-    setEndDate(args.endDate);
-  }, [hidePicker, show_submit_button, show_cancel_button]);
+    setDates({
+      startDate: args.startDate,
+      endDate: args.endDate
+    });
+  }, [hidePicker, showSubmitButton, showCancelButton]);
   const onSubmitHandler = useCallback(event => {
     hidePicker(event);
-    on_submit === null || on_submit === void 0 ? void 0 : on_submit(_objectSpread({}, getReturnObject.current({
+    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(_objectSpread({}, getReturnObject.current({
       event
     })));
-  }, [hidePicker, on_submit]);
+  }, [hidePicker, onSubmit]);
   const onCancelHandler = useCallback(event => {
     hidePicker();
-    on_cancel === null || on_cancel === void 0 ? void 0 : on_cancel(_objectSpread({}, getReturnObject.current(event)));
-  }, [hidePicker, on_cancel]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel(_objectSpread({}, getReturnObject.current(event)));
+  }, [hidePicker, onCancel]);
   const onResetHandler = useCallback(event => {
     hidePicker();
-    on_reset === null || on_reset === void 0 ? void 0 : on_reset(_objectSpread({}, getReturnObject.current(event)));
-  }, [hidePicker, on_reset]);
+    onReset === null || onReset === void 0 ? void 0 : onReset(_objectSpread({}, getReturnObject.current(event)));
+  }, [hidePicker, onReset]);
   const togglePicker = useCallback(args => {
     !opened ? showPicker(args) : hidePicker(args);
   }, [opened, showPicker, hidePicker]);
   const formatSelectedDateTitle = useCallback(() => {
     const {
-      selected_date,
+      selectedDate,
       start,
       end
     } = translation;
+    const {
+      startDate,
+      endDate
+    } = dates;
     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]);
+    return currentDate ? selectedDate.replace(/%s/, currentDate) : '';
+  }, [range, translation, dates]);
   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);
+  }, convertSnakeCaseProps(context.getTranslation(props).DatePicker), pickFormElementProps(context === null || context === void 0 ? void 0 : context.FormRow), convertSnakeCaseProps(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,
+      labelDirection,
+      labelSrOnly,
+      onlyMonth,
+      hideLastWeek,
+      disableAutofocus,
+      hideNavigationButtons,
+      firstDay,
+      resetDate,
       link,
       sync,
-      input_element,
-      addon_element,
+      inputElement,
+      addonElement,
       shortcuts,
       disabled,
       stretch,
       skeleton,
       size,
       status,
-      status_state,
-      status_props,
-      status_no_animation,
+      statusState,
+      statusProps,
+      statusNoAnimation,
       globalStatus,
       suffix,
-      mask_order,
-      mask_placeholder,
-      submit_button_text,
-      cancel_button_text,
-      reset_button_text,
-      show_reset_button,
+      maskOrder,
+      maskPlaceholder,
+      submitButtonText,
+      cancelButtonText,
+      resetButtonText,
+      showResetButton,
       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 attributes = useMemo(() => filterOutNonAttributes(restProps), [restProps]);
+  const shouldHideDays = onlyMonth ? true : hideDays;
+  const shouldHideNavigation = onlyMonth ? hideNavigationButtons ? false : true : hideNavigation;
   const showStatus = getStatusState(status);
   const pickerParams = {};
   if (showStatus || suffix) {
@@ -283,7 +264,7 @@ function DatePicker(externalProps) {
   };
   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}`),
+    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 remainingDOMProps = validateDOMAttributes(props, attributes);
@@ -297,8 +278,8 @@ function DatePicker(externalProps) {
     id: id + '-label',
     forId: id,
     text: label,
-    label_direction: label_direction,
-    srOnly: label_sr_only,
+    labelDirection: labelDirection,
+    srOnly: labelSrOnly,
     disabled: disabled,
     skeleton: skeleton
   }), React.createElement("span", _extends({
@@ -312,10 +293,10 @@ function DatePicker(externalProps) {
     text_id: id + '-status',
     width_selector: id + '-shell',
     text: status,
-    state: status_state,
-    no_animation: status_no_animation,
+    state: statusState,
+    no_animation: statusNoAnimation,
     skeleton: skeleton
-  }, status_props)), React.createElement("span", {
+  }, statusProps)), React.createElement("span", {
     className: "dnb-date-picker__row"
   }, React.createElement("span", {
     className: "dnb-date-picker__shell",
@@ -326,55 +307,55 @@ function DatePicker(externalProps) {
     disabled: disabled,
     stretch: stretch,
     skeleton: skeleton,
-    maskOrder: mask_order,
-    maskPlaceholder: mask_placeholder,
+    maskOrder: maskOrder,
+    maskPlaceholder: maskPlaceholder,
     isRange: range,
     showInput: showInput,
     selectedDateTitle: selectedDateTitle,
-    input_element: input_element,
+    inputElement: inputElement,
     opened: opened,
     hidden: hidden,
     size: size,
     status: status ? 'error' : null,
-    status_state: status_state,
+    statusState: statusState,
     lang: context.locale
   }, attributes, {
     submitAttributes: remainingSubmitProps,
     onSubmit: togglePicker
-  }, status_props)), React.createElement("span", {
+  }, statusProps)), 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,
+    firstDayOfWeek: firstDay,
+    resetDate: resetDate,
     isRange: range,
     isLink: link,
     isSync: sync,
     hideDays: shouldHideDays,
     hideNav: shouldHideNavigation,
-    views: hide_navigation_buttons ? [{
+    views: hideNavigationButtons ? [{
       nextBtn: false,
       prevBtn: false
     }] : null,
-    onlyMonth: only_month,
-    hideNextMonthWeek: hide_last_week,
-    noAutoFocus: disable_autofocus,
+    onlyMonth: onlyMonth,
+    hideNextMonthWeek: hideLastWeek,
+    noAutoFocus: disableAutofocus,
     onChange: onPickerChange,
     locale: context.locale
-  }), (addon_element || shortcuts) && React.createElement(DatePickerAddon, {
-    renderElement: addon_element,
+  }), (addonElement || shortcuts) && React.createElement(DatePickerAddon, {
+    renderElement: addonElement,
     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
+    submitButtonText: submitButtonText,
+    cancelButtonText: cancelButtonText,
+    resetButtonText: resetButtonText
   })))), suffix && React.createElement(Suffix, {
     className: "dnb-date-picker__suffix",
     id: id + '-suffix',
@@ -384,6 +365,15 @@ 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'];
+function filterOutNonAttributes(props) {
+  return Object.keys(props).reduce((attributes, key) => {
+    if (!NonAttributes.includes(key)) {
+      attributes[key] = props[key];
+    }
+    return attributes;
+  }, {});
+}
 export default DatePicker;
 DatePicker._supportsSpacingProps = true;
 //# sourceMappingURL=DatePicker.js.map